top of page

Der Mond

UIUX Ecommerce Usability Optimization and Redesign E-commerce Website

PROJECT OVERVIEW

Der Mond wants to revamp its website to look elegant and simple, providing the same sense as global super brand websites. Additionally, the goal is to improve the traffic to their website.

PROJECT GOALS 

1. Increase customer acquisition by converting more visitors into buyers.

2. Collect better data in order to provide users with better personalization.

3. Reduce number of clicks and increase call to actions.

4. Increase brand engagement from better visuals and interactions.

KEY CONSIDERATIONS 

1. The design should be modular and flexible - this include messaging, imagery, and overall flow. 

2. Balance the information for users to understand, the number of steps in the flow, and the amount of data collected with the ease of getting through the flow quickly.

Role: UI/UX Designer

As I worked as UIUX designer for a brand consulting company, I led this project from research and wireframes to interactive prototypes and final design. I worked alongside my team to redesign our clients existing e-commerce website using best practices.

RESEARCH + DESIGN PROCESS

image.png
image.png
Screenshot 2023-11-24 234457.png
hh.png

Site audit in strategy deck

RESEARCH, SITE AUDIT +  IDENTIFY PROBLEMS

I took a research and audited our client's website, together with observing customers by recording screens. As a result, we have listed several issues on the current site that could potentially hinder the brand from achieving its goals with customers, and mapping with our ideas from competitor analysis to see if it helps to let the new version achieving the business goals. 

image.png

Existing user flow

image.png

Revamped user flow

IDDRESS ISSUES

Poor Navigation:

  • Complex or confusing navigation structures

  • Lack of clear pathways for users to find information

Cluttered Layouts 

  • Overcrowded pages with too much information

  • Poor hierarchy of content and lack of visual organization

Inconsistent Design

  • Lack of a cohesive design language across the website

  • Prioritizing aesthetics over clear and informative content

Not leveraging analytics tools for insights

screencapture-dermond-co-th-2023-11-24-14_59_41.png

Existing Version Website

ANALYZING RESEARCH

Analyzing the research from our discovery phase, we realized that there was a huge opportunity to streamline multiple aspects of the website - including the home page, primary navigation, category pages, and product pages. 

QUESTIONAIRE POPUP

I have created a style quiz that focuses on generating personalized results for each user based on the product attributes and subcategories they have selected. These attributes and subcategories align with Der Mond's current inventory and are subject to seasonal updates. By prompting users to define their style through these answers, the brand can begin collecting data on preferences from both existing users and potential buyers who engage with the onboarding flow. This data will help inform the merchandise purchasing strategy.

Group 1719.png

DOUBLE NAVIGATION

Existing Navigation

By streamlining the main navigation - we were able to have our client's customers reach their desired page in two clicks instead of five.

 

Originally the e-commerce UX  met users with a splash page of shop categories. I improved the efficiency of navigation and lowered the customer bounce rate by designing a full-width dropdown, allowing users to easily jump from one category to another from anywhere within the site.  Once users pointed their cursor to each category, the next section will automatically opened, this way users have to only click viewing the product's details if you are considering to buy it right away.  

screencapture-dermond-co-th-2023-11-24-14_59_41.png

Secondary

Primary

2.png

Normal State

New Navigations - Screen Mapping

shop2.png

Browse State

3.png

Select State

REDESIGNED HOME PAGE 

I have streamlined the homepage by analyzing the previous user flows. In this new version, the information of each content has been prioritized in a new layout, making it clearer and easier for users to understand.

CUSTOMIZE YOUR OWN STYLE

I have added a new feature to the website that allows users to play and customize their own jewelry. This not only educates users about the brand's products but also increases the time spent on the page and enhances the likelihood of customer purchases.

Home Page Layout

Group 1724.png

Customization Feature

PLAYFUL UI ON BRAND STORY PAGE

I have redesigned the brand's story by implementing interactive functionality in the user interface on the page. This aims to increase the time spent on the brand story section, making users feel more engaged while educating them about the brand.

Frame 3.png

SHOPPING PAGE

The previous version of the shopping page had various issues, including the difficulty for users to self-select a product because each jewelry product was split into different pages. This required users to click through several pages to enter another category and view products. Furthermore, there were only three filter options. In response, we have added more filter options to help users search for their preferences more accurately.

We designed two versions of the filter features, one at the top and another on the left side. We then conducted A/B testing on Google Optimize to measure the duration per session and collect feedback from users. After the test, we decided to place the filter navigation bar on the left because most users expressed a preference for left-aligned navigation, and the duration per session was longer.

Left-opened filter navigation bar

abtest2.png

Now users could directly co-relate the product within one page. 

We solved this by streamlining the users ability to self select + explore products by using the filters functionality on the left side in order to find their interests quicker.  We also added interactions to each images as when users hovered their cursor to the lists, each products will increasing the size for users to view the details right away.  More over, we also designed the checkout page as a popup page, this way, it will makes the journey of customers go very smoothy without feeling interrupted. 

Click-to-open filter navigation bar

abtest.png
buy.png

Testing Results 

Internal testing has been integral to refining our design decisions. Feedback from stakeholders, designers, and select users has been overwhelmingly positive.  Specifically, 25 number of participants provided feedback, and 80% expressed heightened satisfaction with the enhanced design, emphasizing a more intuitive and enjoyable shopping experience.

Expectations and Projections

 

With the implementation of our refined UX/UI design, we aim to engage approximately 12,000 users or 20% within the first 3 months after launch. This projection is based on industry benchmarks, market research, and an analysis of our current user base. We anticipate that the intuitive design improvements will contribute to a 10% increase in user engagement, fostering a deeper connection with the brand and translating casual visitors into repeat customers.

 

Aligned with the anticipated increase in user engagement, we project a corresponding growth in revenue. With our refined UX/UI design, we aim to achieve a 10% increase in conversion rates and an increase in the average order value (AOV) by 5%. This estimation considers the potential impact of a more engaging and user-friendly digital storefront.

bottom of page