AI LA Web Design
AI LA Web Design

I worked with AI LA's Executive Director to design and build their website from Squarespace into Webflow.

This project featured a tight deadline, requiring documentation and design handoff to the organization's developers.

View Results
ROLE
Lead web designer
Client
AI LA
TOOLS
Webflow
Timeline
February 2021

Volunteers

are unsure how to virtually mentor refugees

Refugees

are isolated with no mentor visits

Organization

has no digital process for volunteers

Solution

Identify where Family Refugee Services can provide tools for mentors to engage with refugee families

Constraints

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.

Process

01

Research
Survey Analysis
User Interviews

02

Contextualize
Persona
Affinity Mapping

03

Craft
Journey Map
Prototypes

Let's Talk

Less interaction means less communication

FRS sends closing surveys to volunteers at the end of their 6 month commitment, but many had not been analyzed. I reviewed the results of 64 previous volunteers to understand historical issues.

Since the current volunteers are in a different circumstance, I also created and sent a survey focused on digital communication preferences to 30 active volunteers and interviewed 3.

"I felt like there were resources that we don't know about that can be utilized"
"Because we [volunteers] experienced difficulty in communication, we were not able to see our family as much"
- Quotes from current volunteers
What volunteers are saying is

I want to spend less time figuring out how to meet with the families and instead have the tools to assist them quickly.

Make it Personal

Building personal relationships is one of the most effective ways to offer cultural mentorship

Persona of a typical volunteer created from synthesized surveys and interviews

Map the Journey

Turning physical into digital

Using documentation from FRS on the current volunteer process along with survey results and a typical user in mind, I began affinity mapping the journey and possible interventions. This would inform where FRS could make interactions more meaningful and personal.

After aligning with the FRS manager, I demonstrated  findings using a 5 step journey map with representative user quotes and recommendations for digital tools and resources

I consolidated the recommendations into a prioritization matrix. Focusing on "quick wins" I began sketching wireframes for a new homepage.

Design

To further strengthen communication between FRS and volunteers, I recommended redesigning the website with the following goals:

  • Serve as a place to implement marketing campaigns (currently FRS does not have their own landing page)
  • Volunteers can apply to be cultural mentors
  • Clear navigation to training resources
No items found.

Results

The organization recently rolled out their self-paced mentor training after my recommendation to streamline communication.

The website development team is also building their landing page based on my prototypes.

Next
Steps

Test users and monitor outcomes

It is important to test website usability with volunteers and other potential users such as employees and refugee families. Responsive mobile prototypes could also be created and tested.

Beyond user testing, it will be important to monitor volunteer closing surveys for engagement metrics, retention rates, and general feedback.

"You have been and continue to be instrumental in the conception and development of this project."
- Family Refugee Services Manager

Reflection

Designers are advocates

My role was to translate the needs of volunteers into valuable insights for management at Family Refugee Services. While advocating for volunteers, I also had to prove the value of user experience to the client since they were unfamiliar with UX's scope.

Through user research, frequent communication and human-centered design principles, I learned to manage client expectations and deliver actionable recommendations.

Animation

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

Inconsistent UI

does not reflect client brand and project needs

Miscommunication

of when and how to use designs

Low documentation

creates confusion about requirements

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.

Time for a
System

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.” 

What isn't a design system?

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 Challenge

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.

Icon inventory screenshot
Explore the inventory audit

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 (see last slide) and guide 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.

Restaurants have
dozens to hundreds
of wine options. How do you choose? 

Wine anxiety is a common phenomenon amongst diners. Not all restaurants have waiters with the time and knowledge to personalize recommendations

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?

Prototype

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

The next iteration is currently being designed thanks to feedback from people like you! Interested in helping? Try Wine Me to:

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


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.

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

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

Features

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.
What is the user journey outside of the car?
Considering the urban ecosystem
Designing a new personality
Iteration & testing
No items found.

View all projects