Anything is good if it’s made of Chocolate

This was a brainstorming case study that I was given as an assignment when I applied for a UI/UX Design internship at Niki.ai


| Building Context

People crave for chocolate because it is good! It tastes good. It smells good. It feels good when it melts on our tongue. And all of those ‘feelings’ are the result of our brain releasing chemicals in response to each chocolate experience. The experience of eating chocolate results in feel good neurotransmitters (mainly dopamine) being released.

Dopamine is released when you experience anything that you enjoy — sex, laughing etc. Craving is driven by all components of chocolate being taken together, and not simply by the biological effects of the chemicals.

When people choose a chocolate, they take time with it to enhance their positive experience because all of their attention is focused, and they are able to lengthen the amount of time that they experience pleasure.

| What was the study?

Let’s imagine there is an app to purchase crafted chocolates online. Simply you go to the app, browse through all varieties of chocolates, cookies and purchase.

Activities — What one can do when one enters the app.

  1. Sign up/login (with Google or Facebook)
  2. Can browse through different chocolate varaities.
  3. Can mark chocolates as favorite so it’s being added to his/her favorites list.
  4. Can purchase selected chocolate.
  5. Track his/her order and get exciting deals and offers.
  6. Shop a product, leave a comment and rate the product.

Chocolate profile- what one sees after he/she clicks on a particular chocolate.

  1. Name
  2. Small Description
  3. Ingredients/Product Info.
  4. Brand
  5. Price
  6. Any other relevant information that I think should be shown.

| The Process

The idea was to create an easy-to-use interface(being beautiful at the same time) and keeping in mind the different user groups and their preferences over chocolates. No matter what the age is, everyone loves chocolates, be it a kid or a 50 yr old guy. I started off with asking people of age groups varying from 14–50 yrs of age about what all variables they look for while buying a chocolate. Considering all the necessary information and statistics required as well as collected, I came up with the following workflow.

Workflow

After collecting all the necessary information and user oriented data, I began with some brainstorming on how can I show the screens and specific information to the user without confusing him/her. Wireframing is the most essential part in the process of designing. I prefer doing it on a piece of paper with a pen or pencil instead of using softwares (preferably Balsemiq) as that way it is much faster to note down ideas and make changes instantly. I started creating wireframes for all the screens and how the individual screens can be connected without any hassle.

A good product is one where you don’t have to guide the user to do things. It should be simple, elegant and should solve the problem.
Wireframes

| Interface Design

The main focus was to create a holistic experience with an intuitive user interface that is clean, subtle and one that follows basic visual guidelines.

Color Palette — I used Orange as the primary color as it combines the energy of red(passion, aggression) and the happiness of yellow(fun, frolic). It represents enthusiasm, happiness, attraction, and stimulation which are key factors that are essential when one buys a chocolate.

The secondary colors are white and grey as they compliment any primary color. I have used grey for background with white for cards.

Font used is Avenir for body and Trueno for Heading. I have used different shades of black and grey for text to give a soothing typography experience.

Homepage — When a user log’s in via facebook/google, he/she sees a list of cards of all the crafted chocolates. A specific card contains the image, name, a brief description(the description is shown in a way that a user is enticed to check the chocolate profile), veg/non-veg, its weight and the price. I tried to avoid loading the user with heavy content in the cards and kept the information to a minimum that is required to choose a product because adding too much information creates confusion. A user can directly add the following chocolate into the cart from there itself.

Item profile Card with details

Navigation — The user can navigate and access the wishlist, cart, track order and one can edit their profile easily.

Also, one can access the cart and add filters(Type:veg/non-veg, Price: L to H or H to L, Category: Dark, white, milk etc.) to the list of chocolates from the home page itself.

Profile — A user can track their orders, see the items in the wishlist, see the latest deals & offers and check the cart apart from changing the profile image, and name.

Chocolate Profile — One can view the chocolate profile page by clicking on the card on home screen. The profile contains detailed information about the product, the brand, shipping information, packaging and transportation, and can share the profile to their friends. One can view reviews related to a particular product and add their own view points as well.

Moreover, one can rate the product on a scale of 5. The rating is shown in a unique way with inculcating it in the description to give the user a comfortable reading experience.

Rating feature for User feedbacks

Here, the information is segregated into different sections.

  1. The main section that contains the same information as the homepage card listing section.
  2. The insight section which contains small but crucial information about the product (e.g shipped by air, no added chemicals etc.)
  3. The more detailed info that a user can look at if he/she is keen to look for.
  4. Activity Section — Reviews and Ratings

After a few iterations, wireframing, taking user feedback, prototyping with invision and taking user feedback again after the first iteration, I came up with the following final design.

Although I haven’t added the blank screens but this gives an almost complete idea about the thought process, guidelines and structure followed.

Please pitch in your comments and feedbacks to help me in solving the problem in a more elegant way.


View my work on Dribbble, Behance.

Follow me on Linkedin, Instagram and Twitter.

For any queries, drop a mail at singh.shivansh8@gmail.com