Sweet | Jg Portfolio

Sweet
an online bakery

Project Overview

Sweet is an online bakery that offers delivery options. The typical user is between 21 and 70 years old and likes the convenience of online ordering and delivery. Sweet is a bakery that is visually appealing and easy to use. Users do not always want to go to a bakery. Sometimes users want the convenience of ordering online and getting their desserts delivered.

The goal is to design a website for a bakery that is easy to use and visually appealing that will offer users opportunities to get their favorite desserts online with the option of delivery.

My role was to design a responsive website from conception to delivery. My responsibilities included conducting interviews, paper and digital wireframing, low and high- fidelity prototyping, accounting for accessibility, conducting usability studies, iterating on designs, determining information architecture, and responsive design.

Design Process

Empathize

Define

Ideate

Prototype

Test

Personas

I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users would like more convenience from their favorite local bakeries. For example, they want to be able to order online and pick up at a later time or order online and have the desserts delivered to them. Users want an experience that is easy to use and offers convenience from their home.

Heather

Problem statement: Heather is a busy mom who needs an easy to use online bakery with delivery because she wants to be able to order her desserts online and have them delivered.

Age: 35

Education: Nursing School

Hometown: Tampa, FL

Family: Husband, 2 kids

Occupation: Nurse

“It’s a shame that most bakeries don’t offer a great online experience and can deliver”

Goals

•A great local bakery that will deliver

•A bakery website that will be easy to use

Frustrations

• I don’t want to go to a bakery website to just look at food, I actually want to order it and have it delivered.

•Why are there like 100 items to choose from-too many.

User journey map

I created a user journey map of Heather’s experience using the site to help identify possible pain points and improvement opportunities.

Sitemap

Difficulty with navigation was a primary pain point for users so I used that knowledge to create a site map. My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.

Paper wireframes

Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind. Because customers access website on different devices, I worked on designs for a cellphone and mobile size, with the goal of making sure the site was fully responsive.

Digital wireframes

Moving from paper to digital wireframes made it wasy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing simplicty of use and appeaing visual elements were a key part of my strategy.

mobile app deign

mobile app design

desktop design

desktop design

Delivery option available

Less items, bigger pictures with descriptions

Low-fidelity prototype

Usability Study

Parameters:

Study type: Unmoderated usability study

Location: remote

Participants: 5 participants

Length: 10 minutes

Findings: Users wanted to be able to go back between pages, so we need to make sure there is a back button on the pages so that they are easier to navigate

Users wanted a confirmation page, so we need to make sure that we create a confirmation page after users click on the pay screen.

We need to rework the user flow on the cart page so it is easier to understand.

Mockups

High-fidelity prototype

The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.

Accessibility considerations: I used headings with different sized text for clear visual hierarchy,I used landmarks to help users navigate the site, including users who rely on assistive technologies, I designed the site with alt text availabe for smooth screen reader access.

Impact:

Our target users shared that the design was easy to use and navigate, appealing to look at, and filled the delivery need

What I learned:

I learned that evena small design change can have a huge impact on the user expereicne. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.

Next steps:

Conduct follow-up usability testing on the new website

Identify any additional areas of need and ideate on new features