1. Intro
Hello everyone, my name is Bridget Barbier and I’m a first year student at Howest, studying Devine (Digital Design and Development).
Devine consists of three pillars: Design, Development, and UX Research. Within the field of UX Research, we conduct research on user needs.
Our student-project
Our task is to renew the original website by matching it with two new target groups. This will be achieved by conducting a thorough analysis of the target groups and developing a suitable website that meets their specific needs and expectations.
After reading a few online reviews, this local coffee shop just realised that they aren't reaching their core customers online.
So our task is to redesign MOKcoffee from scratch and make it better fit the new target audience.
After reading a few online reviews, this local coffee shop just realised that they aren't reaching their core customers online.
So our task is to redesign MOKcoffee from scratch and make it better fit the new target audience.
This is a school exercise for the course UX Research.
2. Target Audience
Based on these reviews listed below from their website, I made the two new target audiences. I also gave the target audiences an archetype and a description.
Target audience #1
Archetype: Shaking Shanon
Description: The Shaking Shanon wants something explosive, and shocking. Something that wakes them up amongst the other ordinary boring coffees.
Target audience #2
Archetype: Pretty Price Prospector
Description: The Pretty Price Prospector likes to buy coffee for a good price-quality ratio. They like good coffee for a good price.
Description: The Pretty Price Prospector likes to buy coffee for a good price-quality ratio. They like good coffee for a good price.
3. User Story
I made a couple user stories for both user groups that fit their needs.
3.1 Acceptance criteria
I also have five acceptance criteria per user story, to see what they find important and need on the website.
4. Flowchart
First I made a flowchart for MOKcoffee.be to analyse their website and the structure. After that I made a flowchart for my website.
5. Wireframes
Wireframes are an essential tool in the design process of any digital project, from websites to mobile apps. They allow designers and stakeholders to visualize the layout, structure, and functionality of a product before it is developed, and to make informed decisions about its design and usability.
Low fidelity wireframes
I have created more comprehensive and clearer low-fidelity wireframes in addition to the ones I previously made.
Medium fidelity wireframes
Home
Shop
Boost your life (A step-by-step guide)
Forum
Personalisation
Error page (404)
6. Spotlight
High fidelity wireframes
Home spotlights
↠ About us
↠ Sneak peak: Personalise your coffee module
Shop spotlights
↠ A lot of filters
↠ Strength icons
Boost your life spotlights
↠ Step by step guide
↠ Images guiding the process
Forum spotlights
↠ Like, share and reply button
Personalise your coffee spotlights
↠ All the different options
↠ Generated results
Error message spotlights
↠ Automatic redirect
↠ Redirect button
↠ Funny and clear message
7. Figma prototype
With this prototype you can take a look on how I see the website working. You can navigate between the different pages, click on buttons and even try the personalisation tool! You can try it out by clicking sequentially the Regular, Chocolate and the Milk option. After that you can see in the progress bar where you are in the process. If you click on Generate results it will show you three coffees based on your indicated preferences. To see the error message you can navigate to the shop and click on a product title.
Thank you for taking the time to read my school project!
