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


mooboard for the bakery website Flaky

Images sources: Unsplash and Dribbble


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.


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


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


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.

  • Clearly indicate on the front page the location of the bakery and its delivery radius. (P0)

  • Change the "Surprise me" button on the home page for "Our story" to allow first-time visitors to better understand the brand. Keep the "Surprise me" button in the shop. (P1)

  • Increase the size of the images in the shop. (P1)

  • Add the option to register dietary restrictions in the account settings. (P2)


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


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


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!