Antique rugs mockup

ANTIQUE RUGS

Re-designing an online store

logo_rug

About this project

I re-designed the Mollaian Antique rugs website with my teammates.

The Mollaian store:

  • Offers a variety of textiles
  • Sells unique handmade rugs
  • Has 35 years of experience
  • Operates out of 3 branches

* Photos and content are courtesy of mollaeian.com website and other respective owners. No infringement is intended by this unsolicited proposal.

Project Overview

tools_rug
team_icon
duration_rug
Beautiful red rug hung on wall

To put what I learned from my UX/UI courses into action I designed an e-commerce website with two of my classmates. Our interest in sustainable businesses and care for nature led us to create “Live Up”.

My Role

  • I was a UX/UI designer in this redesign project and was involved in every step from ideation to prototyping.

Product

  • Desktop website

Problem Statement

The client in this unsolicited redesign project has a poorly organized and outdated website for online sales. They need to redesign their website based on better information architecture to boost the shopping experience and sales.

The process

My team utilized the double diamond concept. It was not a linear path, we bounced between stages as the project progressed.

Heuristic Evaluation

A heuristic analysis of the current website revealed several problems of varying severity.

1. Aesthetic and minimalist design

Aesthetic and minimal design
Click to view larger

2. Visibility of system status

Out-of-stock products are not marked. No price is written.
There are too many out-of-stock products listed. It feels more like a museum than a store!

Visibility of system status
Click to view larger

3. Match between system and the real world

On the navigation bar, the sorting and labels are messy and do not make any sense. User cannot recognize the logic.

Match between system and the real world
Click to view larger

4. Aesthetic and minimalist design

The list of filters is long and too technical.

Aesthetic and minimalist design
Click to view larger

5. Error prevention

Not all the pages of the products are active.

Error prevention
Click to view larger

Another heuristic rule was missing: Help users recognize, diagnose, and recover from errors.

Some pages return errors.

6. Recognition rather than recall

A meaningless number in the product title makes recognition difficult.

Next to the rug’s age, the numbers confuse the user.

Recognition rather than recall
Click to view larger

7. Flexibility and efficiency of use

No search criteria available except size

Flexibility and efficiency of use
Click to view larger

8. Consistency and standards

UX writing problems.

Content sometimes appears in different languages mixing English and Italian.

Consistency and standards, UX writing problems
Click to view larger

9. Visibility of system status

Expired events are advertised.

...

10. User control and freedom

The back button doesn’t work properly on all pages.

Competitive analysis

We compared four similar websites to better understand where we are standing compared to the market.

Competitive Analysis

Major Takeaways

Must add

To add a personal account section
Having a blog can help customers choose better

Must change

Old-fashioned look

Good to change

A more interactable user interface
Lack of information about rug thickness (foldable or hard)

Persona

Persona
Click to view larger

User flow

We mapped out the easiest and most efficient user flow that a user needs to go through

User flow
Click to view larger

Affinity diagram

To research the labels and site map we asked 10 users to sort the cards.

Card sorting
Click to view larger

Card sorting results

Information architecture was designed based on card sorting results.

Card sorting results
Click to view larger

Wireframing

Based on the research, the proposed website was wireframed to experiment with maximum simpleness and usability.

Wireframing

Usability test plan

After redesigning the website based on the usability test a task was defined for users to find a rust -and-red rug. Here we see the process according to a usability test plan dashboard.

Usability test plan

Information Architecture

Open card sorting: 10 participants
Some design flaws were revealed, including the ease of navigation in the navigation bar. So, we re-designed it.

Rug age

Users found “Antique” and “vintage” labels as confusing.

So, age was simplified to four clear levels:

  • Antique
  • Semi-antique
  • Modern
  • Old

Iteration

Some users were still unsure about the distinction.
They mixed up antique and old.

age mockup

Result

Age categories were quantified with distinct colors in the form of mouse over tips to leave no room for mistake.

Hi-fi iteration

After running a usability test, these iterations were agreed upon:

  1. Users didn’t pay much attention to the locations, so it was made smaller and put lower.
  2. Users did read the story of the creator so it was brought to the center with a photo of the owner to make it more personal and relatable
  3. Laying out photos up front helped users better realize if this is what they were looking for.
  4. Users needed a CTA to take them directly to the products page.
  5. Services were moved higher with more clear icons and less text.
iteration
Click to view larger

Rug color palettes

old palette

Current design has separated colors, showing their shades.
Users did not find this solution useful.
They only saw the main colors. e.g.: blue and red.

Solution

Shades were discarded.
Adding labels helped user recognition and searchability.
But separate colors did not look real for normal people.

separate colors

Iteration

To merge all the info in a compact and appealing form, I created orbs out of the rug color palettes.

color orbs

Result

color results

Rug category display

Previous design of categories page did not invite users to interact

Iteration

Focus on category was removed as it is accessible in the menu.
Instead, rugs were put upfront with an elegant and minimal design.
Hovering on each photo shows info.

Result

New design adds dynamism and visual appeal.
It engages users directly with products.
Users feel empowered to view info and add product to cart directly.

Rug categories

High Fidelity Prototype

A functioning was created based on the findings. Several rounds of iterations were conducted to fix errors and fine-tune the product.

Antique rugs mockup
figma-buttonsmall
Click to view in Figma

Outcomes

Our final design reflects the learnings that we achieved during our discovery and development steps. Users wanted a more modern and user-friendly design, reflecting that need.
By removing unnecessary categories, streamlining the navigation, and improving the user interface and information architecture, we improved the user experience.

Next project

Upcycling Website Design

Live Up Furniture Renewal Website

A website to sell renewed furniture

 


Fatal error: Uncaught wfWAFStorageFileException: Unable to save temporary file for atomic writing. in /home/nooraniw/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php:35 Stack trace: #0 /home/nooraniw/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php(659): wfWAFStorageFile::atomicFilePutContents('/home/nooraniw/...', '<?php exit('Acc...') #1 [internal function]: wfWAFStorageFile->saveConfig('transient') #2 {main} thrown in /home/nooraniw/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php on line 35