
slack;
OVERVIEW
Slack is a powerful communication platform that is increasingly replacing email and is an essential tool for thousands of companies during the incoming age of remote online work. As of October 2019, Slack has 20 million daily active users, and has been growing exponentially as the mobile and desktop experiences are undergoing whole redesigns.ROLE
As a product design intern on the expansion team, I worked closely with my mentor and product design leadership to define the details of the features I was working on. I created design flows, prototypes, sketches, and high-fidelity prototypes for these features. I also collaborated with engineering, research, and product management to ensure a high-quality implementation and to ship a polished user experience.
problem statement;
[FIG 01]
VISUALIZING SHARED CHANNELS

[FIG 02]
UNDERSTANDING CURRENT UX

takeaways;
I also had to work in parallel with other teams working on the mobile designs, so there was a lot of collaboration in order to keep parity between all of the new features being developed!
[FIG 03]
DESIGN ITERATIONS

process;
[FIG 04]
FINAL SCREENS

reflection;

challenges;
2. How can we make this feel helpful to a user rather than telling them to 'create a new channel' when it feels irrelevant?
3. How do we avoid conflicts with existing education?
[FIG 05]
PLACEMENT EXPLORATIONS

[FIG 06]
DESIGN ITERATIONS + FINAL DESIGN (CLICK THROUGH SLIDESHOW)
solution;

problem;
[FIG 07]
UNDERSTANDING CURRENT USER FLOW

findings;
[FIG 08]
ERROR STATES

findings;
[FIG 09]
DESIGN ITERATIONS + FEEDBACK

[FIG 10]
FINAL SCREENS

conclusion;
compass;
OVERVIEW
Compass is building the first modern real estate platform, pairing the industry’s top talent with technology to make the search and sell experience intelligent and seamless.ROLE
During my internship, my main project was to build a microsite that houses the best case studies of agent logos and branding. This tool will be used by Marketing, SGMs, Recruiting, and C-Level Leaders to showcase the value that design brings to Compass agents and their brands.
step 01 - discovery;
→ WHY ARE WE BUILDING THIS?
To display the agent logo process in a unique, but clear format and to show how we understood what an agent’s asked for and how we arrived at the final result.→ WHO IS THE AUDIENCE?
AgentsNon-designers
(This means the website should be easy to use, clear, concise, interactive, and engaging.)
→ WHO IS USING IT?
Marketing, SGMs, Recruiting, and C-Level Leaders[FIG 01]
WEBSITE ARCHITCTURE

step 02 - prototyping;
To start off, I created two wireframe flows based on different conceptual models: a continuous page vs. a navigatable experience. This resulted in two very different prototypes!
[FIG 02]
WIREFRAME COMPARISON

prototype a;
To start off, I created two wireframe flows based on different conceptual models: a continuous page vs. a navigatable experience. This resulted in two very different prototypes!

CASE STUDY PAGE FORMAT
Prototype A's case study page required user interaction through continued vertical scrolling. I wanted to emulate a timeline effect, so that the user could follow the same progress as a designer would during the logo design process. It also told a more cohesive story and replicates the same informational format that is presented in logo presentation decks.DESIGN FLAWS
We wanted to revise this layout by making it more navigation-friendly, as scrolling holds the user back from easily accessing all of the other sections in the case study pages.
VISUALIZING LOGO OPTIONS
Previewing logo options on each case study page was another revision we needed to make, as the first version of the mockup made it so that it was necessary for users to view the logo on mockups. This information is extra, and would serve a greater purpose if it were hidden or accessed through an extra trigger.final prototype;
We went with a navigable experience in which users are able to access all parts of the case study without having to scroll. This put into perspective the value of screen real estate and the disparities between mobile and desktop experiences!

01. DISPLAYING THE AGENT BRAND
In order for users of the website to understand the logo directions, I started off each logo case study with an 'Agent Brand' section that extracts info from the Agent Logo Workbook (another Compass resource that realtors use to give designers a direction to follow when ideating logos).
02. PRESENTATION OF LOGO OPTIONS
The next section of each case study shows the logo options that are actually presented to the clients, just as they are during Agent Logo Presentations. I also added a method to view the logos on actual marketing materials / prototypes for better visualization.
03. LOGO DELIVERY
The final step of the logo design process is the final delivery, which occurs after design refinements. This section is where users can see the logo being used on actual marketing assets and products!navigation;

fin!;
For more fun at Compass, check out my mini-portfolio!

rally;
OVERVIEW
Rally is an application for high school activists looking to connect and share social justice ideas and practices. It was created for the Anti-Defamation League through the Global TIES Program at UC San Diego. Global TIES partners interdisciplinary teams of UC San Diego students with nonprofits and NGOs to co-create solutions to socially urgent problems in San Diego and the developing world.ROLE
As the creative director of the project, I oversaw the design decisions for the branding and UI for Rally. I worked alongside my team to improve the user experience of the pre-existing Rally application by incorporating research findings and user-testing feedback from selected users.
problem statement;
"How might we enhance the interface and experience of the Rally app to allow high school students with an interest in social justice to connect with each other and create action?"
[FIG 01]
WHO ARE WE DESIGNING FOR?

takeaways;
Additionally, the target users (high schoolers) have a lot of knowledge and skills that can be leveraged in Rally. They have an astute awareness of social media, and for this reason, they have the capacity to be a part of shifts in social/political thinking online as they first occur. They also have been raised in an era completely saturated in technology. We can leverage this knowledge base by giving high schoolers a platform to share ideas and collaborate and therefore, wanted to incorporate a plethora of tools for the users to meet, discuss, and learn.
[FIG 02]
CURRENT UX (RALLY: BEFORE REDESIGN)

analysis & testing;
We discovered that...
→ The interface was not engaging and lacked the educational tone the application is intended to evoke.→ Feature separation was not distinct or accessible as users found themselves having to complete an excessive number of steps in order to reach a certain function.
→ The application lacked novelty and recognizability compared to competitor apps.
[FIG 03]
ANALYSIS + TESTING (CLICK THROUGH SLIDESHOW)
branding;
→ Cool
→ Sleek
→ Vibrant
→ Modern
→ Playful
[FIG 04]
BRANDING

limitations;
[FIG 05]
BEFORE + AFTER (CLICK THROUGH SLIDESHOW)
next steps;
This was one of my first projects for a non-profit organization, and to see a tool being developed for reasons outside of business gain has been rewarding and eye-opening in my creating thinking process. Thank you to team ADL for allowing us to support them and to Professor Ngo for encouraging such thoughtful projects!


loremnipsum;
OVERVIEW
Lorem Ipsum Design Guild is a passion project founded by myself and my friend and designer, Carlo De La Fuente. As creators who are always seeking new projects and exposure, we wanted a fresh creative outlet to produce graphics that could be used and seen by the rest of UC San Diego's student body. Together, we founded a student-run design studio that provides free design services to students, organizations, and local businesses.OUR GOAL
We aim to always have fun while creating and hope to establish our brand as we design for a number of different voices!










