GWEN'S BAKERY: GOOGLE UX DESIGN CERTIFICATE PROJECT

UI Design                  Prototyping                  User  Research                  User Experience Design

OVERVIEW

This project was a personal project of mine, I had always wanted to complete the Google UX Design certificate to help improve my UX skills, and part of completing the certificate was to design an app using a generated brief.

The brief that was randomly generated for me was:

"To design a delivery app for a local bakery"

I took this brief and expanded on it as explained below. I was the sole person working on this project, so did everything from user research, through to app design and prototyping.

This project had a bigger emphasis on the process, than the final outcome, so due to time constraints, I didn't get to develop the app as far as I had originally wanted to.

TIME FRAME:

2 Weeks

To design a delivery app for a local bakery.

The pandemic was hard on local businesses with many turning to online alternatives. A local bakery is trying to regain customers by offering an online delivery service after many stopped coming into the store. They required an ordering and delivery app for a local bakery that makes bread, pastries, and has some simple groceries such as milk and eggs.

ACCOUNT CREATION

Users can log in, sign up, or dive straight into browsing the menu from the home screen, showcasing the app's unique colours and illustrations.

DETAILS AT A GLANCE

The bakery's complete menu is showcased, but made easy to explore through a series of filters, recommendations and quick add functionality.

BEHIND THE SCENES

Customer loyalty becomes stronger if the bakery seems more personable, this is achieved through behind the scenes information about the bakery and the bakers.

EASY CHECK OUT

To speed up the checking out process, a simple, consistent and known structure is used.

ORDER TRACKING

Confirmation is key, users are made aware they've successfully ordered, and are taken along the journey every step of the way.

USER RESEARCH

To help get a better understanding of what customers may want from a bakery app, and what their current issues are with similar services, I conducted a series of initial user interviews. To find participants, I spoke to friends and family who frequent the bakery that is near my house about what their experiences were. A series of open ended questions revolving around their visits to the bakery, and what their goals are were asked.

The interviews were recorded, transcribed, and then analysed to group similar points, the most common points were translated into the main pain points shown below.

TIME CONSTRAINTS

Everyone nowadays has a very busy schedule, finding time to visit the bakery regularly for fresh bread is often tricky, and low priority.

TASTE

Turning to supermarket alternatives are often bland in taste, and don’t compare in quality to the bakery.

VARIETY

Bakeries offer a wide range of types of bread, pastries etc, but customers often don’t try all the different types. 

KNOWLEDGE

A lot of people enjoy baking, but lack the same knowledge or tips the bakers do, so don’t understand the difference between loafs.

The groups above helped form the basis of the empathy mapping by matching pain points with appropriate personas.

This led to the development of two distinct user personas, each which highlight various different issues experienced.

The next step was to take forward each of these personas, and curate their personal user journey to fully understand what their interactions are with a bakery, and to highlight exactly where their pitfalls are so it's possible to create a solution for where the problems are actually located.

Using the user journey, ideation began around trying to solve the pain points highlighted in the journey. This allowed for a rough idea to be created about how the app could help solve the problem, but not any specifics such as wireframes etc. Taking this forward allowed me to create a User flow, as shown below, which lays out the app layout, and how the pages of the app are interconnected. It curates a journey through the app which helps at the wireframing stage, as I can ideate on and wireframe at each specific stage of this flow.

WIREFRAMING

The ideation and wireframing process began with initial idea wireframes sketched out on paper, moving up to digital wireframes, and finally to the high-fidelity prototype. This wireframing process is shown below. Beginning with paper ensured that lots of ideas could be sketched out quickly, without any time or resource commitment to an individual idea.

Once the initial wireframes were developed and iterated on, version 1 of a low fidelity prototype was built. This was done digitally on figma, but only using very basic elements without any styling.

This was also turned into a prototype, the prototype can be viewed here, or using the embedded section below.

Using the above prototype, I conducted a series of user tests with the same people I initially interviewed. These tests ran through the prototype above, by asking the users to perform a simple task, this included "Please find an item and add it to your basket, then checkout". I'd monitor how the users performed with the test, and asked them a series of questions afterwards around their experience and any issues they ran into.

The results of these tests found several issues, the most commonly occuring issues were gathered through a card sorting exercise, and the top 5 chosen, these issues are explained below.

• Quick add needed on the home page, as currently user has to go into each item
• The home menu is not clear enough due to cluttered look
• Log in needed on the home page, as currently user can only sign up
• The location of recommendations were not clear, once asked to find them, users wouldn't navigate to them easily.
• Clearer confirmation needed, currently the user is unsure if things have been added successfully.

Taking forward these comments allowed for a second round of wireframing, this stage was focused on fixing the above issues.

IMPROVEMENTS

The first change was adding an option to log in. This is a feature which is useful if the user already has an account.

The second change was adding in a series of tags to each individual item to help differentiate items, and it allows users to search for items in a single tag, e.g. Sweet. This helps users find items if they're unsure exactly what they want but know the type of thing they're after.

A quick add option was added to all items, this allows users to add this item to their basket in one press, without the need for actually going into the item. This change was also replicated across the home page.

This was then prototyped once again, and went through another round of user testing focusing on the previous issues, and if they still persisted. The user testing showed that the previously found issues had been solved. I would have liked to have used this testing round to discover further issues, but unfortunately several participants could not schedule as much time as I had wanted.

DESIGN SYSTEM

Establishing a small design system before developing the high-fidelity prototype was important to ensure that the design would be created consistently, and that no errors would occur around colours/type.

HIGH-FIDELITY PROTOTYPE

Version one of the high-fidelity is shown above. This version was prototyped and went through one more round of user testing with the same participants. The same card sorting exercise was done to establish the most common complaints, which were:

• Users might not have wanted to sign up to just browse, so a skip button is needed on the first screen to go straight into the menu.
• Quick press filters were added to the home page, so the most common/main filters can be pressed with one press rather than having to open the filters, then select them, to speed up time.
• Background opacity seemed too high, this needs to be lowered.
• Specific notes/comments section needed for deliveries.
• Some navigation changes as to where the back buttons were.

These problems were turned into changes and were acted on, then added into the design. The final app design is shown below, with all of the mocked up screens.

KEY TAKEAWAYS/LEARNINGS

DESIGN SYSTEM IMPORTANCE

Establishing a design system before starting the final designs made the process a lot easier, being able to simply combine the approved wireframes with these branding rules created a quick and effective building method.

USER TESTING SCRIPTS

Running user testing sessions with a script was much more effective than running one without a script, it allowed the sessions to run smoother, and more value was found. This is something I will prepare before every user testing session.

DOCUMENTATION

During the user testing, I became slightly complacent with writing everything down, and documenting the changes. This was easier in the moment, but meant coming back to the project later on was difficult, and I had to waste time joining the dots. Going forward, I now know the importance of note taking properly.