Let's Connect:
UX/UI Portfolio
Flora & Fauna
Showcasing the heart and soul of a unique product.
Everyone who discovers Mary’s soap fall in love with the product, but before this website had no means to discover more about her, her process, or where to make their next purchase. Flora-FaunaSoap.com is the place where returning and inquiring customers may explore her story and find answers that provide more value to their experience with her hand-made goods.
Scope: Sole designer on Client Project
Tools: XD, Wordpress, Webflow
Role: Concept, Research, Analysis, Wireframes, Prototype, Final Website
Context: Appearing only at farmers’ markets does not provide enough information or exposure to allow those interested in Flora & Fauna soap to discover more about the product, artisan, or how to make their next purchase.
Research - Understanding The Problem
First I conducted a stake-holder interview with Mary to determine her goals and needs; this drastically reduced the scope of the project as Mary did not have the resources to run an online store. There are many soap-makers in Nova Scotia alone so analyzing the market landscape was my next step to understand what consumers would be expecting, additionally to discover what made Mary stand out among her competitors. Artisan and hand-made were not unique qualities to this business, but I did discover that many others did not discuss how the soap was made, how to use it, or the benefits of an artisanal soap. My next step was to conduct an online survey to gather quantitative and qualitative data from potential and existing customers. There were seven questions and 52 responses. I determined that 31 of these responses qualified as her target audience with the first question which determined if the consumers purchased their soap from the farmers’ market.
Analysis - Identifying Themes
The data was visualized with the aid of infographics which showed what information should be emphasized and what didn’t matter to users on the website. For example, vegan friendly was identified as not important to most users, thus learning into the benefits of the animal products in the soap became a feature of the website.
Describe your image
Describe your image
Describe your image
Describe your image
Following the visualization of the data, key points were broken down into findings, insights, and solutions which were organized using a MosCOW analysis. This helped inform what would be more prevalent on the website, for example, what the soap is made of was the highest ranked question thus it became the first to be answered on the about page.
Data Synthesis - Empathizing with Users
Creating a persona at this point created a better understanding of how and why the user would be motivated to visit the website. Charlotte Byrne, our fictional customer, would likely find Mary at a farmers’ market and visit the website after as a means to follow-up her purchase and learn more.
Finalizing Design in High Fidelity
Based on the hand-drawn low-fidelity mock-ups, a more refined version was created using Adobe XD. Upon user-testing it was revealed that the landing page menu items on the side we confusing and not identified as buttons, and the landing page was not very interesting or attention grabbing, so some sort of hero-image was needed. The colours used on the website were selected from actual bars of soap to reflect the product directly, with the addition of green to pay homage to the “flora” aspect of the business name.
Final Website (Webflow)
Using visuals from the same artist who made the logo illustration I created a large hero image on the landing page to create an impactful first impression. The various shades of green reflect the variety of flora elements used in the soap as does the differing shapes throughout the illustrations. I designed a drop down menu for more familiar navigation from the header which hides when scrolling down to decrease visual clutter. When scrolling up it reappears for easy navigation. On the about page I organized information using the hierarchy revealed in my survey results. There was a great deal of text to which I added regular images to make the feel less text-heavy; I added a progress bar flowing down the page to help visualize the reader's journey through the information.
Conclusion and Insights
When conducting research it is helpful to collect consumer information regarding purchasing behaviour, but for the purposes of UX design it is more useful to inquire after information that will reveal their emotions, journey, and experience with the product in relation to the design project/website. Understanding the stakeholder’s resources at the beginning of the process is vital to determine the scope of the project; for example eliminating the need for an online store streamlined the project. On the other hand I did not gauge the resources regarding image sourcing and copy-writing, and that added to the final workload.