Introduction

Au Lait is a mobile app that helps people find the cafes with the amenities and ambiance that they seek. It provides tailored results and real-time traffic at cafes, giving users satisfaction from app to IRL.

Notably, this app features my UX design process.

Too curious? Jump to my prototype

  • Project Type: Case Study
  • My Role: UX/UI Designer
  • Tools: Figma, InVision
  • Platform: Android
  • Duration: 10 weeks

My Role

As the sole end-to-end designer of this project, I had the opportunity to bring the app from problem space to prototype:

  • User Research
  • Ideation and Strategy
  • UI Design
  • Usability Testing
  • Prototyping
  • Branding and Illustation

How might we connect young adults to the ambiance and amenities that they are seek at a specialty café?

Problem Space

I decided to pay attention on the future of the coffee industry --young adults. I acknowledged that young adults have been interested in sustainability and supporting local businesses. Thus, I decided to focus on specialty cafés defined as cafés of of 3 chains or less.

Hypothesis

I believe that creating a platform focused solely on finding cafés for young adults will achieve higher satisfaction from users on this platform versus others (Yelp, Google Maps, etc.) since they will be able to find tailored information and results.

Conducting Research

Secondary Research

I took a look at the current state of the coffee industry in both its market size and demographics. I chose to do this in order to see in what ways my design could help both users and the industry.

Primary Research

I conducted 4 interviews and 17 surveys of young adults who went to specialty cafés at least twice monthly in order to understand the behaviors, motivations, and pain points of visiting a café.

Affinity Mapping

After interviewing users, I used sticky notes to jot down significant thoughts or quotes from 4 interviewees. The result was an affinity map that showed that the amenities and ambiance needed by the user was a pain point that needed the most addressing.

Persona

In order to guide the application creation process, I created a fictional user to keep their wants and needs in mind. My synthesized user was Shivani Patel, a 20 year old student who is looking for a café to study at.

Task Flow

Sketching and Wireframing

Intentionally translating user needs into solution-focused design

Initial Sketches

I threw together a few sketches of how I thought the app would function. This was one of the earliest iterations of my designs, which underwent some user testing before reaching the final mid-fi prototype below.

Mid-Fidelity Prototype

Translating sketches into wireframes helped me focus on what would be the best solution for the user. A few key thoughts that I kept in mind during this phase were: 

  • What is the benefit of each screen? It was vital to remember the base purpose of the application and not add auxiliary features or filters that were not central to the task flow.
  • How does the visual hierarchy effect the user experience? This was especially challenging as I needed to make a large amount of information bite-sized to the user.
  • What information is necessary? The information and location pages narrowed down what is vital for the user using formatting, information hierarchy and typography.

User Testing

A key phase when ideas are grinded down and re-brewed

High-Fidelity Prototype

Putting everything together to make the final brew

View Figma Prototype

How might users onboard and set intention?

Key design decisions:

  • Introduction - an initial onboarding screen introduces the user to the application and assures its purpose at first glance. A nice, warm welcome!
  • Filter prompt - suggests the main reason for the application, to find the perfect match. This also gives users the option to skip and be shown nearby or sponsored cafes.

How might users identify their wants and needs?

Key design decisions:

  • Four filter pages - in order to not make these steps overwhelming or tedious to the user, I decided to divide this step into 4 pages or categories.
  • Interactive illustrations- a fun, lighthearted way to keep the user both interested and assured. Each decision by the user prompts an object to show to represent their choice.

How might users be presented their options?

Key design decisions:

  • Varied card layouts (static and carousel) - this took me multiple iterations to get just right. A brief description of each:
  • Best matches (exactly what the user is looking for) - large, static cards
  • Similar matches (categorized) - medium cards, carousel format
  • Sponsored results (advertisements)- small cards, carousel format
  • See all - available when carousels aren't their preferred method
  • Search option - the handy-dandy search option, always there as a backup or for quick access

How might users skim through information without feeling overwhelmed?

Key design decisions:

  • Establishing clean hierarchy - information was divvied into bite-sized chunks so that the user can quickly find what they're looking for
  • Live traffic estimates - a main feature of the app to show how busy the café is and what would likely be available. A counter is displayed for seats, outlets, and other.
  • Searching reviews or using tags - allows users to simply type "parking" or tap the "latte art" tag for easy results (both very different but equally important)
  • A separate location page - to display even more detailed information about parking options and peak hours. This also includes a larger map that loads the user's default navigation app on tap.

Branding and Visual Identity

Modernizing the classic idea of simply getting a coffee -- through shape and color!

Key Intentions

After defining my key intentions, a moodboard was created to set the tone of the brand and its evoked feeling and emotions. The result was calm and naturalistic with moving, warm hues.

View InVision Moodboard

Color Palette

Determining a palette was a complex task, as I extracted significant colors from my mood board. The palette used the 60-30-10 rule, which dedicated a dominant neutral, secondary complementary, and a less frequently used accent color.

Brand Name, Wordmark, and Icon

I wanted to find a name that was familiar, intentional, and easily understood. I ultimately decided on "Au Lait", or "with milk" in French. I liked the fact that milk is a supportive addition to coffee and not the main feature itself - just like the application. I decided on a thick, modern-retro serif font with playful accents. Coffee beans were added to the swashes for a playful touch.

Key Lessons and Next Steps

A quick look back and a fresh look forward

Respecting the value of connecting "why" and user research

These are a few my key takeaways from this caffeine-fueled journey:

  • Proper synthesis of both research and interviews are key to creating the most optimal design solution
  • User testing generates powerful insight to how design changes can shape interactions
  • Visual identity is a dynamic asset to shaping the direction and intentions of an application

Approaching design for the real world

It's quite easy to get carried away with designing a passion project. However, it's necessary to stay grounded and consider implementation and metrics.

A few next steps to ponder:

  • Connecting with a developer to see if this project is viable in real life
  • Learning more about the process and channels of monetization
  • Narrowing down metrics and activity that would quantify success or failure