Aromariss is a Gatineau-based small business in Ottawa, Canada, which uses natural ingredients to produce homemade skin and nourishing products. The business owner used to sell her products in the market as her side work to make small amount of money. When COVID-19 hit our city, she couldn't do that anymore, but she got the idea of turning it fully online to be the beginning of a serious business. In this project, I did research on her local competitors, users and created a redesign plan for her crappy old website. Through wireframing, research on customer targeting strategies, and implementation on WiX, our team hugely upgraded her website.
Team
UX/UI Designer (My Role)
Copywriter
Developer
Graphic Designer
What I did
Duration
UX Research
2 Weeks
Oct 21, 2020—Nov 09, 2020
Wireframing
Development (WiX)
Visual Design
Digital Marketer
Flows at a glance
1
After 5000 ms
Close it to go back
Choose "Shop All"
Choose "Blue Patchouli"
2
Choose the question icon
Choose "Contact Us"
3
Choose"Our Story"
.png)
Select "Blog"
A pure, natural and relaxing vibe for customers
Aromariss's main selling point is to make products with no artificial fragrances or ingredients. That's how we concluded that its brand keywords are simple, pure, nature and trustworthy.
Moodboard Credit: Chloe Wang (Graphic Designer)
We explored around the concept of the brand in fonts and colors and figured out Verdana and Helvetica are good choices for a simple reading experience
There wasn't much branding on the old design.
It looks almost just as the WiX template with
only its logo color in titles and notification bar
Style Guide (parts)
More colors and font variations were added for a better color contrast and content hierarchy purpose during the implementation. And button styles are defined
An enriched store experience that engage customers
Research-based tricks that retain consumers
Rewards
From the competitor research, it is proved that using point rewards or membership gifts can increase customer loyalty. We also learned from it and applied it in the design.
Considering that some users may not notice the rewards button on the left corner, a pop-up was added to grab people's attention and describe the simple steps to follow.
A friendly and trustworthy experience
1
Picture/emoji works with text
2
Providing reviews and collecting feedback from customers builds an honest and trustworthy brand image, it also provides information to customers, which is beneficial in the long run
3
From the UX research, customers sometimes don't know how to use a product and they stop the purchase action; by adding this feature, we make sure everyone knows how to use these products
4
Listing the types of payment supported at the store helps customers to be reassured and make purchase more firmly
Keep in touch with customers
Customers will forget you if you don't say "Hi" from time to time.
In the competition research, we found all main competitors are using newsletters to update subscribers with special discounts or brand events, which is a very effective strategy.
We set it up and created the newsletter template for her on WiX.
A simplified and optimized information architecture
Home
Before
After
1
2
3
4
5
6
2
7
4
We found consumers are lazy. They don't want to spend time understand what products you have. They love recommendations. Same as the clear categories on the navigation, giving people featured products make them purchase faster. From the research, we found Our Bestsellers and Seasonal Specials are the most popular options.
6
Displaying feedback on Home provides references to customers and builds our credibility.
1
The notification bar's information is reduced with a detail button leading to the full shipping policy to decrease the time customers spend on reading and avoid confusion
A drop down animation is also added to grab attention
2
From the UX research, we found that clear product categories help consumers find what they want quickly also with a search function for a site wide searching.
We found that customers of online stores rely much on Help and Contact. Because of the space constraint, I designed a secondary navigation that features Search, Help and Contact all in icons that are distinguished from the main one.
On footer, we also display a collections menu.
3
The banner has clear call-to-actions to direct customers.
We found brand story is usually a factor that determines new customer's impression on the store, that's why we prioritize "Our Story" on the banner.
5
We let customers know Aromariss unique selling point—to make products with no artificial fragrances or ingredients with pictures, right away on Home.
7
To distinguish the footer and the content, we used black as the background color. The newsletter was designed into the same pattern as the call-to-action buttons.
Shop All
Before
After
1
2
3
1
Adding a tag like "New", etc can highlight some products.
2
Now customers can add items to cart right away. No need to click twice into a sub page
3
Filter should be the tool to help customers narrow down a product when many items were given. To utilize that, we set up price ranges, scents, ingredients, etc for very specific search.
Single Product
Before
After
1
2
1
We implemented the collapse tabs to provide complete information of products to reduce confusions. And customers now can share products through Whatsapp and Facebook as many of them may buying as a gift for others.
2
Now people can see what others say about a product as reference.
Help/FAQ
Before
Content in Shipping & Returns page
After
Not a single user wants to read through such long web pages that means these pages are probably useless. And it was unnecessary to have separate pages for store policies, shipping & returns and privacy policy since all of them are policies.
With the idea of collapsible menus, I organized the FAQ and Policies under a Help page, which hugely reduced the content space, create a clean, user-friendly design.
We also redirect users to contact page for further answers.
Content in Store Policy page
Contact
Before
Content Part
After
Content Part
The owner wants users to contact by the form, secondly by her phone and email. So we changed the order of form and her contact info based on user browsing habits. And we also added her social accounts there, since our social media research showed that many consumers interact with her there.
Our Story
Before
After
First we show customers the key message of her business. Then we enlarged her profile image with a little creativity in font decoration to add more personality. The font was chosen based upon the pattern of soaps. It looks more eye-catchy, expressive now.
Blog
Before
Content Part
After
.png)
Content Part
We removed the Blog banner as it is not useful. The article boxes are styled as the branding to make it not like a boring template anymore. The comments and heart functions were added to encourage interactions. We also chose to display the pictures without grey filter, since visual plays a big part in attracting people to read.
Outcome
After one month of the project, our client achieved a huge surge in sales that she describe it "overwhelming".
It is not surprised that our client is still using the design now in Aug 2021!
"Skylar (Xinyi) worked on my website as a member of the Digital Media Street team. She was responsible of redesigning the website. The results were much better than I expected. The site is now much easier to navigate and more attractive to clients. I will highly recommend her work."
Rissa (from LinkedIn Recommendation)
What I learned
It is good to set a high standard as an intern to have as many achievements as I can. However, being too idealistic cost me lots of time adjusting unnecessary details.
Prioritization and workload management are important part of this project. I concluded that if an ideal goal that is infeasible, can't be achieved within the deadline, it's better to alter it earlier than getting into trouble.