Melorin

We designed and built a brand new custom website to help our clients lunch their new jewelry online business. Melorin is connect with its audiences and it has coherent visual language.  

My Role Interaction Design,
UI Design,
Prototyping,
Web design
Technology Photoshop, XD,
Figma, WordPress
Type Responsive Website
OVERVIEW

With the outbreak of COVID-19 that forced all of us to stay inside, many turned to online shopping as a way to spend time. Because of this, online fashion retailers saw a dramatic increase in revenue during the pandemic. The fashion e-commerce industry accounted for approximately 29.5% of the sales in the United States in 2020 according to an article in Medium. Although we think online shopping can be very easy and go through with clicking a button, it has numerous problems. To go through the process To develop this particular responsive website, I chose to use the Design Thinking approach. Following the steps helped me get educated about the fashion e-commerce industry before I proceeded to analyze the problem and ultimately come up with a product solution. 

PROJECT GOALS
  • Making a joyful shopping experience for users
  • user can brows and filter their jewelry section base on their own performance
  • user can have an access to best of each category through minimum click
THE CHALLENGE

For attempt to minimized cost, time and effort we decided to use pre-made theme or template. But after looking wide we realized we can't find a theme which captured right interface and show how unique this brand is AND made the content essay to edit. We agree to design a powerful and high end custom website that could scale up our clients online business.

OUTCOME
DESIGN PROCESS

RESEARCH    ⇒    DEFINE    ⇒    IDEATE    ⇒    PROTOTYPE    ⇒    TEST    

RESEARCH

CLIENTS INTERVIEW

First, we interviewed our clients , Melorin's owners. They gave us an in-depth look at the brand and business, explaining the challenges they face, and their future ambitions, plans, and projections.

USER INTERVIEW

We needed to gain better insight into what features and functionality in other e-commerce websites were crucial to our users. I conducted user interviews to have a deeper understanding. Some of the results were

  • four out of five participants noted customers' reviews helped them for having a better shopping experience.
  • three out of five participants discussed seeing the jewelry on a real model and a different tone of skin color was helpful. 
  • Three out of five participants were motivated to shop online because of its convenience and wide range of selection.
  • three out of five participants discussed how helpful can be a website with filters.
COMPETITIVE ANALYSIS

To better familiarize ourself with the product and industry, We dove straight into research, analyzing competitors (both direct and indirect), as well as conducted interviews, to better understand firsthand about those looking to buy jewelry. The competitor analysis below briefly summarizes the different features of competitors competitors. Doing so made it easier to figure out the commonly sought-after features for e-commerce websites.

 

What did we get from competitive analysis?

  • Improved UX 
  • Added ‘last chance’ section
  • Clear CTAs

 

RESEARCH    ⇒    DEFINE    ⇒    IDEATE    ⇒    PROTOTYPE    ⇒    TEST    

DEFINE

PERSONA

Next, we created user personas to better understand users’ behaviors and goals of interacting with the product effectively. we created a few themes and group the users who personify those themes together. We continuously referred to the persona throughout the design process to support the design decisions and priorities.

RESEARCH    ⇒    DEFINE    ⇒    IDEATE    ⇒    PROTOTYPE    ⇒    TEST    

IDEATE

USER FLOWS

With the problem statement in mind, I developed a task flow to show the ideal flow that the user would take to complete a task on Melorin’s website. In this particular case, it focused on finding and purchasing a product from the website. Working on this helped me identify the key screens for my design.

view work