Roasty Coffee want to redesign the webpage into a responsive web app to give a better user experience. They also want to offer more features such as different coffee brewing methods, and the ability to change the strength and measurements.

Customers at Roasty Coffee need a way to calculate and personalise the ratio of coffee to water when making filter coffee with various brewing methods so that they can make a perfect coffee to their preference.

As I don’t have access to data from the website I have carried out a usability heuristic evaluation on the Roasty Coffee website using Jakob Nielsen’s 10 Usability Heuristics, I also continued to refer to these as I was wireframing.

I carried out a contextual inquiry on coffee drinkers. Observing the participants gave a lot more insight than asking them to recall how they make coffee.

Some insights I gathered from the contextual inquiry were to use an alarm for brewing time, flexibility for measurements and the ability to customise the coffee to water ratio to taste.

I developed some user stories from the research insights to understand the different levels and preferences of the people that will be using the calculator and ensure it meet the needs of all.

The Roasty Coffee app has other features such as a blog for different coffee techniques. This project will focus on the ‘make a coffee’ section.

I decided to use storyboarding to understand the complex steps to this process. This helped me to translate the contextual inquiry into the key user flows within the app.

I created a high-fidelity wireframe and tested the app on three users of varying coffee knowledge. I wanted to see how well the user could understand the instructions and also translate this into a real life situation. I also got valuable feedback from peers and fellow designers.

It was necessary to redesign the logo and define colours for the Roasty Coffee app to ensure the brand is consistent across all platforms.

Designing for mobile-first ensured that all important features are accessible on mobile. As the screen size gets larger the design is adapted, the user can access popular filters and the full navigation menu.