top of page
Screenshot 2022-09-09 at 21.01.00.png

Lotus Jewelry

Lutos Jewelry's e-commerce website was crafted using design thinking and research methodology to offer an intuitive and visually appealing user experience. By incorporating best practices in user experience design, Lutos Jewelry provides its customers with a seamless and enjoyable online shopping experience.


​From high-quality engagement rings to wedding rings, eternity rings and diamond rings, with diamond studs, tennis bracelets and numerous items. All of our diamonds have GIA-certified.

 

Our stakeholders are determined to export Lotus products all over the world. In addition, they have developed this company since the outbreak of the Coronavirus.

Final Prototype

Mobile Version

Desktop Version

Our Team

MY Roles

  • Team Leader

  • Design Researcher

Tools

  • Figma

  • Canva

  • Adobe Photoshop (Ps)

  • Adobe Premiere (Pr)

  • Miro

  • Zoom

MY Responsibilities

  • Project Management

  • Design Research

Platform

Website Design

Team

The group consists of 4​

Duration

October 5, 2021 - December 21, 2021

About Project

Problem Statement

Despite Lotus jewelry Company solely having a branch in Dubai and being very popular with excellent service.

 

A wide range of users would not trust a company that does not have a worldwide online service and does not have a website or an app to show its products. 

 

In addition, users rarely have exclusive and luxury online purchases, which is why we decided to use our solutions to eliminate their lack of trust.

Our Purposes In Designing

  • Delivering a luxury and very special website

  • Demonstrate both Fine and High Jewellery to customers of Lotus Company

  • Some of their notable criteria are that, good services such as world shipping, easy return, and lifelong warranty

  • Illustrate that Lotus Jewelry has handcrafted and unique items

  • Fabulous design and access to customise items

Design Process

Screenshot 2022-08-09 at 15.59.55.png

Business Research

Screenshot 2022-08-09 at 16.00.36.png

Design Thinking Process

Empathise

Empathise

Understanding the challenge is the first method stage, It allowed us to set aside our assumptions about the users and gain real insight into users and their requirements.

 

To better understand their concerns and needs, I accomplished the user research process.

User Research Process

Survey

I created a survey on Google Forms to where Forty-two people (38 women and 4 men) from all over the world responded to it.

 

The most significant answers:

  • Approximately 60% of them bought expensive & luxurious items online

  • Customers are much more interested in wearing rings, and necklaces

  • 50% of them generally spend between $500 and $4000 on buying gold and jewellery

  • Emphasis on the reliability of the seller

  • They highly recommended that the diamond has a GIA (certified) to ensure originality.

  • Our customers expect to customise jewellery 

Interview

Based on the user's understanding, we determined to solve the real problem, not the imaginary ones. 

​I had 14 interviews which were 11 women and 3 men,

Most of them were video calls, others face-to-face.

 

According to the experiences of our potential users, I identified the most important criteria:

  • Consider that gold and jewellery should never change colour and be of high quality.

  • Product categories should be in the form of human models.

  • Access to services all the time.

  • Mention that at the GIA, all diamonds are manufactured in our lab.

  • To better customisation the products, a special process should be designed by selecting specific items.

Competitive Analysis

  • I have analysed 5 companies, including sell jewellery online and jewellery manufacturing, as well as companies that specialise in different types of diamonds in their laboratories.

 

  • The competitive analysis helped our team identify the target companies' strengths and weaknesses and better understand the market, which are key drivers of value.

 

  • Finally, I have displayed the data on the design Main menu (Nav bar)Home page, Ring customisation (customise page), review page (single product on display) and Filter menu in Rings page.

Screenshot 2022-09-02 at 14.55_edited.jpg
  • According to the analysis I did for the Home page, the outputs were Customise, Category section, and best seller

 

  • While considering the interviews I did before, we added the testimonial and handmade sections. 

 

  • In addition, our stakeholders informed us to add Long Necklace to the Home page section because we have a branch in Dubai, and this product is extremely popular there.

Screenshot 2022-09-02 at 14.55_edited.jpg
  • For the main menu (Navbar) section, I analysed all the Navbar companies' websites. The outputs were Collections and Fine Jewelry.

  • While I had already done some interviews, I gained their requirements, CustomiseWedding ring, and Services. As a result, I determined to solve the main concerns of users.

Screenshot 2022-09-02 at 13.18_edited.jpg
  • Regarding the competitive analysis I did, the outputs were a diamond shape, carat, ring head, mounting, metal, and colours

  • Although, none of the competitors had used these in the right place!

 

  • They messed up the page with testimonials, many images, world shopping and a return policy, but I decided to consider all the users' requirements in the interviews, including side setting, ring engraving, and size guide, along with 3 images on the ring display.

  • In this part, after analysis, I recognised that it is mandatory to show the product again along with the carat, details, and images on the review page because they can peek at the product again and change it if they choose the incorrect item.

  • Likewise, I comprehended from our interviews that users consider refund and exchange, GIA diamond (certificate), and estimating the delivery day.

Screenshot 2022-09-02 at 14.55_edited.jpg
Screenshot 2022-09-02 at 15.12_edited.jpg
  • After the analysis, I placed some common items on the website, including collection, metal, price, category, and colour

  • Furthermore, I decided to add Metal carat on this page because I reached this conclusion from the interviews.

Define

Define

It was time to accumulate the information gathered during the Empathise stage.

 

I then analyse my observations and synthesise them to define the core problems I, and our team have identified. 

I created a persona to help keep our efforts human-centred before proceeding to ideation.

The reasons for choosing Sophie as a persona are that, according to people's responses in the survey and the interview, I reached the points that created Sophie's character.

Persona

Screenshot 2022-08-09 at 16.10.01.png

User Flow

Scenario

Our user scenario simply describes a basic story of an action that our user wants to accomplish.

 

So, today Sophie tends to order a ring on the online website for herself by her husband (Charles) for their wedding anniversary.

IMG_3479.PNG

Information Architecture

A project-based approach to competitive analysis, as well as research and card sorting, led us to positive results in information architecture.

 

I interviewed 14 users with open card sorting method, which has been applied in different categories with prioritizations and personal choice of users for the ease of using the site.

Sitemap

Card Sorting Process

According to the interviews I conducted with 14 people, the card sorting process was accomplished with the same users:


​​​Step 1: I documented each idea in Miro on a separate sticky note

Step 2: I looked for ideas that seemed to be related in some way and placed them side by side

Step 3: I began a discussion with our team

Step 4: I Combined groups into "supergroups"
 

IMG_3471.PNG
IMG_3473.PNG
IMG_3470.PNG

The most important super groups are:

  • Customise 

  • Landing page     

  • Handmade

  • Services

  • Return policy

  • Exchange

  • Engrave

Ideate

Ideate

Now, we were ready to generate ideas.  A solid background of knowledge from the first two steps when we started to "think outside the box", looking for alternative ways of looking at the problem and identifying innovative solutions to the problem statement we had created.  

Brainstorming was particularly useful, we organised output from a brainstorming session:

 

  • Collected our ideas, found a task, and created a persona

  • Developed our ideas related to wedding rings

  • Focused on wedding jewelry and customised

  • Demonstrated other jewelry, apart from rings

  • Designed creativity in Hero image

Prototype

Prototype

The aim was to identify the best possible solution for each problem found. 

 

I designed some Low-Fi - Mid Fi versions of the product (or specific features in the product) to test the ideas we had generated. These included my sketches of prototyping.

Sketches and Low Fi Design

I started my sketches with low fidelity.

photo_2022-08-05 21.09.44.jpeg

Home page 1

IMG_3481.JPG

Home page 2

IMG_3480.JPG

Customise page

Wireframes and Mid Fi Design

Screenshot 2022-09-19 at 14.32_edited.jpg

1

1

3

5

2

4

Second Home page 

Screenshot 2022-09-19 at 11.50_edited.jpg

My wireframes are in the mid-fidelity section, which was changed based on the interviews and card sorting.

  1. Added Why Custom & Best Seller

  2. Applied testimonial section (Review)

  3. Demonstrated our branch

  4. Illustrated our services

  5. Modified some items in the footer section

Screenshot 2022-09-19 at 14.33_edited.jpg

First Home page 

We provided many items for users to have more choices to customise. The items include:

 

  1. Diamond shape,

  2. carat,

  3. ring head,

  4. mounting,

  5. metal,

  6. colours,

  7. side setting,

  8. ring engraving,

  9. size guide,

  10. 3 images on the ring.

Screenshot 2022-09-19 at 11.51_edited.jpg

10

1

2

3

4

7

5

6

9

8

Second customise page 

First Customise page

Mood Board

We started our design project with a mood board and got ideas from The Handmaid's Tale series, baroque paintingsLotus flower, and luxury brands like Rolex and Omega.

Our mood board helped us create a collection of approved images, patterns, and colours and save time on managing opinions and approvals down the line. 

Screenshot 2022-08-08 at 13.42_edited.jpg

UI Kit

We created a UI kit that includes all the elements, colours, typography, and icons, that our team utilised in this project.

Screenshot 2022-08-08 at 13.42_edited.jpg
Test

Test

Our final prototype is the result of over 10 different ideas and failures.

try-and-fail-iteration-handwritten-illustration-125848755_iconl_nowm_edited.jpg

Usability Test and Iteration

Stage 1

One of our complex challenges was choosing the Hero image! We were looking for a photo which possesses:

  • Different genders

  • Skin tones

  • The uniqueness and elegance of the jewellery

  • The formality of the website to the users

Screenshot 2022-08-08 at 18.58.54.png
Screenshot 2022-08-08 at 18.46.05.png
Screenshot 2022-08-08 at 18.57.37.png
Screenshot 2022-08-08 at 19.40.55.png

Stage 2

One of our notable challenges in this section was enabling us to bold the jewels in the hero's image, and by signalling to the user, they can quickly enter the collection section.

Screenshot 2022-08-08 at 20.19.59.png
Screenshot 2022-08-08 at 20.22.48.png
Screenshot 2022-08-08 at 20.23.24.png

We came up with different bullets, circles and patterns using micro-interaction, but finally, we achieved this feature with numerous usability tests.

Stage 3

In the testimonial section, we applied monochrome and checkered designs to illustrate their uniqueness, but we have not gotten a positive result from the checkered design in the usability test because it confused the user.

Screenshot 2022-08-09 at 17.06.57.png
Screenshot 2022-08-09 at 17.08.03.png
Screenshot 2022-08-09 at 17.05.56.png
Screenshot 2022-08-09 at 17.25.36.png
Screenshot 2022-08-09 at 17.14.25.png
Screenshot 2022-08-09 at 17.29.45.png

Stage 4

In the category section, we first utilised product images without a specific background. However, in interviews and usability testing, we figured out that the user needs to imagine wearing the products differently to purchase luxury and uniqueness.

Screenshot 2022-08-09 at 19.07.06.png

As a result, we have considered demonstrating our products like human models so that the user can interact more with the product.

Screenshot 2022-08-09 at 19.08.22.png

Stage 5

This part was one of my substantial challenging responsibilities. I spent hours and days designing and doing usability tests to satisfy users.

 

  • First, I did the low and mid-fidelity sketches

  • Then I tried to adjust the sketches on the page

  • After that, I set the price item for the rings and their variety

  • Finally, in the ring selection, I designed a frame and component to interact with the user

Screenshot 2022-08-31 at 17.24.24.png
Screenshot 2022-08-31 at 17.39.22.png
Screenshot 2022-08-31 at 17.22.17.png
Screenshot 2022-08-31 at 17.39.29.png

Implement

Desktop Version

The final version of our desktop, which has been completed and is ready to be launched, was presented in front of more than 50 people and received positive comments.

Mobile Version

The final version of our desktop, which has been completed and is ready to be launched, was presented in front of more than 50 people and received positive comments.

What I have learned?

  • During this time, I tried my best to manage the team, and improved teamwork, retention and time management.

 

  • Meanwhile, as a team leader, I learned that stability and dedication in the team and cooperation between team members is the most notable factor for success in the project.

 

  • I improved my proficiency in preparing interview questions.

 

  • To gain a sufficient understanding of the users, I spent hours and days studying and unceasing endeavoured how to approach problems from their perspective.

 

  • In the end, with a lot of effort and patience and having a great team, I enabled satisfying users' requirements to the desired extent.

Next Step

In the end, we decided to share this website with developers to launch it as soon as possible.

bottom of page