AJSINGULARITY | Jackhe

Project: Fashion Forward E-commerce Platform for AJ Singularity Corp

Member: Jieming He (Jack), Jacky Mak, Steve Lee

Role: Web + UI/UX Designer

My responsibilities were -

> Synthesizing User Feedback

> Conducting User Research

> Performing User Testing

> Creating User flows, Wireframes and Mockups

Tools: Figma, Google Suite, Adobe Creative Suite

Goals/Objectives

The main goal was to develop a visually appealing and user-friendly online platform that simplifies the shopping experience and encourages transactions. The site was designed to present comprehensive information on apparel quality, supporting customers in making informed purchase decisions and positioning the brand for online retail success.

Problem Statement

Before the redesign, AJ Singularity Corp's online presence was failed to attract significant customer engagement or sales. The existing website was not optimized for mobile devices, making it difficult for users to navigate and complete purchases on phones or tablets. Additionally, the product information was not effectively presented, which often left potential customers unsure about the quality and details of the apparel offered. This lack of functionality and appealing user interface was hindering the brand ability to compete in the bustling online retail market.

Solutions

Optimized Mobile Experience:
We redesigned the website to be mobile-friendly, improving navigation and ease of use on phones and tablets.

Enhanced User Interface:
The new layout provides clear direction for users, making it easier to find and purchase items. Additionally, we made the checkout process for a smoother, more efficient experience.

Double Diamond Design Process

We used the this design process, starting with user research and competitive analysis to identify key issues. We then defined the problems, brainstormed solutions, and created wireframes and prototypes. After iterative user testing and refinement, we delivered a high-fidelity, optimized mobile shopping experience.

Research

User Surveys and Feedback:

Research Goals

We aimed to deeply understand user behaviors and identify pain points in the shopping journey on our website, focusing on visual also on improving product discovery, and the checkout process to ensure a smooth shopping experience for all users.

Survey

To begin our research, we created a survey aimed at our primary audience, asking critical questions about their shopping experience, what are the features they like, and also other like navigation difficulties, satisfaction with product information, and ease of the checkout process to pinpoint improvement areas; we gathered insights from 22 responses,

User Interviews & Testing

Next, we conducted in-person user interviews and testing to understand their actual interactions and reactions to the current website; We conducted comprehensive user research with a total of 7 people trying out the current website to see how it really works in action.

Research Data Analysis

We sorted the research data by grouping similar findings together using affinity mapping. This method helped us see the main themes by discussing and organizing our observations into categories.

Key Feedback

Landing Page Confusion: "It's really confusing right when you land on the page. The info isn't clear at all, and it's hard to figure out where to go next."
Product Details: "The product descriptions is easy to read and understand, however the details aren’t helpful. Would like to see size and return policy more than just descriptions of the product. I want to know more about what I'm buying."
Complicated Checkout: "There are way too many steps to check out. It feels like they’re making it harder on purpose. It should be a lot simpler."

Below are the full views of the Navigation from landing page to checkout page in mobile views (Before the redesign)

Market Analysis Highlights:

In the next phase, we conducted a competitive analysis, we checked out 3 big clothing companies and 3 small brands that are align to Aj Singularity Clothing style, to see what can learn from them. We looked at the following:

Features

How easy is it to find specific items?
Do they have high-quality photos and product details more than just a product description?

User experience (UX)

Is it easy to find what you're looking for? Is the app layout intuitive?
Is the checkout process smooth and secure? Does it offer multiple payment options?

Market Analysis From Competitors Highlights:

Noticed that all big companies competitors use large carousel ads at the center of their Landing page. We think that this ads are good designed to capture visitor attention immediately upon arrival.
Most of the competitors especially the big brands with high-quality photos, detailed descriptions, size charts, and customer reviews are commonly provided to help users make informed decisions.
Nike has a well-designed website with great interaction, making shopping easy and enjoyable for users.
Most have a smooth checkout where you can easily change your order, and they offer many ways to pay. One even has a one-click purchase with trusted payment options which is really convenient.

Ideation

User Stories

Gathered user feedback from surveys and direct interviews to understand their needs and preferences. Created user stories that with the users' perspectives

As someone who appreciates style, I expect the website to be visually appealing as well.
As a shopper, as soon as I land on the website, I want to know what your hottest product or biggest event is.
As a shopper, I want the website navigation to be super easy to use, just find what I'm looking for quickly.
As a shopper, I want to easily search for products by keywords so that I can quickly find specific items I'm interested in.
As a buyer, I want to see high-quality images also simple and detailed descriptions of products.
As a buyer, I want access to customer reviews and ratings on product pages.
As a busy user, I want to check out quickly with minimize the time spent on transaction processes.
As a first-time user, I want to see clear confirmation of my completed purchase.

Brainstorming Sessions Overview

The goal of our brainstorming sessions was to generate solutions to enhance user experience on AJ Singularity Corp’s business website after the what we got from feedback, what we learned from competitive analysis and user stories.

Key Innovations Proposed:

Product Discovery and Visualization
Shopping Experience (More focus on smooth check out)
Sticky Action Buttons for Express Checkout (New added feature what we came up with)

Sketching and Wireframes

We started with freehand sketches to quickly explore various design concepts. Sketches focused on key areas like the homepage layout, product discovery interfaces, and the checkout process.

After all the ideas through sketches, we moved on to creating wireframes. Wireframes helped in mapping out the navigation paths that users would take when using the website and detailed interactions on how users interact with the interface.

User Testing Findings (Post-Wireframe)

Our next step was to test our low-fidelity prototype with users, to identify any usability issues and gather feedback that could be used to refine the user experience before progressing to high-fidelity prototypes. We created a user testing task, we did 6 testing with users, with 5 tasks for the users to perform.

The users really liked our new style of the website, testing was particularly helpful as it allowed us to identify areas in the interface that need improvement to better meet user expectations.

Users liked the easy and fast checkout process, also the sticky button for express checkout!
Users had no problem finding the products they wanted.

However, the main findings from the feedback are as follows:

High-Fidelity Prototype

Based on what we learned from user testing, we revised the low-fidelity screens and then moved to the high-fidelity stage. Here, we added a visual layer to our wireframes to bring the product to life.

Style Guide: Simple and Luxury Athletic Wears

Next, we decided to embrace the company's philosophy of "Simple and Luxury" Athletic wears, introducing a new era with a theme of contrast.

High-Fidelity Screens

App walkthrough (Double Click on Videos For Full Screen)

To explain how the app works in an e-commerce scenario, let's use a story about Jason, who wants to buy a new hoodie online:

Discovering the Product:
Jason, a busy professional with a packed schedule, spots an ad for a cool reflective style men's black hoodie on social media and clicks through to the AJ Singularity Corp website. He quickly browses the website and finds the hoodie by searching keywords.

Viewing Product Details:

Jason is initially unsure about the hoodie, so he clicks on the images to view additional pictures and get a better look. The images help him decide. He finds the product that he likes and proceeds to read the product details. Satisfied, he easily selects the size and color and checks out for the next step.

Selecting and Editing:
At checkout, Jason can either fill out his shipping details or select express checkout for a faster and more trusted payment option. However, he decides to edit the size of the hoodie because he wants something smaller. Without having to go back to the previous page, he simply edits it and selects express checkout with trusted payment options.

Checkout Process:

He chooses PayPal, which directs him to log in, confirm, and pay the amount. He completes his purchase easily, wrapping up a smooth and satisfying shopping experience.

Results

Refinement:

Based on user feedback from usability testing, we made several adjustments to the design to address pain points and improve the overall user experience.

Key Refinements:

Larger Selectable Options:

Increased the size of selectable options, moving from half-layout frame to full layout frame for easier user interaction.

Pop-out Selectable Layout:

Changed the selectable layout into a smoothly pop-out, bigger design for the checkout page, allowing users to easily edit their items.

Launch:

After the launch, we collected ongoing feedback and monitored the platform's performance using analytics tools. This allowed us to gauge user satisfaction and engagement, leading to further refinements.

Results and Metrics:

Improved Conversion Rate:
After the launch, the redesigned webpage led to a more than 50% increase in conversions, click-through rates (CTR), and sales.

Enhanced Customer Engagement:
The redesign resulted in a significant increase in customer reviews post-launch. It was measured by comparing the number of reviews received on the redesigned product pages to the number of reviews received on the old product pages over a similar period.

User Research:

Through our extensive user research, we gathered invaluable feedback that guided our design decisions. Users expressed their satisfaction with the new, intuitive layout and detailed product information, which made their shopping experience more enjoyable and seamless. This positive feedback directly translated into a higher volume of reviews, as satisfied customers were more inclined to share their experiences.

Reflections and Future Directions

Learnings

I learned the importance of user feedback in the design process. By conducting usability testing and incorporating user suggestions, I was able to make meaningful improvements to the shopping experience. Even with high-fidelity prototypes, there is always room for further enhancement based on user testing results, ensuring the final product meets user needs and expectations.

Future Improvements

Moving forward, we aim to continuously improve the user interface based on ongoing user feedback. One key area for enhancement is the personalization of the shopping experience. By leveraging data analytics, we can tailor product recommendations and offers to individual users, making their shopping experience more relevant and enjoyable.

Continued Development

Integrating new technologies, such as augmented reality for Virtual try-ons. By staying agile and responsive to market trends and user needs, we will continue to provide a top-tier shopping experience that keeps customers coming back.

Click here to check out Virtual Try-Ons Project!

Thank you for taking the time to explore this project.
Your interest and feedback are greatly appreciated.

more projects

Omakase Restaurant Website Redesign

Website Redesign enhancing customer interaction with clear navigation and increasing booking conversion rates.

Jieminghe008@gmail.com

Goals/Objectives

Problem Statement

Solutions

Double Diamond Design Process

Research