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.
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.
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:
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.