The Class Experience Redesign

Local eCommerce UI and Checkout Flow Revamp

Role

Sole UX/UI Designer

Duration

1.5 Week Sprint

Tools

Figma

Zoom

UX Metrics

Pen and Paper

Research Methods

Heuristic Evaluation

User Interviews

Card Sorting

Usability Tests

Comparative and Competitive Analysis

Introducing Class

Orginal Site Design

Class is one of the most well known and trusted tech stores in Lebanon - small country in the Middle East. Class aims to provide the best that technology has to offer to its local community at a reasonable price.

Initial Encounter of Negative User Feedback

I wanted to gift my friend in Lebanon a phone. As I reside in the US, I planned on placing the order online and shipping it to her home address. I informed her that I will be ordering the phone from a well known electronic store there, Class.

She laughed, almost hysterically, and told me she'll go down to the store and pick it up in person - I shouldn't "bother" myself with their site. I thought that was strange, as the branch that's near her house is located in a narrow alleyway that cars can't enter, and finding a close-by parking spot in that neighborhood is harder than finding a spot in NYC. Or so I've heard.

Heuristic Evaluation 

My friend's response sparked my curiousity and led me to conduct a quick site inspection to see what the ordeal with the site was.

I found quire a few quirks with the site, the main ones being:

Dummy text shows up in the cart when an item is added

Not many facets are available, and "Filter" serves as a 'confirm sort by selection' button

Users are charged more than the item costs

Users are redirected to an error page when attempting to place an order

User Insights - Design can be disrespectful?

When I told my friend my heuristics evaluation findings, she pointed out that the reason she didn't like the site wasn't because of its quicks, but rather, its visual design.

She, alongside 4 other Lebanese individuals I interviewed and conducted usability tests with, expressed - in one way or another - feeling disrespected by the site's visual design.

"Other stores respect their clients, not make their lives harder. What they think they are better than us??!" - Farah

"I swear they made me feel like they are selling to sheep" - Houssein

"Seeing how many things are wrong with the site, I can see just how sh** we are in their eyes" - Elie

"This shows that they either don't hold value to themselves or they have no value placed on us - its most likely the second one" - Ahmad

Politics Role in User Dissatisfaction

I never thought that a website's design could be disrespectful. However, upon lots of inquiry, I discovered that the reason this was the case is highly relient on the politics of the country.

In 2019, the people took to the streets and started a revolution to combat the political elite whom have robbed them of their money, dignity and basic human rights.

The elite responded by making the situation even worse. Electricity, gas, wheat and water are scarce, the banks ceased the peoples' monet and the real GDP per capital fell by 37.1%.

The collapse has not only been economic, but social as well.

How Does Class Tie In With The Politics?

Class is owned by two brothers whom are considered members of the elite of Lebanon. Not in terms of politics, but in terms of money and business.

According to my interviewees, them creating a website in 2021 that is outdated - especially for a tech shop - and isn't really operable, is another slap in the face to the Lebanese people.

The users usually shop from Class as it connects them with the best and most current forms of technology, as they believe that they deserve access to that just like the rest of the world. Users believe the site's current standing diverges from that mission to the extent that it does the opposite, and highlights a sense of outdatedness - not of the site, but of the people themselves.

Problem Statement

Users need a modernized website with a smooth navigational flow to it, as they believe that these aspects are indicative of how much value a company holds to its customers

Now that I knew what the problem was, I wanted to focus on the website's flow first and visual design second, as that's how great navigations and great websites are built.

To be able to accomplish either, I needed to visualize my users and keep them at the forefront to further empathise with them. Thus, I revisted my interview and usability test notes and stumbled across Ali Khoury.

Persona Development

Ali is an army man who, as a result of the significant deterioration of the Lebanese Lira, has had to take on a second job to make ends meet and provide for his children. His phone recently broke and he is in need of a new one that won't fail him as communication is a big part of his job.

He wants to buy locally and so resorts to Class. Upon opening their site, he is gutted to see that the #1 tech store in the country is outdated and not even functional. He believes that the people of Lebanon deserve better.

Design Processes 

Sketching

Lo-Fi Wires, Testing, Iterating

Hi-Fi Wires, Testing, Iterating

How Can I Account For User Needs?

1. User Centric Categorization

In an attempt to create a better navigational system and site map, I conducted a card sort - where I gave users different products and asked them to group the ones they believed go together and lable each group.

6 out of 6 participants grouped items highly similarly.

Phones

90% Similar

Tablets

100% Similar

Laptops

85% Similar

Accessories

85% Similar

Gaming

80% Similar

Electronics

70% Similar

Wearables

65% Similar

Beauty

80% Similar

Using these categories, I created the following site map:

Note: I didn't create subcategories under the umbrella titles, as there aren't too many products under each category.

During the usability testing interviews, users mentioned a lack of an abundance of products made the site look cheap. As such, I added a "Filter by" section for users to refine their search if they choose to.

I also conducted a competitive and comparative task analysis to see where Class stood amongst its competitors, and what flow eCommerce stores are currently adopting.

I landed on the following 'complete' flow:

2. More Visuals for Guidance

3 out of 5 interviewees expressed a need for visuals for better guidance, as it was quicker to understand what category they are clicking into by seeing it, rather than reading it.

A portion of the population isn't entirely literate, and as such visuals tend to be great guides. Thus, I added the "Shop by Category" section where the categories are listed with corresponding images.

3. VAT (Tax) To Be Calculated Properly

The VAT calculation that was originally on the site was 11% of the total USD price, in USD (which should be on LBP), and doesn't follow the LBP conversion formula (explained in the screen).

Users were highly frustrated with the site's VAT calculation in USD - stating that the owners are attempting to scam them. As a result, I switched the calculation from USD to LBP and even included an info tip to explain the calculation.

To emphasize how significant this is, the site's original calculation would charge $107.8 in the following example instead of $6.43.

4. Cash on Delivery Option

Unfortunately, as a result of the corrupt banking system, the Lebanese banks seized people's money. Therefore, many users are unable to purchase using credit cards and need a 'cash on delivery' option

5. Enhancing the User Interface

5.1 Brand Identity 

I wanted to see if the color red that is used in the pictures is part of their brand identity. However, as you can see in the images below, each one of their storefronts has a different design to it.

As such, I took the liberty of adjusting the color palette of the website and creating a new brand identity that is more fitting to what the customers want.

5.2 The Psychology Of The Color Red

"When we 'see red', the pituitary gland releases adrenaline into the bloodstream, producing a quantifiable rise in our blood pressure and an increase in pulse rate and respiration - all which prepare the body for the 'fight or flight' survival response" - Marketing Comunications: A Brand Narrative Approach

5.3 Understanding The People

The users all indicated that they wanted to shop local, and wanted the place they bought from to show a sense of patriotism.

I though the color green might be a good fit, as it is the color of the Cedar tree, which is the national tree of symbol of the country, and is even on the Lebanese flag.

Also, green is associated with growth and evoking health, and the country is currently in a state of healing.

I wasn't initially sure what shade of green to go with, and so did some more digging about the people. 

I found videos of the 2019 revolution, and saw that it was full of laughter, dancing and singing. That showed me that they are a fun loving community and, as such,I decided to use a soft shade of green to give the site a little bit of a playful feel to the 'modern tech feel'.

I landed on the following color pallete:

Note: The colors tested highly positively. 6 out of 7 usability testing interviewees comented on the colors and stated that they enjoyed the feel it brings to the site.

Usability Testing

Round 1:

Round 2:

Class Website Before and After

The Site in Action

Class Website Mobile View

Next Steps

This was a passion project of mine. I was highly intrigued with the political and social influence on web design and so decided to pursue this redesign. 

My next steps involve reaching out to the owners of the company and seeing if they are interested in adopting changes to their site.