Zymo is a web based bakery management system that was created to help artisan bakeries run efficiently.
Product:
Responsive website
Duration:
10 weeks part time
Tools:
Figma, Canva,
Role:
Project Research & Design
Background:
Zymo is a B2B web based bakery management system that was created to help artisan bakeries run more efficiently. Zymo provides wholesale order management, daily baking & production schedules, recipes & nutritional information, reporting and integration with third-party services such as Xero and Shopify to a number of bakeries across the United Kingdom. I reached out to Zymo’s buisness owner and offered to redesign the site to improve it’s functionality and the overall user experience.
The Problem:
The Zymo platform is difficult to use across different devices due to current design not being responsive and there is room for various tweaks to improve the usability of the platform and make the design sleeker and more cohesive.
The Solution:
To redesign the platform, making it responsive across various device sizes and implementing consistent design patterns across the platform, making the cognitive load less strenuous for the user.
My Process
1. Research
Objective
Scope
Competitive Analysis & Industry Research
Constraints
User Research
2. Define
Affinity Mapping
User Personas
Sitemap
Task flows & User flows
3. Design
Low fidelity wireframes
Mid fidelity wireframes
Style card & Component library
High fidelity wireframes
4. Test
Usability Testing
Test findings & Prioritisation
Iterations
1. Research
Project Objectives:
The primary objectives were to redesign Zymo to make the product more aesthetically pleasing and more intuitive/user friendly and to make the website responsive, making it easier to use across various devices.
When I took on the project Zymo had no definitive style or branding. With it being an information heavy website the redesign aimed to be clean and look more fresh and modern.
Scope:
I initially intended on redesigning 4/5 pages for the website, but I ended up redesigning 7 pages as so much of this website is interconnected and leaving some of the pages would have left the website feeling disjointed. I will also continue to work with the business in the coming future to complete the full redesign of the platform. The aim of the project was to ensure the website is responsive so that it is accessible from multiple devices. This consideration was at the forefront of any design decisions being made. As Zymo is an existing product that was designed mainly for desktop use a change to mobile-first design is going to be necessary to ensure the users are able to use the website from any device as they do not always have a desktop/laptop device available and navigating the current website on a smaller screen is frustrating and tedious.
Competitive Analysis & Industry Research:
Competitor Analysis
There is not a similarly sized competitor that we are aware of. Cybake, a company based across America, Europe and Australia, does pretty much the same thing as Zymo but it is aimed at larger companies with more detailed information and in depth features, additionally their pricing is most likely out of range for the small artisan bakeries that are currently using Zymo.
The artisan bakeries who are now using Zymo have historically been using spreadsheets to manage their production and recipes.
As Zymo was originally built for one specific bakery it was a very niche product which has slowly been developed to what it is today and was subsequently made available to other bakeries across the UK over the past few years.
Secondary Research
The bakery industry in the UK is very competitive, there is a large coffee shop and artisan food culture which drives alot of micro bakeries, pop ups and artisan food stores.
The audience for this product are the bakeries producing artisan produce and their customer base (both wholesale and individual online sales).
Zymo has such great potential to be used by other bakeries, it is currently only used by about 12 bakeries and I think by making it more user friendly we will be able to attract more customers.
Provisional User Personas
Management - Interested in the reporting, checking weekly/monthly sales and orders, ingredient forecasts and sales forecasts, ingredient costs
Customer Service - Setting up orders and maintaining orders/changes to customer information
Bakers - Interested in production schedules, recipes, nutritional information, weigh up lists, ingredient forecasts, ingredient costs
Delivery team - Managing delivery routes, Packing slips, delivery notes,
Customers - Interested in setting up and maintaining account information, orders and accessing nutritional information for products being ordered
User Research:
Research method
I contacted 5 current bakery end users of Zymo to discuss their experience of using the product and observe how they interact with the product. Compiled a discussion guide and list of 17 questions to ask all participants.
I compiled a survey and unmoderated test to be completed by customer end users and sent it out to various customers to understand how they interact with the product and what their experience using the product is.
I used the 2 different approaches for the different users as the users have very different levels of interaction with the product. Bakery end users can utilise the platform more and use it for production management, recipe and nutrition management, order management, delivery management etc. Customer end users can only log in and amend their orders through the platform.
Common Observations:
Users usually access Zymo either from a bakery or from a desktop in an office type environment
Users log in from a favourited page/bookmark
The features being used most regularly when logging in are wholesale order management and daily production overviews.
Weekly production is used by the majority of users to plan weekly production in addition to daily production.
Users navigate to their production view from the calendar on landing pages.
3 out of 5 users utilise order limit functionality on wholesale orders.
Users access orders and recipes through menu navigation
Users think Zymo is easy to use and has great functionality linking to Xero and allowing customers to edit their own orders.
Common pain points
Most users access Zymo from desktop as it is easier to use on a desktop/laptop - too difficult from mobile
On tablet - Buttons are small and getting the right button on the calendar is tricky.
Zymo doesn't show when the prices were updated in the product list view.
Can’t see which customer logins are being used or are inactive
Setting up a new contact for each person in a business is frustrating. It would be easier if they could open up a new client page and be able to edit all contacts in there from one page rather than do a separate contact and link to the client.
Sometimes on the weigh up tickets the order of the ingredients changes - can they be done alphabetically.
Common needs:
Customer access to report delivery discrepancies/missing items
Allergen matrix that can be generated by customers for the products they order or for items selected in a report.
In Daily production view it would be nice if each section scrolled across the screen in unison.
A function where the delivery team can obtain confirmation of delivery by the customer? Maybe scan a qr code or get a digital signature.
Would be great to have the ability to change the standing order for a future date rather than with immediate effect based on lead time.
I found the process of synthesising the information gained during the interview process very insightful. While I had a disappointing number of responses to the customer end user research requests (which I can understand as they aren’t as heavily invested in the use of Zymo as the bakery end users are) I was thrilled with how many bakery end users were eager to jump on a call and discuss their experiences with the product and what they found useful and what they thought could be improved. If I had more time and more access to customer end users I would love to be able to understand their experience of using Zymo and see how that could be improved.
As I was familiar with Zymo from my years of working in a bakery that used it, I had a thorough understanding of the product’s functionality and capabilities. During user research I had to practice listening rather than commiserating and also be aware of any cognitive biases I may have based on my experience of using the product. It was great to understand the needs and frustrations of the various stakeholders and also to understand how different businesses had differing hopes and wants for any future feature development.
Constraints:
The business owner is quite attached to the logo he designed for Zymo as he worked hard on it. It isn’t really distinguishable as a loaf of bread which is what it is meant to be. I planned to discuss changing the logo with him again as the project progressed as we had only touched on it briefly in our first call. This ended up being a hard constraint and we stayed on using the original logo.
The business owner is a software developer so the implementation of the changes were made by him. He had not worked with a UI/UX Designer before and this was my first real world project so this was a steep learning curve for both of us, however the flexibility and candidness we both offered in our collaboration on this project proved to be a great combination and this was a very enjoyable project to work on with scope for more collaboration in the future.
2. Define
Affinity Mapping
After synthesising and processing the findings from user interviews into an affinity map I reviewed the affinity map and generated a list of themes I noted.
User Personas
Based on my interviews I defined 2 different Personas to represent the various types of users for the platform based on this round of the redesign.
Sitemap
After defining the user personas I reviewed the current sitemap of Zymo and created an amended site map based on the findings of the research, including proposed features for future development and growth. The proposed future features highlighted in the red boxes were based on user needs which were highlighted during the user interview process. I moved the Help menu item to be a page in the Admin section and also split all delivery functions out into their own sections in the navigation (eg. Edit Delivery Routes, Daily delivery sequence and Delivery Categories), previously these all fell under the “Routes” menu item which was not very descriptive or easy to navigate to the different functions if the user did not know those functions lived on the “Routes” page.
When deciding on the structure of the proposed sitemap I really took some time to decide how the menu would be laid out to make sure logical items were grouped together while being sure to make accommodations for potential future features and growth of the product.
Task Flows and User Flows
Creating the Task Flows and User Flows helped visualise how many pages and user interactions were going to be required for each flow and helped me to figure out more streamlined ways of setting up pages with as few touches as necessary for the user.
Creating the user and task flows helped me to sense check how the platform should function. As these were existing flows in the platform it was great to sense check the current set up and make changes where necessary
POVs & HMWs
POV’s & HMW’s Process
After reviewing the affinity map I created the following POV statements based on my findings and considered the following HMW questions to help move the design process forward
3. Design
Low Fidelity Wireframes
After deciding on what direction would be the best way forward for the platform and defining the sitemap and some basic userflows and taskflows I moved on to wireframing and designing key components for the platform.
Log in wireframes
Weekly calendar wireframes
Wholesale orders wireframes
Product screen wireframes
Mid Fidelity Wireframes
Production breakdown screen wireframes
Product details screen wireframes
Creating the low fidelity wireframes helped me identify what elements could be used as repeating elements in different areas of the product. Creating the mid fidelity digital wireframes really helped visualise a sleeker product and made me start thinking about how I want the product to look and feel. They also helped to enforce the decisions that needed to be made about the layout of the various screens and helped me to sense check if my lower fidelity wireframes made sense and would work properly. The mid fidelity wireframes also helped with visualising the proximity of content and the hierarchy of the site and informed my decisions on various component sizes and what kind of components I needed to consider and design before going into high-fidelity wireframing.
Branding - Style Tile and Components
After completing the wireframes I experimented with typography and gave the business owner a selection of fonts he could choose from that worked well for a data heavy design. I also created a style tile and component library ensuring to design all of the components I had identified as necessary during my low and mid fidelity wireframing to prepare me for designing the high fidelity wireframes.
Link to Figma Components page
I wanted the new colour scheme to feel calming and optimistic whilst communicating trustworthiness. I want the design to be as sleek and uncluttered as possible.
I think the visual design choices made up to this point made the product very accessible and easy to use on various view port sizes, which was very important for my user personas, also the ability to see and edit varying degrees information and manage various aspects of a bakery from any device is very important for my user personas.
High Fidelity Wireframes
Desktop wireframes
Tablet wireframes
Mobile wireframes
4. Test
Usability Testing
For usability testing I chose to do moderated tests over Zoom using a prototype I had set up for various tasks. I had the testers talk through what they were doing and thinking and recorded the tests to come back to and analyse further to see where the users hesitated or got stuck.
Tasks
The participants were asked to complete the following tasks on both the Zymo desktop and tablet view prototype in Figma:
Task 1 - Log in to Zymo and Navigate to daily production for the 26th of October.
Task 2 - Navigate to the Croissant product page and edit the product.
Task 3 - Go to the wholesale orders listing and filter the list to show orders with yeasted tags only.
Success metrics
Task completion - Success will be measured based on the participant's ability to complete the task without any significant errors or issues.
Time taken to complete task - The time taken to complete each task was recorded to assess the ease of use and efficiency of the design.
Errors made - Any errors or issues encountered by participants will be recorded, indicating potential usability issues.
User satisfaction - Test participants will be asked to provide feedback on their experience using the website and completing the tasks.
Usability Testing Findings
Time taken to complete task - The time taken to complete each task was recorded to assess the ease of use and efficiency of the design, the findings varied due to the complexity of the tasks and the number of steps required, which has highlighted some usability issues which require addressing.
Task completion - All tasks were completed without any significant errors or issues
Usability Testing - Prioritisation for next steps
Recommendations for next steps for expected results.
The sign in process and navigation worked well and could be moved into development without the need for further testing as the testing on these tasks was satisfactory and produced no issues.
Recommendations for iterations for unexpected results.
There were a few iterations recommended as shown below.
Iterations
Change the Mobile and tablet navigation to be able to navigate from one section to another within the menu dropdown - This was purely an oversight when setting up the prototype, this was remedied as soon as it came to my attention.
Change mobile and tablet menu to have x on top left when open - It became evident during testing that it wasn’t intuitive for users to tap outside of the menu in order to close the menu, I therefore added the X as a visual “exit/close sign” for the users to know how to close the menu.
Change filter pop up to a bigger full screen overlay on mobile view and add run button - During the user testing it became evident that the menus were too small and aesthetically they didn’t look great, in addition users weren’t sure how to make the selected filters run as there was no button to prompt this, to remedy these issues I enlarged the menus and made them centered to the screen as an overlay, I added a run button for filters and also added the search box to the filter selection overlay so it was accessible from the filter menu as well as from the wholesale orders page.
Make full container clickable in filter dropdowns, not just the box should be clickable - During user testing I observed that the majority of users expected the entire container to be clickable, so if they tapped the tag label “GF” they expected the corresponding checkbox to show selected.
Include a settings link in desktop navigation, on landing page make the production just a one week view with nav arrows, not infinite scroll & swap production and summary - production on top - During user testing I asked users where they would look for their system settings, hardly any of the users knew where they would find it so I thought putting an easy shortcut on their main navigation would ease the mental load on the user having to look for their settings in the Admin tab. After discussing the feasibility of having an infinitely scrollable production navigation on the home screen with the developer, we agreed it would be better to have a single week view that could be clickable to previous/future weeks as this was more achievable for the developer’s workload and could draw on current code, this solution would in effect be exactly the same for the user. Based on observation of how the users interact with the platform and based on the feedback from the users about what functions they use the most, it made sense to have the Weekly production navigation above the Orders overview for the week.
Add informational text regarding clickability of headings on production tab, less fade on the hover state of solid buttons - During testing it became obvious that users were not familiar with the idea of being able to click through directly from the production table to both the customer and product pages if they needed to edit these for any reason, users were instead navigating to the product or the customer through the main navigation which was more time consuming for the user. The option of underlining these items to indicate they are linked made the screen look very cluttered as this is a very information heavy design so I opted to include a small informational text to help the users. The fade on the hover state of solid buttons was a bit too heavy and decreased the readability of the font, this was corrected by decreasing the fade effect.
A comparison of what Zymo used to look like vs what it looks like now
Sign in page - Before
Sign in page - Now
Landing page - Before
Wholesale orders page - Now
Products page - Before
Landing page - Now
Wholesale orders page - Before
Products page - Now
Daily Production page - Before
Daily Production page - Now
Individual Product pages - Before
Individual Product pages - Now
Conclusion and Next Steps
The client is very happy with the changes made to the platform this far. We are implementing the changes in stages with the starting focus being on implementing the cohesive colour scheme and new fonts and font heirarchy across the site.
Following this the client will be implementing the changes to the navigation, landing page, buttons and CTA’s.
I will continue to work with the client to implement design changes across all pages and functions across the platform and continue user testing on the changes before we implement them.
I have thoroughly enjoyed having a real world client with a live product to work on with this project, it has taught me how to navigate discussing people’s work decisions and also where compromises can be made. It also reinforced my confidence in the knowledge I have gained around usability to support the design decisions I made.