DoorDash Health Center

UX Design
Client
DoorDash
Project Type
UX Design
Project Year
2023

DoorDash HealthCenter

The DoorDash HealthCenter is an add-on to the DoorDash app that helps users prioritize and manage their health. This project was created utilizing Figma.

This project was created as a part of the Fall 2023 Designathon hosted by Design@Berkeley and UX@Berkeley in partnership with Adobe and Doordash.

View the full case study here.

PROBLEM

The Prompt

DoorDash’s mission is to revolutionize the food delivery service by providing a convenient and health-conscious experience for all users, especially college students. They aim to promote food transparency through features like clear nutritional information, meal recommendations, balanced options, calorie tracking, meal planning tools, and affordable healthy choices. However, college students still struggle to eat healthy due to limited options, busy schedules, and tight budgets. Your mission is to design an experience for users that will help them take better care of their health.

Our Problem Statement

How might we design an engaging and efficient way for college students to promote healthy eating habits and practices to help them take better care of their health?
My Role: 
‍Lead UX Designer/Researcher
Responsibilities: 
‍User Research, Wireframing, Prototyping, Usability Testing
Design Lore: I completed this Designathon an hour after racing my first half-marathon!

User Research: Summary

For this project, the research involved examining existing nutrition and health tracking apps, and a survey of college students on similar topics. Through exploring app reviews and discussion boards, I found and focused on the strengths and weaknesses in existing applications, and what features users wished were implemented. A large portion of research focused on the eating habits of college students and the reasons why college students struggle to maintain healthy eating practices.

U S E R   P E R S O N A S

IDEATION

Competitor Analysis

Initial Sketches + User Flow

Wireframe sketches of the DoorDash Health Center Application.
Sketches of the DoorDash Health Center User Journey.

TESTING

Low-Fidelity Wireframes

Within the timeframe of the Designathon, as a team, we were able to create mid-fi designs for each of the planned screens and a limited number of high-fidelity prototypes. We presented our designs and received feedback from a panel of UX and Product Designers and our peers. Beyond this point are additions I made to the project on my own time.

Low-Fidelity Prototypes of the DoorDash Health Center Applicaiton.
Following Usability Studies of the initial prototype, my main focus for improving the design were the following:

1. Make the Meal Tracking Aspect More Prominent

Users noted that although it seemed the purpose of the health center was to keep track of one's eating habits by logging meals, the design’s hierarchy did not reflect this goal. A few users also noted that there should be more transitions to the typical DoorDash user flow and more opportunities for users to order food through the Health Center.

2. Replace Calorie Tracking with a Healthier Alternative

In both the survey and usability study, many indicated their hesitation to use calorie-tracking apps due to the fear of becoming obsessive and developing eating disorders. To address this, I researched alternative ways to keep track of meals without relying on calorie tracking. Tracking the number of meals and trying to include different major food groups was proven to be a healthier alternative. This change allowed users to set specific goals such as "eat 20g of protein every day" or "only eat 100g of carbs a day", which the app could find and suggest meals for users who haven't reached their daily goals yet.

3. Increase Incentives/User Buy-in

Another piece of feedback that I received is that for users to use these features more consistently throughout the week, there had to be stronger incentives. Based on this I further developed the rewards and social features of the app, allowing users to earn badges, share their progress with friends, and most importantly, work towards deals and discounts, making eating healthier more affordable.

SOLUTION

Updated User Pathway

For the Finalized User Pathway, the user experience focused on two separate methods of interacting with the added features, the first being through features that add on, but do not disrupt the traditional DoorDash User Experience, and a separate Health Center users would have access to more personalized features.

Low-Fidelity Prototype

The Low-Fidelity Prototype focused on how users would move through the DoorDash Health Center and the additional features they would have access to.
High-Fidelity Prototype oft he DoorDash Health Center.

High-Fidelity Prototype

Following Usability studies, the main goals for the high-fidelity prototype were to make the meal-tracking aspect more prominent, replace the calorie-tacking aspect of the app, and address the lack of buy-in incentives for users.

Access the full prototype here.

IMPACT

Intended Contribution

I hope that through the design and user experience of the added features, college students will be able to learn more about healthy eating practices and develop routines they can implement in their future eating habits.

By adding goals and rewards, and designing a space for peers to interact with each other within the app, I hope to create an experience that is engaging and appealing to college students, without having to lower levels of accessibility.

REFLECTION

Lessons Learned

1. The Design Process is Unique to Each Individual Project

A key takeaway I've learned from this experience is that every design project is unique and will require a different approach. I went into the project thinking that the only way I would be able to create a meaningful experience was if I made sure to follow a set linear pattern of design exercises. However, in trying to produce all of these things, I wasted time that could've been used to produce more polished mid-fidelity deliverables for the final product.

2. Designing within the Constraints of an Existing Brand

A challenge that this project presented was creating a feature for an app that already has its own defined style and brand kit. As the project went on, I realized how much time I saved at points where I usually spent a lot of time and energy trying to pick the perfect font or color palette. Through this experience, I was able to gain experience creating novel interfaces, that when placed alongside existing designs, would fit right in.

3. Quality over Quantity

For the Designathon we were given at least 12 areas of focus, to address in our design. In our attempt to satisfy all of these areas, we brainstormed a large number of features that we ultimately were not able to implement. If I were to go back, choosing a limited number of areas to focus on and making sure that those features were completely developed before moving on to addressing other needs would have been the most efficient route.

Next Steps

1. Address Remaining Accessibility Needs

When further developing the mockup, I would continue to add features that address accessibility needs. Planned additions include adding a dark and high contrast mode for users, adding voice navigation controls and image captions, and making the designs compatible with screen readers and other assistive technologies.

2. Refine Rewards Aspect

I also plan to refine the rewards aspect of the app and design interactions that show the ways users can earn savings and coupons through eating healthier.

3. Further Research Healthy Gamification

I have also begun to further research ways to “gamify” the process and give users more incentive to continue using the health center on DoorDash to make healthier eating choices and return to the app frequently.

Other Projects

Web Design
AMFB Redesign
UX Design
Dwellr

Let's Work Together!

Whether you would like to work together on an idea or concept you have, or simply have questions about any of the projects I currently have listed on the website, let's get connected!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

DoorDash Health Center

UX Design
Client
DoorDash
Project Type
UX Design
Project Year
2023

DoorDash Health Center

The DoorDash Heath Center is an add-on to the DoorDash app that helps users prioritize and manage their health while using the app. This project was created utilizing Figma.

This project was created as part of the Fall 2023 Designathon organized by Design @ Berkeley and UX @ Berkeley in partnership with DoorDash. 

View the full case study here.

Problem

Overview

About My Father's Business is a non-profit organization founded in 2018 in response to the growing housing crisis in Southern California. The nonprofit serves the homeless population in Los Angeles through hygiene packs and backpacks that provide support to individuals throughout the year.

For this project, I was tasked with redesigning the existing website to make it more visually appealing and easy for users to navigate and find information.

Problem Statement

When comparing the website to those of similar organizations, it became clear that numerous roadblocks might turn away potential donors or make it hard for individuals to become involved in the nonprofit's work.

The challenge is to redesign the website to retain key components of the existing website while adding new features and structure that make it easy for users of all ages to contribute to the nonprofit's mission.

I aimed to strengthen the branding of the non-profit organization in a way that restored a sense of human connection that was missing from the existing website.
My Role: 
Lead UX Designer/Researcher
Responsibilities: 
‍User Research, Wireframing, Prototyping, Usability Testing

User Research: Summary

For this project, I conducted extensive secondary research on homelessness and non-profit organizations to discover the common pain points users will experience when donating to a non-profit. A competitor analysis involving similar organizations serving the same community provided further insight into how to restructure the website. Drawing from this research, I aim to create a user experience that allows individuals to quickly and easily donate or volunteer in as few steps as possible, leaving the feeling they had a positive experience.

U S E R   P E R S O N A S

Ideation

Before starting the design process, I conducted a competitive analysis by comparing AMFB’s website to the websites of similar non-profit organizations in the area. I focused on the main pages I planned to redesign on the website. I took detailed notes on the user experience of each web page and synthesized these ideas to create an idea of how I would restructure the redesigned web pages.
Cross-Analysis of the Home Page of Each Non-Profit Website
Further in-depth review of the home page.

Information Architecture

After analyzing the website’s structure and competitors I created a site map that simplified and streamlined the user experience. I added the missing features and structure that made competitors successful while removing or reworking existing features that were the source of pain points.
Information Architecture and Site map of the AMFB Website.

Initial Sketches

Now that I had a general idea of what features I wanted each webpage to include, I began to sketch out how an envisioned structure that prioritized the user’s anticipated needs. After rough designs were sketched, I created wireframes for how the website would adapt to the interfaces of tablet and mobile devices.
Initial Sketches for the Desktop, Tablet, and Mobile Design on Paper.

Testing

Low-Fidelity Wireframes

To get a better idea of how the features would interact with each other and to further flesh out the ideas I had for each of the pages, low-fidelity wireframes were created utilizing Figma.
My main focus for improving the design were the following:

1. Increase the Pathways for Donors

Being a nonprofit organization, one of the main goals of the website is to attract donors and volunteers to aid in their mission of helping the homeless population. However, within the existing website, numerous pain points existed that had the potential to turn away donors such as minimal links to the donation page, as well as a multi-step donation process. I aimed to increase the chances an individual has to donate and the options for them to do so.

2. Add Engagement Opportunities

Another goal for the website was to add more opportunities for users to engage with the nonprofit and feel they are truly a part of a team making a difference. Through low-stakes investments such as signing up for a newsletter or meeting with other volunteers, I aim to increase and solidify the non-profit’s support and volunteer base.

3. Create a Brand Voice and Identity

On the existing website, there are numerous places where the tone is cold and robotic, which might leave visitors less inclined to participate. I hope to ease any anxieties, through inviting designs and a friendly tone. I aim to leave them feeling they have made a meaningful and valued impact through their involvement with the non-profit.

High Fidelity User-Flow

The final user flow aimed to give users multiple pathways to reach their intended goal, whether to get involved, learn more about the organization, or donate.

The user flow was customized and tailored to the needs depending on whether the user accessed the website through a desktop computer, tablet, or mobile device.
Figma User flow of the AMFB Web High-Fidelity Web Designs for Tablet Screens.Figma User flow of the AMFB Web High-Fidelity Web Designs for Laptop Screens.
AMFB Home page displayed on a laptop screen.

High Fidelity Prototype

The final prototype aimed to simulate how the website would function after redesigning. The main goal of building the prototype was to ensure clear, accessible, and streamlined ways for the user to move through the website.

Access the full prototype here.
Mockup of the AMFB website displayed on a laptop, tablet, and vertical phone screen.

Impact

Intended Contribution

I hope this redesign will help About My Father’s Business grow its community of potential donors and volunteers. Ultimately, it will serve as a tool to facilitate the good work AMFB is doing in the community of Los Angeles.
Mockup of the AMFB Website displayed on a Macbook, iPad, and iPhone with green leaves wrapped around each.

Reflection

Lessons Learned

1. Importance of Market Research

The design choices of this project were heavily influenced by the insights I was able to gather through market research. Numerous pain points were discovered by analyzing other websites and exploring why an individual might donate to an organization.

2. Integrating Responsive Design

Many of my past projects focused on designing a user experience for a single platform, such as a mobile application. In this project, I was forced to consider how content would need to be adjusted or cut in order to adapt my designs to different screens.

3. Redesigning from an Existing Base

Instead of starting from scratch, this project builds off an existing design. I learned the benefit of having design constraints in place, whether self-imposed or by a client, in quickly moving through the design process.
High-Fidelity Mockups of the AMFB Webpage, showcasing the Home, About, Get Involved, Our Team, Donate, and Contact Us Page Designs.

Next Steps

1. Conduct Further User Testing

Now that a workable prototype has been developed, I would like to measure the redesign’s efficacy through usability tests involving those familiar with or new to the organization.

2. Continue to Add Engagement & Personalization Opportunities

To further heighten the user experience, I plan to continue adding interactions that lead to pleasant associations between the user and the non-profit.

3. Accessibility Considerations

Making the website accessible for all users is a top priority. I aim to continue researching and applying different features to the website to make it compatible with multiple assistive technologies.

Other Projects

Web Design
AMFB Redesign
UX Design
Dwellr

Let's Work Together!

Whether you would like to work together on an idea or concept you have, or simply have questions about any of the projects I currently have listed on the website, let's get connected!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

DoorDash Health Center

UX Design
Client
DoorDash
Project Type
UX Design
Project Year
2023

DoorDash Health Center

The DoorDash Heath Center is an add-on to the DoorDash app that helps users prioritize and manage their health while using the app. This project was created utilizing Figma.

This project was created as part of the Fall 2023 Designathon organized by Design @ Berkeley and UX @ Berkeley in partnership with DoorDash. 

High Fidelity Mobile Designs of the Dwellr Mobile Application.
View the full case study here.

Problem

Overview

Dwellr is a house-hunting app that functions similarly to a dating app, allowing users to explore potential houses and connect with realtors. We were tasked with designing a brand and creating a high-fidelity prototype to showcase how the product would work to potential investors. Our envisioned competitors would include existing platforms such as Redfin and Zillow. How users explore potential houses and engage with realtors makes Dwellr stand apart.

Problem Statement

Searching for the perfect house can be difficult for first-time buyers, or those who are unfamiliar with the way modern property selling platforms work.

The challenge is to design a user-friendly house-hunting app, that combines the user experience of dating applications like Tinder and Real Estate apps like Zillow to streamline the property search process in a way that is engaging for users of all backgrounds.

We aim for simplicity and guidance, emphasizing a rounded, intuitive interface. We aim to simplify the property search process for everyday homebuyers, setting Dwellr apart in the market, while making home buying fun!
My Role: 
‍Project Manager, Lead UX Designer/Researcher
Responsibilities: 
‍User Research, Wireframing, Prototyping, Usability Testing

User Research: Summary

For this project, the research I conducted involved secondary research, as well as exploring the existing reviews on popular competitors. I was able to pinpoint several frustrations that users face using similar platforms as well as many issues outside of the application that disrupt the house-buying experience for users. These included a lack of houses to display on applications, instability of the market, lack of buying experience, and more. Drawing from this research, I aim to create a product that assists buyers in navigating a turbulent market, in a streamlined, easy-to-use manner.

U S E R   P E R S O N A S

Ideation

Competitor Analaysis

Initial Sketches

For the initial phase of the project, we all drafted up our ideas for how the product would function and what the different screens would look like. Features we believed would facilitate the most engaging user experience were extracted and incorporated into our final low-fidelity designs.
Wireframe sketches of the Dwellr Mobile App.
Wireframe sketches of the Dwellr Mobile App.
This was my initial sketch for the design!
Wireframe sketches of the Dwellr Mobile App.
Design Lore: Due to busy college schedules, our weekly check-in meeting with clients were usually Mondays at 9:00 PM.

Testing

Mid-Fidelity Wireframes

Our first deadline for deliverables was 24 hours from our initial meeting with the client. Given the time constraints, we focused on creating mid-fidelity wireframes to give our client a general sense of how the application would function and planned to later polish the design and interactions.
Mid-Fidelity Designs of the Dwellr Apllication.
The designs and prototypes that follow are revisions and edits that I was able to complete on my own following the end of our contract with the client.
Following Usability Studies of the Initial Prototype, my main focus for improving the design were the following:

1. Restore Color and Personality

Our client had requested that we stick solely to a greyscale design to give the app a modern design. I felt we missed the opportunity to give the design a unique personality, echoed by one user who noted that it felt as if the app had prioritized modernity at the expense of comfort. Through the use of rounded fonts and icons, alongside calming and guiding colors, I hoped to instill a sense of coziness to coincide with the house-buying experience.

2. Reduce Overwhelming Text and Designs

In the initial prototype, there were a few extremely text-heavy screens. Users indicated that suddenly being presented with such large amounts of text was overwhelming. For the final design, I aimed to reduce the visual burden of content and condense text without losing any information vital to the experience.

3. Increase Overall Cohesiveness

Our client assigned different screens and features that historically have been shown to disrupt the user flow and confuse the user. There were many points in the design process where we sacrificed the user’s needs to agree with the client. For the redesign, I aimed to simplify the path users would take and spent more time refining each screen.

Solutions

Updated User Pathway

The updated user pathway gives users full control over how they want to enter into the home buying/selling experience. I aimed to make the process streamlined and linear to allow the user to move from seeing an attractive property to speaking with a realtor as quickly as possible.

High Fidelity User-Flow

The Final User Flow of the app focused on providing a streamlined path for users to reach the intended goal of finding a home and connecting with a realtor, while also providing full control over the path they took to reach that goal.
High-Fidelity Prototype showcasing the Dweller Mobile Application.

High Fidelity Prototype

Drawing from both Usability Studies and Secondary Research, the main goals for the high-fidelity prototype were to increase cohesiveness, give users a sense of comfort through design choices, and present an engaging search experience.

Access the full prototype here.

Impact

Intended Contribution

Our goal is that this application empowers users who might feel overwhelmed about buying a house to feel confident in their decisions. We hope that this application creates a memorable and enjoyable experience for all users that alleviates the stress of finding a new home.

Reflection

Lessons Learned

1. Communication is Key

Throughout the initial design process, there were a few instances in which miscommunication led to designs having to be reworked, or scrapped completely. Ensuring that everyone on the team, as well as the client, were on the same page before taking the next steps is essential for efficiency.

2. Working with a Client

This was our team's first time working with an external client. One of the most important takeaways I took from this project was how to communicate my expertise while still respecting the wishes of the client when conflicting views arose. Being able to have these sometimes difficult conversations was vital in creating a successful design.

3. Managing a Team

Through managing a team of 5 designers, I learned how to adapt an independent design process into one that is collaborative and allows each member the opportunity to learn and grow from each other. The insight and skills I learned from my team were invaluable, and I learned how to combine everyone's unique design style into a cohesive design for our client.
High-Fidelity Mobile Designs of the Dweller Speaking with a Realtor User Flow.

Next Steps

1. Conduct Further User Testing

To further refine and heighten the user experience, I would like to continue user testing, specifically with our target audience of individuals looking to buy new homes. This would involve meeting with realtors for their insight as well as surveying home-buyers at open houses and similar events.

2. Continue to Address Accessibility Concerns

To make the app accessible to even more users I would like to continue adding features that made the app compatible with assistive technologies such as screen readers.

3. Further Develop Property Selling Aspects

While the app currently focuses on the property-buying experience, I would like to add features that guide users through the process of selling a property, such as automatically suggesting nearby realtors or guides on how to price your property.

Other Projects

Web Design
AMFB Redesign
UX Design
Dwellr

Let's Work Together!

Whether you would like to work together on an idea or concept you have, or simply have questions about any of the projects I currently have listed on the website, let's get connected!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Jalen Gooch Portfolio Logo

Jalen Gooch is a recent UC Berkeley graduate with a passion for utilizing UX and Graphic Design to connect people together and return the human spirit to design.

DoorDash Health Center
AMFB Redesign
Dwellr