one sec

Fred Lake

Crafting a better user experience and reducing purchase time for an eCommerce website

Fred Lake

Crafting a better user experience and reducing purchase time for an eCommerce website

Fred Lake

Crafting a better user experience and reducing purchase time for an eCommerce website

Fred Lake

Crafting a better user experience and reducing purchase time for an eCommerce website

Try scrolling

Who is Fred Lake?

Fred lake is a retailer for everything involving stamps, embossers, and office supplies in Dallas, TX

What was Kish's role?

As one of 2 UX Designers, Kish

  • conducted thorough user research to map out Fred Lake's target audience and their pain points
  • built a complete prototype of new app design to hand off to development team
p-colour1, p-underscore, p-hover, p-sthrough, draggable, ix-avoid, ix-explosion, Webflow

Who is Fred Lake?

Fred lake is a retailer for everything involving stamps, embossers, and office supplies in Dallas, TX

What was Kish's role?

As one of 2 UX Designers, Kish

  • conducted thorough user research to map out Fred Lake's target audience and their pain points
  • built a complete prototype of new app design to hand off to development team

Project Duration: 

Jun 2020

-

Sep 2020

Heading 1

Heading 2

Heading 3

Heading 4

paragraph

Heading 5
Heading 6

Text Link

Quote Block
  • List item
  • List item 2
  1. Numbered List Text Link
  2. Numbered List item 2
Hi

Image + Caption
No items found.

Let

'

s get into it

.

Let

'

s get into it

.

In early 2020, the world was hit hard by an infectious disease known as COVID-19.

People all aroung the world were forced into quarantine and the world was changed forever.

As a result, the retail industry took an extraordinary hit.

Sales were down due to consumer concerns of contracting the virus, and consumers were forces to navigate unknown territories.

63%

of shoppers were at some point fearful to shop at grocery stores in 2020.

(C+R Research, 2020)

80%

of Americans have yet to return to their pre-COVID levels of comfort about everyday out-of-the-house activities

(McKinsey, 2020)

+15,500

stores closed in the U.S. in 2020 due to global pandemic.

(Forbes, 2020)

The existing website was frustrating customers and obstructing their ability to purchase.

Having fielded many complaints and spend enough money trying to mitigate its issues, the owner felt it was time to upgrade the website.

Thus, the owner met with two budding UX Designers to redesign his website.

The Old Site

Owner and customers noted difficulty with

  • Navigating the website
  • Selecting the right product
  • Contacting customer service
  • Making their purchase efficiently

The Old Site

Owner and customers noted difficulty with

  • Navigating the website
  • Selecting the right product
  • Contacting customer service
  • Making their purchase efficiently

Thus, the challenge was

How might we enable customers to find the right products more easily, and checkout more quickly?

Interviews with Customers & Stakeholders

By speaking to the customers, owner and employees, such as those from the help desk, customer pain points and needs were elucidated and customer reports validated. Insights below

Analyzed Customer Data

Using recent customer data, a thorough analysis was done to begin constructing a picture of the average user. Information like purchase size, number of orders, and purpose for buying.

Empathy Map

The above insights were translated into an empathy map to try to understand the emotional experience and needs of users.

Personas

Personas were crafted to create concise summaries of the prototypical user and their pain points

40%

of customers are corporate entities

34%

of customers only buy 1 item

35%

of customers will call and ask for help, either in finding a product or while checking out

$300

spent per purpose (on average)

Interviews with Customers & Stakeholders

By speaking to the customers, owner and employees, such as those from the help desk, customer pain points and needs were elucidated and customer reports validated. Insights below

Analyzed Customer Data

Using recent customer data, a thorough analysis was done to begin constructing a picture of the average user. Information like purchase size, number of orders, and purpose for buying.

Empathy Map

The above insights were translated into an empathy map to try to understand the emotional experience and needs of users.

Personas

Personas were crafted to create concise summaries of the prototypical user and their pain points

Idea Prioritization

With an understanding of user’s needs and the current website’s challenges, potential features that would address these were laid out. Using an Idea Prioritization Map, the most important and feasible solutions were finalized.

Idea Prioritization

With an understanding of user’s needs and the current website’s challenges, potential features that would address these were laid out. Using an Idea Prioritization Map, the most important and feasible solutions were finalized.

Wireframes

With some core solutions identified, wireframes were created.

Solution #1 - Reorganized Homepage

The home page was cluttered and inefficient. The solution flipped and reorganized the content so the products were primary, and the about the company info was secondary and easier to read.

Solution #2 - Simpler Item Selection Tools

The existing resources available to find the right product were confusing to say the least. Rather than use a 3rd party pdf that required the user to make a lot of decisions a simple filter tool was implemented to narrow down item results

Solution #3 - Live Chat Help

Rather than have a form as the primary method of contact, a live chat tool was designed to help solve the primary customer problems.

Clickable Prototype

This prototype simulates the average customer’s average interaction with the website. It was presented to stakeholders to emphasize areas of the website that could optimized to improve users’ experiences. (embedded prototype only visible on desktop)

The Final Site

The prototype was handed off to the web development team and is currently being developed. Find the link to this almost live site to the left.

Wireframes

With some core solutions identified, wireframes were created.

Solution #1 - Reorganized Homepage

The home page was cluttered and inefficient. The solution flipped and reorganized the content so the products were primary, and the about the company info was secondary and easier to read.

Solution #2 - Simpler Item Selection Tools

The existing resources available to find the right product were confusing to say the least. Rather than use a 3rd party pdf that required the user to make a lot of decisions a simple filter tool was implemented to narrow down item results

Solution #3 - Live Chat Help

Rather than have a form as the primary method of contact, a live chat tool was designed to help solve the primary customer problems.

Clickable Prototype

This prototype simulates the average customer’s average interaction with the website. It was presented to stakeholders to emphasize areas of the website that could optimized to improve users’ experiences. (embedded prototype only visible on desktop)

The Final Site

The prototype was handed off to the web development team and is currently being developed. Find the link to this almost live site to the left.

Before

After

Outcomes based on initial user testing

Reduced purchase time by 50%

  • Based on both in house tests and those given to some beta users, the time it took to move from locating an item to checking out was cut in half. This was an excellent outcome because it indicates a more streamlined purchase experience, and more ease in locating items.

(Hope to) Increase conversion

  • The site is not live, so no conclusive data is yet available, but based on initial data from testers and visitors, the website is clearer, easier to navigate, and more conducive to actually helping someone checkout.

Reduce customer complaints ~ Improve user experience

  • One major goal of the project was to help customers navigate the website wit more ease, and reduce the frequency of calls needing to be made to get a question answered. Based on preliminary user tests, this goal was achieved.

Learnings

Constraints are real

  • Throughout the team's design process, the development and budget constraints of Fred Lake defined how inventive the design solutions could be. This was not fully understood in the beginning, which definitely lead to some wasted ink and frustration. It is important to grasp the scope and resources of a project before designing solutions.

Personas help

  • Throughout the design process, the personas really helped tie the solutions to 'real' people and their needs. It's challenging to refer to user research alone, so having them distilled and personalized via personas ensured they were incorporated into the final design.

Sketches do more good than harm

  • Kish and his partner jumped straight from initial design ideas to wire framing. This made the designing process a lot more difficult, because iterating through many ideas and experimenting with different layouts  is way more time consuming digitally versus on paper.
  • There's no rush to jump into wire framing, and sketching will probably end up saving time at the end anyway.

Designs get lost in translation when developed

  • Seeing the product that the web development team produced, and more so its misalignment from the initial designs given, indicated how difficult some aspects of a design may be to implement

Outcomes based on initial user testing

Reduced purchase time by 50%

  • Based on both in house tests and those given to some beta users, the time it took to move from locating an item to checking out was cut in half. This was an excellent outcome because it indicates a more streamlined purchase experience, and more ease in locating items.

(Hope to) Increase conversion

  • The site is not live, so no conclusive data is yet available, but based on initial data from testers and visitors, the website is clearer, easier to navigate, and more conducive to actually helping someone checkout.

Reduce customer complaints ~ Improve user experience

  • One major goal of the project was to help customers navigate the website wit more ease, and reduce the frequency of calls needing to be made to get a question answered. Based on preliminary user tests, this goal was achieved.

Learnings

Constraints are real

  • Throughout the team's design process, the development and budget constraints of Fred Lake defined how inventive the design solutions could be. This was not fully understood in the beginning, which definitely lead to some wasted ink and frustration. It is important to grasp the scope and resources of a project before designing solutions.

Personas help

  • Throughout the design process, the personas really helped tie the solutions to 'real' people and their needs. It's challenging to refer to user research alone, so having them distilled and personalized via personas ensured they were incorporated into the final design.

Sketches do more good than harm

  • Kish and his partner jumped straight from initial design ideas to wire framing. This made the designing process a lot more difficult, because iterating through many ideas and experimenting with different layouts  is way more time consuming digitally versus on paper.
  • There's no rush to jump into wire framing, and sketching will probably end up saving time at the end anyway.

Designs get lost in translation when developed

  • Seeing the product that the web development team produced, and more so its misalignment from the initial designs given, indicated how difficult some aspects of a design may be to implement