Patisserie Website
Olczak and Son
For the Final Project of the Ironhack Bootcamp, we were working together with a stakeholder. He is the stakeholder of 4 Patisseries in Warsaw. The company already has a Website, but it is not up to date anymore, therefor Agatha Iwanek and I were designing a new platform to get the right cake for any occasion.
Time: 9 days
Team: 2
Tools: Figma, Figjam, Useberry, Maze, Google forms
Device: Smartphone
Methodology: Improving a companies Website
Deliverables: High-Fi and presentation deck
-
Research / Empathise
Use of stakeholder Interviews, qualitative and quantitative research, competitor analysis to understand the user and the business
-
Define
Creating How might we statements, a primary user persona, current user journey map. To summarize in a problem and hypothesis statement
-
Ideate
Focusing on a Minimum Viable Product with information architecture. The creation of site maps and the happy user flow. Sketching of first design ideas.
-
Prototype
Sketching Low- fidelity Ideas followed by wireframing Mid-Fi´s on Figma, Components and Autolayouts in a Design System and High-Fi prototypes.
-
Testing
Remote and online testing. Mid.FI testing with Useberry, High-Fi testing with Maze and desirability testing with usabilityhub.
The Brief
Stakeholder Interview
Mobile-friendly website
About us
Location
Our Offer
Contact
Privacy Policy
long-lasting traditional Patisserie
Old Website
User Research
Interview Quotes
I don´t know exactly what information to write while ordering a cake
I don´t know all the options I can choose from
I couldn´t decide on a cake and which options I had to combine different ingredients
I wish a short list of what is important for the order to have
I want options to combine ingredients to create my own cake
How might we
“HMW offer the user to create individual cakes and what parts of the cake can be personalised?”
Define
After focusing on users’ needs, creating affinity maps, emphasise maps and HWM Statements we defined the findings in the User Persona and User Journey Maps
User Persona
User Journey Map
Now that it is clear that the website needs a new structure, a modern touch and an option to customize cakes. Therefore we created the problem statement to bring the research to the point and a Hypothesis statement to measure the success.
Problem Statement:
“We have observed that our customer’s website is not providing enough information and options for the users to customize the product (although it is possible),”
Hypothesis Statement:
“We believe creating a customize option and providing necessary information will improve the customizing/ordering process for the client, save their time and encourage them to use the service in the future.”
Competitor Analysis
To have a look how other patisseries are presenting their self on the market we compared different features of the websites and created competitor mood boards.
Feature comparison
To summarize the findings we created a reverse Moscow method where we pointed out what features all the companies offer or whatnot
Reverse Moscow Method
Visual comparison
To get a visual impression of the competitors we created mood boards of the Patisseries. We figured out that they all chose brown and yellow colours.
Market positioning
As seen above the competitors are more traditional modern and luxurious. Our Patisserie, Olczak and Sons is currently positioned in the ordinary and traditional direction. With the new website, we will give it a more luxurious and modern position in the market.
Information Architecture
As the problem was defined we were able to structure our mobile website.
With the help of the Moscow Method, we figured out what is how important.
Sitemap
To structure the content of our website we created a sitemap.
User Case
In the next step, we created the Use Case and the Task Analysis for our problem which we focus on. The case is to customize a cake when the user wants to order a cake but cannot exactly find what he want´s we will offer the option to choose different flavours.
User Flow
We were all set up for the user flow and created the happy path of a cake order with the choice to customise the cake or to order a cake directly.
Design Principles
before we begin ideating our low-fi we created the Design principles of the website.
According to our research, we put together the 4 design principles which we used to provide concept guidance during the UI phase and to calibrate our thoughts as a team.
Classic
as the patisserie has a long-lasting tradition we wanted to keep the design still classic
Individual
as everybody has a different taste we will always give the option for own customisation
Trustworthy
To keep long-lasting clients we will be open about the products and ingredients to provide trust
Clean
The design should always provide the most important information and don´t lose focus on the products
Low-Fi
According to our research, we created some ideas for a mobile website, afterwards, we combined the parts we liked the most so that we continue with the Mid-Fi.
Mid-Fi
We were ready to build wireframes for the Mid-Fi. In the top part of the Mid-Fi, you can see the flow of ordering a customized cake, starting from the Homepage going through the Categories and Products, customizing and ordering it. The lower part gives the option to customers to just contact Patisserie for questions or orders.
Testing
We set up testing on useberry.
Task 1: Choose the Orange cake for a Birthday
Task 2: Customise the cake
Task 3: Go to the homepage and contact the Patisserie
The results were good 100% were able to finish the test and said it was easy to follow
Design
Moodboard
Styleguide
Our style guide includes the Logo and the fonts we have used. The Colors are yellow and brown of the brand and orange and green for highlighting.
Design System
High-Fi
Usability Testing
After we created the High-Fi we set up a test on Maze. The tester also needed to find the Orange cake for a birthday, customize and order it and then contact Patisserie.
The test showed again a 100% success rate. According to the options scale, we asked the tester to answer the app is easy to follow. We had a scale from 1–10 45% answered with 8, 18% with 9 and 36% with 10. 10 was “easy peasy”, 1 was too complicated.
Design Testing
To be sure about it we set up another test where we asked if the Navigation bar is clearly visible. 33% of the testers were not convinced it is.
Stakeholder feedback
Our Stakeholder was more or less happy about the design. He really liked the idea about the customization option. It could save a lot of time for his employees as they don´t need to spend that much time anymore on the phone to explain the options to the customer.
The only thing we needed to add in his opinion was to select the delivery date for the cake. It was supposed to be on either page, the Product where the user can immediately set an order and on the customize page, all the information is provided on one page.
Final High-Fi
As we analyzed from our competitors that colours are important, as yellow is part of the Logo we decided to use that instead of the orange, combined with a brown background for the Navigation bar it gives great contrast and makes the Icons clearly visible. We also moved the navigation bar to the bottom for comfortable usage in the Mobile version.
Testing
Crap Principles
Heuristic evaluation
Reflexions
Next steps
As the next steps for the project, we would make long term user testing, create the about us page and a desktop version.
Conclusion/Learnings
In a conclusion, we can say it was not always easy to see tasty cakes all the time. But overall it was an interesting project to not only show what has the patisserie to offer but also figure out how we can make the customization process as clear as possible to the user. To deal with the brand colours and bring contrast in the app with inviting colours at the same time was not always easy. But in the end, we are both happy with the project. Thank you to Agatha for this great teamwork and thanks to Olczak and Son to work with us. We learned a lot.