Overview
Leafi is an online store and wellness brand which was designed to sell indoor plants and promote self care. It’s a responsive web app with a vibrant colour palette and contemporary imagery which can be beautifully displayed on mobile, tablet and desktop.​​​​​​​
Details
Role:
Product Designer, Branding
Challenge:
Create a cohesive brand before designing an ecommerce product
Tools:
Sketch, Balsamiq, Adobe Illustrator, Adobe Photoshop, Adobe XD
Duration:
2 Months
Prototype:
Context
This was the final project of the CareerFoundry UI Immersion course. ​At this stage I had learned how to be an effective UI and UX designer and this task was an opportunity for me to continue to develop and refine my skills. Unlike all of the previous projects, this one began with the creation of a brand identity before starting the design of the web app.
Objective
For my final UI Immersion project I decided I would produce an online store as these types of websites are one of the most commonly used around the world. I had recently been looking into buying some plants for my home and while browsing various other plant shops I thought they would be the perfect product for my online store.
My Role
For this project I was a UI/UX Designer who:
​
-
Produced low, mid and high-fidelity wireframes
-
Performed a user testing session
-
Designed professional mockups
-
Constructed a working app prototype
-
Created a cohesive set of brand guidelines
User Flow Diagram
I began by focusing on the customers user journey when visiting the online store. Even though most users will be very familiar with ecommerce sites it is still important that the apps interface be simple to use and easily understood by customers. I designed the following user flow diagram to map out the apps user journey.
Low & Mid-Fidelity Wireframes
After creating the user flow diagram I began drawing some initial screen designs with pen and paper. This exercise allowed me to get down a lot of initial ideas and quickly create variations of the same screens. When I finished sketching I produced the first digital version of the designs using Balsamiq, the wireframing web app.
User Testing
Using the digital mid-fidelity wireframes, I created an initial working prototype with Adobe XD for participants to use during user testing. Many people are interested in seeing customer reviews when it comes to online shopping, to the point where if something has very little or no reviews people may not consider buying it. It’s because of this I thought I would ask my participants to undertake a scenario test where I provided access to the prototype and the following scenario: You are a new user who wants to read the reviews of a product you may wish to purchase.
The participants then had to navigate the prototype to find the product reviews. I kindly requested each user verbalise their thoughts while using the prototype so I could note down what they were thinking. I was pleased that all four participants found the reviews quickly and easily, as they recognised clicking on the star icons would lead to the reviews section - one participant even saying, “I see stars I click stars”.
Although they all found the reviews, a couple of the users did comment that it could be beneficial to have a handful of reviews on the product page, as many other online stores have the most recent or most popular reviews there, so you didn’t have to go to a new page. This seemed like a strongly held opinion so I thought it important to add in the next variation of the design.
High-Fidelity Wireframes
After completing a round of user testing I began working on the high-fidelity wireframes using Sketch, making sure to include important features that had been requested by the participants such as including some reviews on the product pages. It was at this stage that I introduced the brand colours (see details below) and imagery to the design so it would evolve into the finished product.
Responsive Designs
As well as being a mobile app the Leafi online store will be accessible by desktop, which meant I needed to create designs for much larger screen sizes. These designs would contain all the same content and share the visual design of the mobile screens but the layouts could be much more versatile as there is a greater amount of space on a desktop computer of laptop screen.
Mockups
Upon completing the finished screen designs for both mobile and desktop I produced a range of mockups using Adobe Illustrator and Adobe Photoshop to display the product in a promotional manner. Some of these mockups had the online store shown in real world scenarios to communicate what the designs would look like in the real life.
Brand Guidelines
Guiding Principles
The Leafi brand believes that nature should be enjoyed by everyone. Plants can benefit your mind, your body and your living room! Their goal is to provide beautiful and healthy plants so you can feel the great outdoors in your own home.
Writing Style
The brand voice is friendly, casual and informative. The brand is knowledgeable about plants and the natural world but is able to communicate with users through fun and clear language.
Sketches & Inspiration
Primary Colours
Seeing as Leafi is an online plant store it made sense to use predominantly green colours to match the site’s products. As these are the main colours for Leafi they are essential for brand recognition and consistancy.
Secondary Colours
The secondary colours need to standout from the primary colours and should be used sparingly for certain highlights and accents. An example of this would be the like and review icons.
Image Style
The images associated with the Leafi brand should be clean, modern, product focused and promote a stylish living space.
Each plant advertised should include images of the product purposefully placed in homes which meet the Leafi aesthetic, which is minimalist and contemporary.
The Leafi brand helps to promote a modern life style so it is important to include nice photographic interior shots of rooms with our plants, so customers see an example of how they look in different environments.
Conclusion
When I started working on this project my goal was to create a cohesive brand and design an easy to use and visually appealing online store. I believe that Leafi has been successful in completing both of these goals as it has it’s own distinctive style and branding, but also offers a simple user journey for customers to buy indoor plants.
