Photography
About the project
Darryl is the owner of Ora Foods, a specialty food supplier for restaurants, cafes and hotels in Western Australia. He was a long-time standing client of the agency, Slick Design, where I worked as Head of UX/UI.
Client: Ora Foods
When: Dec 2022 - May 2023
Team:
Shaun Cockrill - Web Developer - Slick
Mia Campbell-Foulkes - Designer - Slick Design
Situation
Darryl approached our team with several ‘website upgrades’ to help expand his business and increase customer satisfaction. These upgrades could be presented as ‘problems’ in the UX world and were grouped as such:
Task
As much as we believe our clients, it would be foolish to assume these problems were a) at the forefront of customer dissatisfaction, and b) that they would magically solve business operation issues and/or see profit sky-rocket.
So as the lead on the project and with an unbridled amount of confidence, I communicated the importance of UX research with Darryl. He agreed to rescope and allowed us to explore his customer database.
Testing the Assumption
To collect feedback, I inserted a pop-up customer survey on the order page. In 2 weeks it had only received 2 submissions and unfortunately, incentivisation was off the table. With this roadblock and negligent resources at my disposal, I pivoted our research approach and began cold-calling the most active customers.
Although calling customers up may seem like an outdated, telemarketing-esque method, it actually yielded some great data and I conducted the calls as I would an empathy interview by allowing the ‘user’ to guide the conversation and using an open-ended style of questioning.
Some of the main lines of feedback from this research were:
Internal Staff Workshop Research
Alongside this research, I also visited the warehouse and ran workshops with team members who dealt directly with customers. These were some of their thoughts:
“Some customers were clicking ‘place order’ repeatedly because they weren’t sure it had worked. I usually had to call them to confirm they only wanted one order and often refund the other duplicates.”
“Sometimes the page took so long to load that they just decided to give up and place the order over the phone.”
With this feedback I was able to RE-define and assess the more demanding problems at hand.
I was able to CONFIRM Problem 1
I was able to MODIFY Problem 2
And I found a NEW PROBLEM!
Result
Conclusion
As a lot of this exploration and research had pushed the scope and project timeline out, we weren’t able to test with a wider population before taking the product live.
I would have also liked to be able to conduct some A/B testing within the product cards themselves and reanalyse Hotjar recordings, however, the client did not have any more budget!
I also think that as this was such a monumental project, it was very hard to measure incremental successes. In future, I would break it into smaller stages to run in a sprint environment and slowly implement each step. Unfortunately, because we were changing the branding so vastly it would have been very jarring to run both aesthetics.
Overall, the client was happy with the outcome but there were plenty of lessons learnt along the way for myself!
Action
Users
From the research, it was important to understand who we were talking to. The customers naturally fell into 3 groups.
Those who used the website for most orders
Those who used the phone to order
Those who used their own CRM, whereby it emailed a generated form.
For the purposes of staying within scope and budget, it was important to focus on the current online users. Although it would be beneficial to look at ways to convert the other 2 groups of customers, we already had enough to work through.
Problem 1
User Research Methods for Problem 1
As discussed earlier, we were able to collect some very insightful thoughts from our customers on our ‘empathy interview calls’ but we also conducted some desktop research in the shape of competitor comparisons to get some inspiration on aesthetics and function and were able to do our own user testing on some of these customer portals.
UNFORTUNATELY, the other food suppliers also presented with similar issues to Ora Foods, where their web presence was also dated and showed problems with functionality.
From here I researched more grocery delivery services, food kits and large online supermarket stores like Coles. These industry adjacent businesses helped because:
They were relatively new-age companies, so modern branding could be assumed.
They showed similarities in Ui (like food item product cards) that would help functionality (quantity, add to cart, favourite) and aesthetics (drop shadows, grid layout, corner radiuses etc)
They also allowed us not to have to reinvent the wheel. These businesses spend hundred of thousands a year on design, UX and development so it would have been remiss not to take guidance from companies that already do it right.
Insights & Initial Solutions for Problem 1
1. COLOUR PALETTE TO BE REINVIGORATED
Competitors generally showed fresh and punchy branding with bold colours and heavy use of white to keep a clean simple Ui intact.
Although there wasn’t room in the budget for a full rebranding exercise, the owner shared some colour swatches and conveyed he wanted the brand to have a coastal feel.
As some of these colours didn’t exactly comply with accessibility standards, I readjusted and found some similar hues to create shade stacks that could be used throughout the website. I also selected a few feedback colours that were also within the same saturation range as the primary colours.
2. MORE USE OF ICONS TO SIMPLIFY UI
It was important to use iconography that was commonplace, as our users (similar to the users of coles etc) aren’t exceptionally technologically adept and are fairly time-poor.
To try and use as many icons that are universally recognized, I took a vast majority from Google’s Material Symbols and altered them to ensure stroke width was consistency.
3. RESTYLE BROWSING AND FILTERING ELEMENTS
The original options to filter and browse products were extremely limited. As shown below, the user was given the selection of brands via tags to then filter and locate products. As you can see, the layout of these 'tags' also took up too much space and found repetitions pulled through by their CRM (la rose noire, La rose petit Four)
The solution on the right gives the options of filtering by brand, food type, dietary and also gives sorting options.
Wireframing filter lists and basic shopping cart layout
Reception and changes
Surprisingly, a lot of what we had created for Darryl was happily approved. The colour palette matched his expectations. He encouraged us to use a few more motifs and textures to bring a more casual feel and tie in the fact they were a food supplier. The elements I chose were reminiscent of flour sprinkling used at low opacity in footers and backgrounds. After the main icons had been approved, Daryl also requested custom icons to signify things such as food allergies and dietary requirements to be used on the product cards - this meant a bit more work on the iconography.
Challenges
There were a few challenges found with the filter options. First, we wanted to ensure there was enough customizability for the user without overwhelming them and second, pairing the CRM with WordPress. A master Excel spreadsheet was created to ensure that all product information (classification, brand, ingredients, dietries etc) was included both within the Ora Foods CRM and WordPress.
There were CRM limitations that meant some information could not be brought from WordPress and vice versa, there were questions as to if it had to be entered manually or be pulled via an API, if stock availability would show live, or from which end new items had to be added to the website! For all of these back-end nuances to be solved, there was a lot of collaboration between development, design and Ora Foods to ensure the functionality in the designs would be achievable and that data was consistent across the business.
Problem 2
Insights and Initial Solutions
Because this was a much more simplified problem, I didn’t have to do much more user research, I just began brainstorming ideas to bring the template system to the forefront. I asked myself ‘How can I bring templates to the forefront?’, ‘How can I encourage them to change their manual process without a big learning curve?’ ‘How can I push the user down certain pathways?’ This saw the entire user journey of the order process become centred around the templates.
By creating a very simple screen-by-screen, step-by-step process, it took a lot of the decision-making out of the experience. I gave the user minimal options per screen making it almost fool proof’
Reception, changes and Challenges
Taking the user directly to the template was one thing, but teaching them how to use them was another step altogether. The team did some testing on the staging site and wanted it to be a bit more explanatory with new icons and new steps, they wanted to create a very easy flow-through experience, which lead us to devising tool tips to be used with a wizard.
Tool tips were activated on hover