Unified Design

Without a design system, prototypes are disorganized and inconsistent. I led the creation of a design system to standardize UI components, document best practices for incoming designers and facilitate developer handoff.

Home Unite Us is a volunteer-led project at Hack for LA, a civic tech organization, which partners with Safe Place for Youth to help homeless youth find temporary housing through our online matchmaking tool.

Role
UX Designer
Client
Safe Place for Youth
Go to designs

How does Bixby interact on different devices? 

Depending on the device, Bixby responds with a mix of modalities (voice, graphics, haptics). Designing context appropriate dialog that aligns with how people use a certain device is a core part of my role.

Due to NDA, I can't share many specifics.

Conversation Starters

One of my core responsibilities is sharing knowledge, which means I work at the intersection of many teams and bring their expertise together to evangelize best practices.

I am the lead writer and designer for a guide on conversational patterns that was the first of its kind to be used within the Bixby team.

I treated the conversational patterns like the foundation of a design system with the goal of creating a consistent Bixby voice.

What started as sketches of common use cases evolved into interaction flows from which several patterns arose. Then, there was considering Bixby's understanding (i.e. what if Bixby misheard the user?) against the user's perspective (i.e. what kind of goal do they want to accomplish?).

After several iterations, the patterns were grouped into "Bixby's needs" and the "user's goals," which serve as building blocks of a conversation.

Easier said, then done

The perceived latency on watch needed a redesign. Before, screen dialog added more time between a user's utterance and goal. Now, the user's request is quicker, like when starting a timer.

User research showed that extra dialog like "here you go: " didn't add value. Bixby no longer says this when showing results.

Beyond these watch examples, I write dialog improvements for use cases such as reading schedules, disambiguating between SmartThings (IoT) devices and organizing lists.

Continuing the conversation

Discoverability is a challenge in consumer conversational AI like Bixby.

Apart from designing experiences, I use copywriting and marketing campaigns to let users know how to personalize their Bixby interactions.

I also explore new experiences and modalities alongside the research team. Maybe some will be coming to a device near you.

See new experiences + ideas

Animation

Scrolling client logos and engaging microinteractions create a more delightful user experience

Inconsistent UI

Miscommunication

Low documentation

Solution

Decentralized organization

Family Refugee Services (FRS) is part of a larger organization where teams juggle multiple projects at once that overlap with various departments.

UX value proposition

I defined the scope of a UX designer early on since FRS had not worked with one before. I defended my project plan through user research and frequent stakeholder meetings

Limited refugee interaction

To help refugee families, we must first help their mentors. It is difficult to design digital tools for the families due to language barriers and inconsistent internet access.

Solution

Decentralized organization

Family Refugee Services (FRS) is part of a larger organization where teams juggle multiple projects at once that overlap with various departments.

UX value proposition

I defined the scope of a UX designer early on since FRS had not worked with one before. I defended my project plan through user research and frequent stakeholder meetings

Limited refugee interaction

To help refugee families, we must first help their mentors. It is difficult to design digital tools for the families due to language barriers and inconsistent internet access.

01

What is a design system?

"Atomic design is not a linear process, but rather a mental model”
- Brad Frost, Atomic Design

To construct this design system, I used the atomic design methodology. Its modular approach treats design as a group of closely related features that can be broken down into “molecules” and “atoms.” 

Style guides and pattern libraries are often mistaken for a design system. While these can both be part of a design system, they alone are not the system. Rather, they are building blocks.

Design systems combine product principles with cohesive visual and written components.

02

Create & educate

How does the team take a static style guide and turn it into a dynamic system

The high fidelity prototypes were not using components (reusable elements), which created inconsistency. Each designer was working in a silo rather than using a standard design library.

After I conducted a high-level audit to demonstrate this problem, the team began to divide and conquer.

Explore the inventory audit
Icon inventory screenshot

Design Audit

After compiling all desktop and mobile screens, the designers spent several meetings reviewing current styles and proposing changes. Following iterations, we compiled the new system in Figma and Zeroheight.

03

Maintain & adopt

System Adoption

Using Figma to create the design components and Zeroheight to document them, there is now a place to reference all design. I also wrote a process explaining how to use Zeroheight. Existing prototypes now use components that update whenever the system changes.

See the adoption process

Design systems are always a work in progress. Throughout this process, I learned the value of teamwork, communication and iteration. While I am no longer part of this project, the groundwork is set for new designs to flourish.

More Case Studies

Restaurants have dozens to hundreds of wine options.

How do you choose?

What if you could talk to your own sommelier?

Solution

Decentralized organization

Family Refugee Services (FRS) is part of a larger organization where teams juggle multiple projects at once that overlap with various departments.

UX value proposition

I defined the scope of a UX designer early on since FRS had not worked with one before. I defended my project plan through user research and frequent stakeholder meetings

Limited refugee interaction

To help refugee families, we must first help their mentors. It is difficult to design digital tools for the families due to language barriers and inconsistent internet access.

Context is key for voice first experiences

This use case passes Google's checklist to determine if the experience will be enhanced through voice first technology.

People already have human-to-human conversations about this topic
People can do this task when their hands or eyes are busy
Interaction is brief
Requires multiple clicks or apps when using a GUI (screen)

What Are We Here to Do?

Conversation is a series of turns

Ensuring that the goals of the restaurant are aligned with the goals of the voice assistant and customers will create a more natural conversation.

Restaurants want to associate their brand with a personalized dining experience

System should not come off as snobby, boring, or unintelligent

Customers want a perceptive, savvy, and polite voice assistant

Who is Talking?

Designing personality

Brilliant sommeliers hold key characteristics that the system should be designed to emulate. Customers are assumed to have tried wine before and expect something high quality.

Is conversation the right fit?

What are we here to do?

Who is talking?

Take a sip

The Wine Me MVP is live on Voiceflow. Sample dialogs show what is done and what is yet to come.

Try Wine Me to:

  • Pair wine with food choices
  • Order a glass from the wine offerings
  • Learn fun facts about wine
Try Wine Me

More Case Studies

Parking is a problem


The average American wastes 17 hours a year trying to find parking. In Los Angeles, that costs drivers nearly $1800 annually.

We dream of self-driving cars, so why not self-parking ones?

During a 24 hour Hackathon, my team conceptualized a screen-less, all-voice parking companion.

With fewer distractions and frustrations, this technology could save millions of hours and dollars.

Designing & writing the conversation

The market for an AI-based parking system is growing. Smart cities are the next infrastructure frontier, using integrated software and hardware to reshape transportation.

Parking management software exist as mobile applications, rather than an IoT solution

Given time constraints, we focused on key aspects of the user journey

• User control of parking preferences
• Proactive system notifications
• Tailored information (price, distance, availability)

Key features for self-parking

When the car is ready to navigate and find parking, a notification sound plays before the user makes a decision.
Change parking search settings using price, proximity, type of spot and if it is near a charging station.
Asking for help provides the user with more context on what can be done and how to change settings.

ParkReady's Future

Planning user journeys
The urban ecosystem
A new personality
Iteration & testing
No items found.

More Case Studies