Macmillan Coffee Morning Recipes
Prototype Quick Links
Introduction
Since 1990, Macmillan has been holding an annual fundraiser, World’s Biggest Coffee Morning (WBCM), to receive donations by inviting people to gather over a cup of coffee or tea with some baked goods. What started out as a small event has now become Macmillan’s largest fundraiser (World’s Biggest Coffee Morning, 2019). During WBCM, funds are generated by people registering to host a Coffee Morning. Registered individuals receive a kit of supplies from Macmillan to host the event in their place of choice, such as their workplace, home, or community centre. Macmillan also offers other support to host an event, for example ideas for baking or cooking, available on https://coffee.macmillan.org.uk/baking-recipes/ After hosting a Coffee Morning, the hosts send their collected donations back to Macmillan through the microsite. The entire process is meant to be simple, convenient, and easy. However, investigating the microsite’s UX through usability testing highlighted opportunities for improving the process.
Problem statement – recipes section
The recipes section was evaluated and below are presented some of the findings and recommendations:
- There was a positive response to the selection of the recipes and how the images of the recipes were presented on the recipe page on the website.
- By looking at the images, the participants were able to narrow down what they might want to cook and start clicking on a recipe they might like to make a decision.
- Recipes page was good overall, but it was pointed out that the fonts for the individual recipe is too small to read. Considering this website is built for anyone to use, having such a small font with tight line spacing can be a critical issue for some users.
- Some participants were pleased to discover that the recipes had large photos, and text instructions, even on those that were labelled only as videos on the recipes page.
- Some participants didn’t find the categories helpful and thought it could improve.
- Participants were annoyed by the in-page jump when selecting categories on the recipes landing page. Selecting a filter button moves the focus to a position further down the page which participants found disorienting. P1 explained that they assumed the links would take them to another page and that it was a little “deceiving” that it wasn’t made obvious you were still on the same page. P2 described the functionality as “easy to use” but also felt this was undermined by the necessity to manually scroll back to the top of the page to explore the different sections. P3 struggled with the assigned task since they felt the provided filters did not help them narrow down the variety of recipe options.
- Participants felt there were so many recipes that a search function was strangely missing.
- Participants would like to have a sharable link or print out function on an individual recipe page
In summary: whilst the participants liked the selection of recipes and images available, the categories weren’t particularly helpful and resulted in a clunky experience. They would like to see additional functionality including a search and the ability to print and share recipes.
UX Recommendations
- Provide search by a recipe name or ingredient
- Improve filtering by categories (only categories at this stage), the recipes section is only to provide some ideas and currently contains only just over 40 recipes
- Keep the images of recipes, also add the most important information upfront, such as preparation and cooking time, whether the recipes contain video instructions on the category page
- Update typography so that recipes are easy to read for users
- Add sharing and printing functionality
- Add further recipe categories
UI Task
Based on the sketches provided, please propose designs for both the recipe category and an individual recipe page, including demonstrating interactions where required. You can provide deliverables as you would normally do. Please take creative directions from our existing site* https://your.macmillan.org.uk/cancer-information-and-support/ but feel free to explore the boundaries of the brand.
*Please note that only the Information and Support section has the updated design.
Provided Wireframes
Recipes category page
Individual recipe page
My Approach
- Understand the problem statement and UX recommendations
- Review the existing World Coffee Morning recipe pages
- Review Macmillan’s existing site’s visual identity and styles in the ‘Information and Support’ section
- Research other recipe sites
- Create a UI toolkit based on existing components
- Create the UI for the mobile and desktop breakpoints in Sketch
- Prototyping in InVision
- Next steps
Task Interpretation
My interpretation of the task is to take into account the UX recommendations whilst applying Macmillan’s latest visual identity in order to improve the functionality, usability and consistency of the World Coffee Morning recipe pages. This will allow it to be simple, convenient, and easy for people to find recipes to make whilst promoting the brand, therefore raising more funds for Macmillan.
The Existing pages
Recipes
Information & Support
Research
UI Toolkit
The UI
Recipes
Prototypes are available here: Desktop & Mobile
Individual Recipes
Prototypes are available here: Desktop & Mobile
How I’ve Met The Brief
- Added a search functionality
- Added additional filtering categories which allows for more to be added in the future
- Shown important information upfront such as preparation and cooking time with simple iconography
- Kept recipe images/cards a consistent size
- Increased the font size and line height to make it easier to read
- Added sharing and printing functionality
- Incorporated Macmillan’s visual identity to ensure consistency across the site and maintain brand awareness
- Added a featured recipe
Next Steps
- Demonstrate further interaction including the Search feature and image carousel.
- Look at some other potential features to improve the pages such as reviews and ability to add ingredients to a shopping list or buy online.
- Repeat user testing in order to establish success of the changes and highlight any additional areas for improvement.