Noellery logo
Redesigning a women's jewelry and accessories brand to optimize SEO performance and improve conversion rates.

CLIENT

Noellery

ROLE

Sole UX Designer
UX Researcher
Wireframes
Prototyping
Brand Development

TOOLS

Figma

TIMELINE

8 weeks

IMPACT

After the launch of the newly redesigned website, there was a significant increase in sales conversions.

Comparing sales data from the previous year, the increase was shown to be at 15%.

After 3 months of collecting and analyzing user interaction time, retention rates, and conversion rates, improvements in all three areas was shown to increase over time.
OVERVIEW

‍
RESEARCH

‍
IDEATE

‍
DESIGN

‍
TESTING

‍
FINAL

‍
OVERVIEW

Background

In this day and age, every business and brand has a website. Especially for those selling physical products, a website is an easy and convenient way for people to find and shop for the things they want. A well designed e-commerce website should help users find what they need and take them through checkout quickly and seamlessly. I reached out to this jewelry brand to offer my services in redesigning their website to improve their sales and performance goals.

Problem

Despite an already existing redesign of the Noellery website. There were many problems underneath that prevented conversion and retention rates. There were also UI inconsistencies and issues that made the website (and subsequently, the brand) appear outdated and untrustworthy.

Solution

Improve user flows that prevent customers from accomplishing their goals within the website. Improve and simplify the UI design and graphics. Redesign the homepage, products pages, search and filters, and FAQs page.

Jump to final design
View Figma Prototype
RESEARCH

Expert Review

The first step was to conduct an extensive review and audit of the website. I used heuristics and usability principles to determine major problems with the layout design and visual UI. Below are the main issues found on the homepage and product pages.

HOMEPAGE

*Click image to expand view.

NAVIGATION

*Click image to expand view.

FILTERS

*Click image to expand view.

Usability Testing

Next, I tested the website with users to help further uncover any issues and pain points while also validating the problems I had already discovered during the audit.

  • Each task took 2 - 3 minutes to complete. The checkout task took the longest.
  • Users felt that because of the inconsistencies and outdated look of the homepage, the website did not feel trustworthy or worth purchasing from.
  • The visual prompts and cues presented were inconsistent and confusing, extending the time taken to complete each task.
  • It was hard to tell what was clickable and what wasn’t, with ease of use features non-existent or not in the most common/useful location.
*Click image to expand view.

Competitive Analysis

I researched four competitors with similar products and customer base. I analyzed their website homepage content and structure to gain insights on successful features that could be implemented into the redesign.

  • A lesser known brand like ElectricPicks displayed more social proof than a more established brand like Baublebar or Mejuri.
  • All sites used color minimally or only used neutral tones.
  • All sites used more photography and model photos to establish color and visual consistency.
  • Buttons and other CTAs were either solid black/white or the primary color of the brand.
  • Text fonts were either very bold sans serif or thin Didot style serif fonts
  • Logos/wordmarks were minimal solid black.
Homepage layout structure

Personas

I created personas to wrap up the research phase.

IDEATE

PRIORItization

Because this was an actual website with multiple pages, I had to think about what pages to design for first.

Screens would be designed based on these main user flows:

  • Search for an item
  • Start and complete checkout
  • Find help/FAQs

Site Mapping

Because the business has a vast amount of products with different labels and tags; it was important to consider how to fit products into categories without creating too many options for users to have to search and click through. It was also important to add pages that were previously unavailable for users.

Original sitemap version
*Click image to expand view.
New sitemap version
*Click image to expand view.

User & task flows

I then created user and task flows to understand the actual process of how users move about the site and what potential tasks they can accomplish.

  • Searching for an item
  • Adding item to cart
  • Going through payment process
User flows
*Click image to expand view.
Task flows
*Click image to expand view.

project goals

I reviewed what I had learned and synthesized thus far to create project goals. It helped to keep these goals in mind when designing.

Sketching

Before creating wireframes in Figma, I started creating some initial sketches of wireframes and branding design elements. I sketched out key screens including the homepage and products pages to experiment on different layouts.

DESIGN

MID-FIDELity wireframes

I created mid-fi wireframes that could be tested for usability immediately. I designed mainly for mobile but did provide desktop mockups of the homepage and product page to test responsiveness. Users were tested with the mobile prototype.

HOMEPAGE AND PRODUCT PAGE
*Click image to expand view.
CHECKOUT
*Click image to expand view.

branding

After the first usability test, users had stated that the color gradient of the logo, especially on a small screen, was hard to see and make out clearly. Also considering the fact that many if not most other competitors use a solid black wordmark for a logo, I also decided to standardize the logo by making it solid black and getting rid of the diamond embellishment. It makes the logo more readable and clear.

The client has expressed that they like artsy and handmade-looking things and so had commissioned some artists. However, with the current state of those images, it only made the website look inconsistent and outdated. I researched modern line art to see if that could be incorporated into the design to keep the artsy look while being consistent, minimal, and modern.

LOGO
Solid black without diamond embellishment. Readable and better contrast.
COLOR PALETTE
Lightened and softened colors from original color palette for a more neutral and feminine feel.
TYPROGRAPHY
Changed from Poppins to Montserrat. This font style has more variation in weights with a more elegant appearance.
GRAPHICS
Previous images were inconsistent in style and contributed to the sites outdated look. I was able to use some of the original artwork to create clean line art. This also helped to match the script logo.
TESTING

Usability test #1

With the mid-fi wireframes I conducted usability testing using the same tasks for the usability testing of the original site. Compared to that previous test, there was major improvements in both time taken to complete as well as ease of use.

Hi-fidelity wireframes

Having finished the mid-fi testing and branding, designing hi-fi wireframes was easy. The only major changes from the overall layout was to increase spacing and touchpoint areas.

usability test #2

The goal of this test was to mainly get feedback on visual elements and UI. The same tasks were given, however the users were also encouraged to explore the website freely. Adding color and branding elements did not change users ability to complete tasks. There were some minor contrast issues but overall, the feedback was positive and not much needed to be changed.

FINAL DESIGN

Below is the mobile version of the Noellery website. Showcasing the homepage, search and filters, checkout, and the help page. Click the 'View Figma Prototype' button to view the desktop version as well.

View Figma Prototype

A cleaner and more enticing homepage experience

Designed a more cohesive homepage that incorporates the necessary items users are most likely to want to see and click.

Improved search and filters

Pages now have labels and have more intuitive filters to make it easier for people to find the jewelry they want.

Streamlined checkout

Improving the layout and flow of checkout to lessen confusion and get people through checkout faster.

Helpful resources and information

More comprehensive list of resources in the footer to provide helpful information for curious customers.
REFLECTION

Final thoughts

This was my first project as the sole UX designer with a real client. It put a lot of responsibilities on my shoulders as I was in charge of considering every aspect of the design process. Jumping into this project, I knew the client’s website needed a redesign. But as a UX designer, we can’t rely on feeling alone. Researching and gathering data was a big part of this project. Testing and getting feedback from users was also important of which I did constantly throughout the process. It gave me a better sense of purpose knowing exactly what would benefit both the user and the business.

MORE WORKS

Airbnb

Adding a group and split payment feature.

Remind

Designing an end-to end MVP that motivates users to reach their goals.

Inspirosity

A casual learning platform for users to explore and grow various skills.

cora tam

© 2024
Made in Webflow
LinkedIn
Email
Resumé