FLAKY

Mockup view of the Flaky website, with the homepage on a laptop

Laptop psd created by rawpixel.com

Flaky. is a responsive website designed for a hypothetical French bakery in Santa Monica, CA. This was a sample project conducted for my Google UX Design Specialization certificate, for which I served both as a UX researcher and designer. The goal was to create a responsive website for both desktop and mobile screens which allowed customers to order products from a bakery.

Target audience
LA-based pastry enthusiasts

Project duration
1 week (2022)

Design tool
Adobe XD

MOODBOARD

mooboard for the bakery website Flaky

Images sources: Unsplash and Dribbble

INTERVIEWS & PERSONAS

I began by conducting interviews of three bakery customers to identify their pain points and elaborated empathy maps accordingly.  Based on the interviews I conducted, I developed three different personas: Andrew, Nick, and Karina. 

IDEATION PROCESS

To start off the ideation process, I used the Crazy Eights technique. Even though the basic layout of the front page did not vary drastically from one option to the next, the way products were categorized could drastically vary. Then, thinking about information architecture, I elaborated a site map following a hierarchical structure.

Architecture of the Flaky website

WIREFRAMES & LO-FI PROTOTYPE

Using Adobe XD, I conceived each wireframe for both desktop and mobile screens, keeping in mind responsive design. It was important for me to leave a lot of breathing room in my design to allow users to not feel overwhelmed by the product options.

Home page | Desktop version

Home page  | Mobile version

USABILITY STUDY

I conducted a usability study using the low-fi prototype, asking three different potential customers to navigate the site to order a baked good. Here are some quotes from them and below the insights that I came up with.

UPDATED WIREFRAMES & LO-FI PROTOTYPE

Home page | Desktop version

Home page | Mobile version

Following the insights gained from my usability study, I adapted my wireframes and lo-fi prototype to make the user flow smoother and the experience more beneficial to both first-time users and experienced customers.

Mockup view of the Flaky product page on a mobile

Mobile mockup psd created by syifa5610 

HI-FI PROTOTYPE


When ready to add color, typography, and iconography to my prototype, I chose a minimalist aesthetic with sans serif fonts and earth-toned colors. I kept the arched frame of the photos to give the sense of a shop window and contribute to make the brand identity stand out. There are several ways for the user to enter the flow.

Between the "Surprise me" button, the suggested pairing of products, and the reviews, I tried to implement several ways for customers to feel comfortable exploring new baked goods. For accessibility, I made sure to stick to high-contrast colors (ratio of 4.96), labeled all the sections clearly, and avoided overcrowding. 

The full prototype can be accessed here (desktop) and here (mobile).

Home page  | Desktop version

Home page | Mobile version

Shop page | Desktop version

Shop page | Mobile version

Product page | Desktop version

Product page | Mobile version

SUMMARY & NEXT STEPS


This first responsive design taught me a lot in terms of adaptability--how essential it is, but also how time consuming it can be. Whether consciously or not, we as users adapt to the size of our screens but also to the tools used to interact with them (screen readers, mouse, touchpad, touch, etc.). 

Next steps would be to develop the user account, with all its possible avenues for customization. And finding an actual bakery!