Case_Study_Attention_Grab1.png

my role

UX/UI Designer

General Assembly User Experience Design Immersive Remote

Project timeline

2-week sprint

areas of intrigue

User Research

Mid-fidelity Wireframing


PROBLEM

THE CAREFUL CRITIC NEEDS A PLEASURABLE E-COMMERCE EXPERIENCE BECAUSE THEY EASILY GET FRUSTRATED WHEN USING AN OUTDATED WEBSITE.

As the Covid-19 pandemic brought the world to a standstill in March 2020, small business retail brands quickly needed to move their business online, or sadly perish. With large corporations dominating the e-commerce delivery market, like Amazon, small businesses like Goedicke’s have needed to adopt e-commerce as the primary mode of generating capital.

Small businesses equally hold significance and popularity in comparison to large-scale retail corporations, but often lack the resources and infrastructure needed to survive in the current marketplace. Users are also very mindful of connecting the quality of an e-commerce site to the quality of its products. Therefore, I found it imperative to dig deeper and determine what needed to be accomplished to elevate Goedicke’s user experience and leverage the power of good design to help the business survive this global pandemic.

This got me thinking.

How might we showcase the brand’s ethos, pathos, and logos?


SOLUTION

building trust with the client through familiar e-commerce interactions

 

Improved information architecture

  • Modified navbar to include global navigation

  • The dropdown menu clearly guides users through secondary and tertiary navigation

 
Desktop - 3_macbookpro15_front.png
 

Clear communication with the client

  • Users are able to track their orders directly from their client profile

  • Improved iconography to give the site a more modern look and feel

Desktop - 2_macbookpro15_front.png
 

Proper merchandising of products

  • Dedicated product page with large image gallery, customer reviews, discount banners, and more.

  • Curated product pairings to boost business KPI’s

 
Desktop Home Template_macbookpro15_front.png

RESEARCH

the target user

Proto-Persona + Competitive & Comparative Analysis

As my proto-persona archetype was provided to me by my stakeholders, I endeavored to look into behavioral traits that would sway my ideal user to stay on my updated site. Important characteristics that I took into account were:

  • The user takes a long time to make purchase decisions

  • They thoroughly read through product descriptions and reviews

  • Compares multiple items and reads the in-depth product facts

Moving forward having the knowledge of the ideal user, I sought out to conduct a competitive and comparative analysis.

These were my findings:

P2.png
P2 (2).png
P2 (1).png
P2 copy.png

Upon reflecting on both the proto-persona’s needs and analyzing my findings from the competitive/comparative analysis, I was able to conclude:

  • Users appreciate intuitive information architecture

  • A seamless checkout process is highly desired

  • Clients like when a site offers them “frequently bought together” pairings

DESIGN

INITIAL IDEATION & DESIGN DIRECTION

As a rule of thumb, I always begin each design process with rough sketches. This allows me to think clearly toward the end goal while allowing myself to be open to change as I progress. These thoughts and iterations can be demonstrated on paper through a series of rough sketches. The quality and attention to detail put into rough sketches always translates to thoughtful digital designs when glancing back in retrospect.

rough-sketch-1.jpg
rough-sketch-3.jpg
rough-sketch-2.jpg
rough-sketch-4.jpg

After the initial rough sketches, my next step was to take the ideated frames and integrate them into a digital sitemap. This structure would then provide a foundation for additional elements to be added to the user flow.

P2_Flow1.jpg
P2_Flow2.jpg

The objective of both user flows was to integrate common usability features that users are familiar with. Simple gestures, such as logging into a client profile or checking on the status of an order, bring about a sense of modernity.

USABILITY TESTING AND PRODUCT IMPROVEMENT

KEY TAKEAWAYS FROM USABILITY TEST

% of Users vs. # of Clicks.png
  • 100% of users completed the purchase in under 1 minute

  • 33% of users used 11 clicks or more to accomplish the purchase

  • 67% of users used 10 clicks or less to accomplish the purchase

Based on synthesized data obtained from each usability test, there were common patterns that I found to bring friction to several of my users whilst shopping on Goedicke’s. These friction points impeded on creating a positive user experience. Taking away from what I had observed, I planned to reiterate on a few noted points:

  1. Form filling was not properly ordered to industry standards; billing address should not be on top

  2. Tracking should be quickly accessible from the site’s homepage

  3. Provide ample distance between the site’s footer and the rest of the page


mobile1_1.png
mobile2.png
mobile3.png

Mobile iterations were created for Goedicke’s e-commerce experience. However, due to project timing constraints from our stakeholders, it was imperative to primarily focus on the functionality of the desktop site first before finalizing the mobile experience.


FINAL PRODUCT & NEXT STEPS

After the final stages of creating the desktop mockup, I had concluded that moving forward with the digital product, I wanted to rethink the “add to cart” confirmation popup page, as users felt this would impede on one’s ability to shop without buyer’s remorse. Further, I felt the footer needed improvement, by adding integration of tracking an order directly from the bottom of the page.

Since a high-fidelity mockup was not entirely created, I feel this is the next step to take in order to fully deliver the updated product to Goedicke’s.

Desktop - 1_macbookpro15_front copy.png

check out the prototype