top of page
0_N_BANNER_Mesa de trabajo 1.png

ROLE

UX/UI Designer (individual project)

DURATION

January - February, 2023

(3 weeks)

TOOLS

Adobe XD, Illustrator, Photoshop

SUMMARY

Oven Lovin is a responsive website design for a fictional local bakery, inspired by an 80s aesthetic. There was a design opportunity to create a website that allows the business to organize the orders of the day and, at its time, users can reserve food without worrying that the venture will run out of stock by the time they arrive at the bakery.

PROBLEM

To remain successful and expand in other areas, Oven Lovin´ needs a website that can handle all organization and sales aspects of the bakery.

 

Bakery customers´ users also would like users would like to be able to reserve food to ensure that the bakery has stock available of what they want.

GOAL

Design an easy-to-navigate website that allows customers to purchase food from the bakery's limited daily stock while also helping the business organize their orders and sales automatically.

1
Investigation

profile1-03.png

PRIMARY USER

Jamie is a chemist and mother who needs a way to purchase sweets from Oven Lovin because she wants to support this local business but is unable to do so because there isn't stock by the time she makes it to the bakery.

perfil2-03.png

SECONDARY USER

John is the owner of Oven Lovin' who spends the day between the kitchen and the cash register, so he needs a new method to be able to measure the amount of food he has to make to take advantage of raw material and satisfy everyone. the clients.

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was adults who regularly purchase food from the bakery but, more often than not, can't find stock of what they want.

 

This user group confirmed initial assumptions about bakery customers, but research also revealed that as well as a possibility to pick up or deliver their order,  if users can´t buy something from the bakery (when they're out of stock or closed), they would like to have some recipes that the business recommends; this would create a new relationship between the bakery and their customers.

The main pain points that the design will address are:

STOCK

Users want a way to purchase food from their local bakery, Oven Lovin´, without worrying about running out of stock.

PICK UP / DELIVERY

Users need a way to receive their order, either through a pickup option or delivery.

RECIPES

Users, as locals, want a closer relationship with the bakery through “bakery-approved” recipes to make in case they're out of stock or closed.

2
Design process

INFORMATION ARCHITECTURE

My goal here was to make strategic information architecture decisions that would improve the overall navigation of the website. The structure I chose was a hierarchical model, designed to make things simple and easy.

user flow y sitemap_Mesa de trabajo 1 copia.png

USER FLOW

I built a user flow of a basic trip from start to finish when buying something from the bakery. This tool allows you to understand how users can interact with the website.

user flow and sitemap_Work table 1.png
IMG_20230611_135059898.jpg

PAPER WIREFRAMES

Next, I drew wireframes on paper for the home page of the website, keeping in mind the user navigation.

The home screen paper wireframe variations on the left are focused on optimizing the user experience.

PAPER WIREFRAMES: SCREEN VARIATIONS

Because the bakery's customers access the site on a variety of different devices, I began working on layouts for additional screen sizes and creating a responsive design.

IMG_20230611_135111271.jpg

DIGITAL WIREFRAMES

Moving from paper to digital wireframes made it easier to understand how to design a consistent flow for users. Prioritizing button placement and incorporating visual elements were key parts of the process.

Here users can find all the foods available in the bakery.

Homepage.png

In this section, users can find some bakery-approved recipes to make at home and impress other people.

LOW-FIDELITY PROTOTYPE

9_Low fidelity prototype.gif

Here is the lo-fi prototype for the desktop version.

USABILITY STUDY

I performed two rounds of usability studies. Findings from the first study helped guide designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refinement.

ROUND #1

1. Users need a clearer path to follow, specifically more obvious buttons to press that will take them to where they want.

ROUND #2

1. During checkout, there was no clear way for users to log into their accounts to pre-fill previous billing and shipping information.

3
Final design

MOCKUPS / HIGH-FIDELITY PROTOTYPES

PAYMENT

Based on the feedback from the usability studies, I rearranged the payment page so that the users can see the information on a single page without scrolling, which happened in the prototype and was pointed out by several users.

high fidelity checkout ‐ Made with Clipchamp.gif

Before the usability study.

After the usability study.

Untitled Video ‐ Made with Clipchamp.gif

PROFILE / SIGN IN

As for the profile pain point, I added a sign-in page before continuing with the checkout, so that the information on the purchase can be sent to an email address.

checkout process ‐ Hecho con Clipchamp.gif

Sequence after the usability study.

hifi prototype.png

HIGH-FIDELITY PROTOTYPE: DESKTOP

The request to follow on the website is to buy a croissant.

Here the hi-fi prototype is found (desktop version)

HI-FI PROTOTYPE: MOBILE

Like the desktop version, the high-fidelity prototype for the mobile website followed the same user flow.

Here is the hi-fi prototype (mobile version)

mobile hifi prototype.png

STYLE GUIDE

The combination of vivid colors to create Oven Lovin''s signature palette arose from visual elements associated with an 80's aesthetic. The welcome screen feels warm and eclectic enough to entice the user to continue exploring.

style guide.png

ACCESSIBILITY CONSIDERATIONS

1

I used headings with different-sized text for a clear visual hierarchy

2

I designed the site with alt text available on each page for smooth screen reader access.

3

I used minimal iconography in some steps to help all users have a better understanding of the design.

4
Conclusions

IMPACT

The target users shared that the design was intuitive to navigate through, more engaging with the images, demonstrated a clear visual hierarchy, and was visually pleasing.

LEARNING

While designing the bakery website, I learned how to build a website from scratch, from wireframes to an actual working prototype, with my first experience with Adobe XD. To me, the most important thing is to always focus on the real needs of the user when generating design ideas and solutions. Usability studies and feedback received influenced each iteration of the app designs.

IN THE FUTURE...

The next step would be to perform another round of usability studies to validate whether the pain points experienced by users have been effectively addressed, as well as to find out if the design is viable in terms of programming.

bottom of page