Menu
R O L E S & R E S P O N S I B I L I T I E S
UX Research – User Personas, Customer Journey Maps, Competitor Audits & Market Research.
Design Thinking & Planning – Design Sprints & Brainstorming (with accessibility front and centre).
Mobile App UX Design (Low Fidelity) – Paper Wireframes & Prototypes, Digital Wireframes & Prototypes.
Mobile App UX Design (High Fidelity) – Visual & Interaction Designs.
Mobile App Usability Testing – Planning & Executing Usability Studies, Data Collection, Organisation, Pattern Identification & Data Synthesis to gather actionable Insights.
Finally – Design Iterations Based on Usability Study Findings.
T H E P R O B L E M
Newtra Bakery is in the valleys of Wales and has served its customers in the surrounding area for decades. Pre-pandemic the bakery had a small shop area where it’s customers could order their food and wait for it to be prepared in the store. Post pandemic restrictions mean customers must wait outside in line for their food.
U N D E R S T A N D I N G T H E U S E R (E M P A T H I S E )
I conducted user research to figure out potential users and use cases for the bakery. I conducted interviews with customers and staff at the local bakery, which is in Blackwood, Wales (UK).
After interviews and extensive research, it became apparent from the findings that the business was losing customers due to its lack of shelter from the Welsh weather. This was the main pain point of the business and its customers.
To better understand the potential user, personas were synthesised (pictured right), and user journey maps were created (pictured below).
T H E S O L U T I O N
There were multiple findings from the research I carried out, and multiple customer pain points were revealed. With these at the forefront of my mind, I brainstormed ideas to potential solutions.
Following UX research, it became clear that creating an app that the bakeries’ customers could use to order food from the comfort of their own home could help solve a big problem for the business. Customers would no longer have to order from the bakery and wait outside with no shelter from the British weather.
I designed a User Flow of screens and drafted the apps Information Architecture (IA).
P A P E R W I R E F R A M E S
To begin the designs, I created paper wireframes to quickly record any ideas down, that popped into my head. Limiting each layout idea to two minutes each, I created five screen variations, then highlighted my favourite parts from each screen with a star (*).
Shown to the left are five iterations of the home screen.
The sixth variation I drafted was a mixture of my favourite elements, combined into the final paper draft.
I repeated this method; five ideas into a combined final wireframe(draft), for all screens in the user flow.
D I G I T A L W I R E F R A M E S
As the initial design phase continued, I made sure to base screen designs on feedback and findings from user research.
Menu revealing easy access to all categories.
The image shows the select checkbox being checked to select an item.
Once items are selected, the option to checkout only the selected items are revealed.
L O W – F I D E L I T Y P R O T O T Y P E
I created a low-fidelity prototype of the app in preparation for usability studies.
View the Newtra Bakery low-fidelity prototype.
U S A B I L I T Y S T U D I E S
I conducted two rounds of usability studies for the app. Findings from the first study helped guide the designs from wireframes to mock-ups. The second study used a high-fidelity prototype and revealed what aspects of the mock-ups needed refining.
Studies were conducted and the information was collected and grouped into themes. I used an affinity diagram to visualise these themes. I then synthesised common themes into actionable insights.
Insights were prioritised accordingly ready for further design iterations.
The second usability study highlighted the need to provide feedback to the user once an item had been been added to the cart.
As you can see in the image, a success pop-up was added to the design to inform the user that a button that they tapped successfully added an item to their cart.
Following a usability study, a section was added to the delivery address screen.
The new addition to the screen enabled users to check what address was stored in their account, and whether the delivery address was the same as their billing address.
H I G H – F I D E L I T Y M O C K – U P S
The images below show the main screens and user interface of the bakery app in high fidelity.
H I G H – F I D E L I T Y P R O T O T Y P E
I created an interactive prototype for the mock-up app screens, which were used in further usability studies.
The image below shows all screens, modals, and menus that were created for the app, and the connections between each. These connections show the possible steps a user would take to complete the main user flow.
Try out the prototype!
A C C E S S I B I L I T Y C O N S I D E R A T I O N S
During research, design, and testing of the app, I consistently tested and considered accessibility, incorporating findings from user research into the design iterations. I wanted to make the app as accessible to as many customers as possible.
I added the option for users to use an in-app screen reader for accessibility purposes.
Research carried out indicated that this would be a helpful feature for many people and users of all abilities.
The well-known hamburger icon was discovered to be not so well-known during usability tests.
To make the icon known to users I added a visible label under the icon to help users identify the use of the icon in the designs. Although it is generally assumed that users understand what the icon is used for in mobile apps, my studies indicated that there were still users that were unsure.
K E Y T A K E A W A Y S
The app makes users feel like Newtra Bakery really cares about their users’ needs.
“The app looks really appealing and light-hearted. In fact, I suddenly fancy some donuts.”
One quote from peer feedback.
While designing the Newtra Bakery app, I learned that It is much more important to design based on user feedback and not our own assumptions. I found some surprising insights during usability testing.
The most effective way to improve a product is through usability testing.