Diego Vanegas
UX Designer

E-commerce for
Elegant Beauty Supplies

Adding e-commerce to their current website

Image alt tag

Brief

Create an e-commerce site for the store Elegant Beauty Supplies ( for short EBS)  and add it to their current website.

Elegant Beauty Supplies is a store based on south florida, they have 21 stores in total spread all over Miami , Broward and Tampa. They sale all things related to beauty from hair extensions to hair products and electronics such as hair dryers and trimmers, etc.

1. Knowing our user needs

Interviews

In order to start thinking about an e-commerce site I had to first validate the need for it and detect the pros and cons of such activity. 

To work on this challenge I started by doing interviews to the current and potential users of the store. The questions were around the experience of buying online and the overall process of the activity.

Findings :

  • Talking about online shopping Amazon will always be a reference point

  • Reviews of products are a MUST when shopping online

  • The process of checking out is very tedious

  • Some users don't end up buying products because of the lack of pictures and clear descriptions of the products.

E-Commerce

Affinity Mapping

With all the information gather from the user interviews I decided to make an affinity map in order to filter and organize the information and make some I statements to understand better the user necessities and to create personas.

Hypothesis

User needs to be able to have the option to shop online on their favorite stores so that they can have more time for other activities.

E-Commerce

Personas

Based on the user research and the hypothesis; two different personas were created, one is a regular and avid online shopper which is willing to explore and purchase new products online. The other persona i a recurrent shopper that buys the same things over a certain period of time and doesn't like to take risks when purchasing for new products.

Common aspects of the personas:

  • They find online shopping extremely convenient

  • Online shopping saves them time that they can dedicate to other priorities

  • They believe every store should have an e-commerce site

  • Online shopping is part of their shopping habits

2. Information Architecture

Card Sorting

I decided on the main categories of the e-commerce site with an Open Card Sorting and compared the results of what EBS already has in its stores . Also did an additional Close Card Sorting to verify if the current EBS stores where clear enough.

Results:

  • The open Card Sorting gave me a couple of common categorizations among the users of products like Shampoos and Conditioners for example.

  • The hair treatments and hair styling products where the ones that had different categories.

  • On the Open Card Sorting some users admitted guessing the category because they were not familiar with the product and could not read the label on the card sorting exercise.

  • The product categorization had a 80%-90% accuracy on the Close Card Sorting.

E-Commerce

Site Map

Added the shop, account and cart section to the current EBS section.

3. Competition & User Flows
E-Commerce

Task analysis

Before starting with the user flows, I decided to compare our direct and indirect competition and analyzed common tasks and made the challenge of making the process more efficient for the EBS e-commerce site.

E-Commerce

User Flows

The checkout process was improved by making it two steps less than the competition and overall the objective was to make the whole process very intuitive for the user.

4. Sketching & Wireframing
E-Commerce

Sketches

I usually start the design process with rapid sketches and brainstorming ideas. This is the way I iterate through many design options quickly.

Challenges:

  • Deciding where to place and in what order the Shop, account and cart menu

  • The placement of the shopping cart overlay menu

  • Overall layout of the e-commerce site

  • The checkout process and price placement

E-Commerce

Wireframes

Having done my sketches I created wireframes for testing purposes.

Challenges:

  • Test the user flows and verify them

  • Adjusting images sizes and layout of the product section

  • The placement of reviews and writing a review

  • Deciding on how the cart menu was going to appear

E-Commerce

User Testing

Before finalizing the product and updating my low to high fidelity prototype, I did a user test to reveal possible usability problems.

Results

  • Discovered that certain icons where not big or clear enough

  • Was missing a local navigation while browsing certain products

  • The check out process was lacking local navigation and some icons

5. UI Prototype

Final Product

Since I was adding the e-commerce feature to the EBS site I had to make sure the site was consistent in the look and feel of the brand.

Having done the usability test I had the chance to correct and iterate my design, and before finalizing the design I did a second usability test to verify the changes.

Final Thoughts

What did I learned?

I gain a lot of experience creating information architecture and card sorting, the whole process of deciding how to add items to the shopping cart and to make it more efficient was challenging. Designing based on the user flows and trying to improve them makes the problem solving part of the project very easy.

What can I improve?

As the e-commerce site grows in products, the discover section and layout of the products could be improved by given the user the ability to custom view how many products can it see per page. For the users who always buy the same product , a feature that lets user purchase automatically same items over certain period of time could be added.

"You made it!, thank you for your time"
Have a great day :)