UX Design
Zdrowo na swoim (eng. Healthy at home) aims to help young people start cooking tasty and healthy meals on their own. Its offer includes crates with plant products and menus based on products from crates.
Role
UX/UI Designer, eCommerce Website Designer
Goal
Create a user-centered, easy to use responsive e-commerce website.
Approach
A good design starts with conversations, therefore I started the process with an interview with the founder. We determined brand values, users’ needs and business objectives.
Brand Values
Simplicity
Friendliness
Nature
Users Need to…
- Understand company’s mission
- Know if the company is credible
- See company’s offer
- Be able to see if the products are suitable for them
- Be able to purchase products adequate to their preferences
- Know how and where products are delivered
- Know how to contact Zdrowo na Swoim
- Be able to buy products
- Know terms and conditions
Business Objectives
- Build brand awareness
- Increase conversion on the website
- Present product in a desirable way
Audience
Young adults
Singles and couples
Interested in ecology and healthy lifestyle
Starting their adventure with a plant-based diet
Solution
The company’s mission is to show that cooking is simple and fun – and so is using the Zdrowo na Swoim website.
- Communication with clients was to be in simple language, expert knowledge was to be presented in an accessible way, and the overall interaction on the website was to resemble a conversation with a friend rather than a formal visit to a specialist. I have achieved a light and informal character by using a funny info-graphics illustrating the company’s mission – thanks to it the content is not overwhelming and it corresponds well with brand values.
- The owner and I decided to introduce blog component in order to build credibility and trust.
- To make the website functional and readable, I used easy to identify headers and short blocks of text so the website is easy to scan.
- To make the website more reliable, my client and I decided to enable comments and reviews.
Result
- An intuitive, fully responsive website clearly communicating company’s mission
- Smooth user flow throughout the whole buying process
Tools
Balsamiq
WordPress
Sitemap
The design of sitemap is based on users’ needs. You need to know company’s offer? There is a tab in the menu for that. You want to check delivery options? There is a sub-page for that too.
Wireframes
In this section I explain the decisions I made during the designing process:
- I wanted to achieve a light and informal character of the website by using a funny info-graphics illustrating the company’s mission – thanks to it the content is not overwhelming and it corresponds well with brand values.
- A simple navigation bar enables all key features of the website. Straight underneath I showed company’s offer. There are links to shop pages to enable users to purchase easily.
- Users should be able do easily determine if the product is suitable for them. That’s why there is a section specifying who the product is meant for.
- I included many photos of good-looking food to present product in a desirable way.
User Testing
User testing stage was very insightful. I interviewed 4 people – they were asked to perform actions on the high fidelity design of the website – 2 of the users on the desktop version, 2 of them on the mobile version. I asked them to evaluate each task and overall experience of using the website.
The tasks were to identify company’s mission and offer, find contact information, terms and conditions, and information on deliveries. Then to try and buy specific products.
- The outcome of the user testing was adjusting spacing and size of each section.
- Another thing was to highlight the most important pieces of information, which is especially visible on sub-pages with long descriptions like Offer (“Oferta”) or Our Method (“Nasza Metoda”).
The most important pieces of information are bolded.
Final deliverables
I used bright, pastel colors in order to convey a message of simplicity, lightness and optimism. Light pink and green resemble about nature, which is one of the core brand values.
For typography I choose two contrasting fonts – a serif one, “Playfair Display” for heading and sanserif “Open Sans” for paragraphs.
Colors
Typography
Headings
Playfair Display
Aa
Paragraphs
Open sans
