top of page

CUUP

Audit for New Feature and Responsive Direct-to-consumer Startup E-Commerce Website

What's in Store

  • Problem Space

  • Competitive Analysis

  • UX Audit

  • Next Steps

minimal-imac-mockup-with-a-colored-backdrop-1284-el.png

What's the Issue?

As a part of the UX Research team, my goal was to analyze and audit new and existing mockups based on UX best practices and heuristics using Abby's method.

The goal was to recommend design changes to the site for usability and new features that wouldn't change the look and feel of the site.

Through existing research, I know that users need to:

  • Find the new Fit Me quiz from anywhere in the site.

  • Know the color they are selecting when shopping for an item.

  • Know when they qualify for free shipping.

  • Distinguish shopping navigation from informational navigation.

Competitive Analysis

Main Focuses

  • Placements of shade names and Free Shipping qualifications and marketing.

  • Methods of advertising new shipping updates.

Major Findings

  • CUUP needs to add shade names to the shade selections on their product pages. Shade names are currently only findable in the URL.

  • CUUP should showcase new Free Shipping updates and qualifications on landing page and in the shopping cart.

FS_CUUP_CompAnalysis.png

UX Audit

Since our users reported in their interviews that they donate through their desktops and through organizations' desktop breakpoints of their sites​, our team focused on the desktop breakpoint of the Dorson website for wireframes and usability testing.

Main Areas of Focus

Main Areas of Focus:​

  • Findability

  • Communication

  •  Accessibility

  • Learnability 

CUUP Areas of Focus

  • Placement of CTA button for new Fit Quiz feature.

  • Placement of shade names with shade selections.

  • Placement of Free Shipping updates, qualifications, and messaging.

  • UX changes to make based on best practices and heuristics.

Fit Quiz

Major Findings

  • Fit Quiz CTA should be present on all bra product pages.​

  • CTA is separate from the main navigation of the site, so there needs to be more clarity in this messaging through the visual design and text hierarchy.

    • Even though it is not a part of the navigation, the Fit Quiz needs to still be accessible in the mobile breakpoint when going through the primary and secondary navigations.  Therefore, it should be included in this navigation overlay.

    • This can be done by spacing out the navigation from the Fit Quiz on the mobile navigation overlay, listing the Fit Quiz at the bottom and showing it as a button rather than another page option.​

CUUP Fit Quiz CTA Placement Annotations (2).png
CUUP Fit Quiz CTA Placement Annotations (1).png

Free Shipping

Major Findings

  • Free Shipping qualification status should be displayed or messaged in the shopping cart for clarity.

  • For controllability, a "Back to Shop" link should be added to shopping carts that do not meet the free shipping qualification.  Allows users to easily navigate back to the site if they want to meet that qualification.

  • New Free Shipping update should be present on the landing page.

  • New Free Shipping update should be broadcasted on all pages.

desktop - cart overlay - you qualify FS.png
desktop landing - fit quiz nav, cta, FS banner.png
desktop - cart overlay - $ away from FS w link back to shop.png

Product Shade Names

Major Findings

  • For accessibility, findability, clarity, and control, the shade names should be shown when a shade is selected and in an active hover state.

  • When including the shade names, visual hierarchy needs to be considered.

    • On product pages, shade names should be above the shade selections to show clarity in what is chosen out of all of the available options.​

  • Important to note: Shade names need to be accessible in placement, sizing, and color as well, so they are accessible to read and so text and page reading software can process and read them accurately.

desktop - balconette ink.png
IMG_4641 2.PNG

Site-Wide

Major Findings

  • Make some adjustments in terms of accessibility and findability, particularly with the text on the images. to make them readable.

  • Integrate more controllability from the user.

    • This can be done by including the Fit Quiz CTA and the Free Shipping information in the header for each page, or in the primary navigation overlay, on the mobile breakpoint.​

mobile landing - FS bottom banner.png
mobile - menu with fit quiz in nav.png

Next Steps

  • Research how to store data for Fit Quiz for registered users to refer in the future.

  • Conduct a full UX audit on responsive website.

bottom of page