Website design for Nova Aroma

Nova Aroma is a Goa based start-up which sells aromatic and health care products online. This is how I created a fresh identity and website for them.

The client: Nova Aroma

Date of completion: Nov ’17

Team : Owner of the company, 1 Marketing manager, 1 Webpage developer and 1 Website designer (me)

Services provided 

Brand identity and logo design,
Web-site design

The brief

Nova Aroma website:

  • The website should reflect the company values.
  • It should appeal to users who often buy their products online.
  • The website should help the users choose which product to choose, if they cant decide.

Nova Aroma Logo

  • It should e composed of simple shapes
  • Should be very easy to identify on all media.

The biggest challenge:
Aroma is intangible. When you buy a perfume, you must try it on and inhale the scent. However, buying perfume online does not give you that opportunity.

Solution:
Humans often associate scents with colors. For example, rose red would invoke scent of roses. In this design, I have used colors, forms, imagery to subtly convey the sense of aroma.

The highlighted area shows how image and description suggests of scent of the product.

The brand values

Nova Aroma is a startup based in Goa, India which sells exotic perfumes and skin care products. They are known for delicate and feminine products.

  • Focus on quality and cutting down on what is not necessary.
  • Simple and direct approach to customer experience.
  • Helping customers to find the products they need.

The users

Location: Urban and metropolitan areas of the world.
Income group: Middle to high income group
Gender: Targeted mainly towards women, but some some male products are offered too.
Age: 18 to 60 years
Professions: housewife, part-time, full-time, student, professional, retired.
Education: High-school and above
Computer literacy: Basic level.

The logo

These four keywords were used to reflect the values and philosophy communicated by the logo.

Simple and clean

Bold and solid

Rounded and smooth

Easy to replicate

The logo with it's composition and it's colored, greyscale and outline views.
Animation showing how the logo is composed.

Wireframes for the website

Many wireframes were created for getting a clear idea about what is to be delivered. The wireframes were drawn interactively, in discussion with the clients.

I sought approval of each page before I started making the visual designs.

Selecting colors for the website

Flowery

Delicate

Soft and smooth

Aromatic

I decided to use the same combination of hex-codes for generating the colors which reflect these values and create an analogous color scheme.

Selecting the fonts

It was decided that the website should have one single font. The following keywords were used to select an appropriate font for the website.

High legibility

San Serif

Informal appeal

Multiple weights

After shortlisting a number of fonts, Nunito was accepted by the customers.

Features of Nunito font makes it an ideal choice for Nova Aroma website.

Micro-interaction : Hiding the menu

Challenge: Normally, the menu of the website should be visible to it’s users. However in this case the menu intruded into the white space and took the focus away from the shopping experience.
 
Solution: Keeping the menu one-click away. The menu is kept hidden under the hamburger icon. The icon changes to cross to indicate that the menu can be collapsed back.
 
Usability check: Later the feedback from the user confirmed that they do not use menu too often, so this function is justified.

X-Y Navigation

Challenge: The website should have navigation available upfront, yet the two hierarchies of navigation must be separated visually.

Solution: The main menu is represented by a vertical (Y-direction) and is highlighted by a subtle background. While the secondary menu is at the top and gives the category.

Rationale: The user scans the page in F-pattern.

The homepage

Homepage is  where the user lands and goes on from there to find the products they need.
 
The marketing team of Nova Aroma did not want any offers or product images because of their image for simplicity and sophistication. Therefore unlike any other eCommerce site, they preferred a very simple design.

Other pages

Category page shows the different products available under a selected category.

Product page shows the various variants of the selected product.

Details page shows the feelings and the price associated with a product.

Therapy page helps the user choose the product that suites them the best.

Learning and conclusion

Learning

  • From this experience, I learnt how to deal with website design and to identify specific challenges for designing one.
  • I learnt how to convert intangible sense of aroma to a visual form.
  • I learnt to seek approvals and getting business involved at multiple levels to finish the design.

Conclusion

Though the website is launched and has attracted a lots of attention, I decided to seek more improvements in the same. So I have proposed the following two concepts for future improvements. 

Future concepts for the Nova Aroma website