▶-Page-1-High-fid-project2 (1)_macbookpro15_front.png
 
 

Ecommerce Sport Store

Overview

Goals

Our class project was to improve an ecommerce sports store that was forced to move to online retail due to Covid-19, I was assigned the Brand Sports Authority.

Role

UX/UI Designer

Tools

Figma, Miro, Adobe Illustrator, and Google

Challenges & Solution

Challenges

Due to Covid-19, Sports Authority had to move to online retail and was getting visitors to their website, but they needed more order completions. They also wanted to showcase their products while maintaining the brand image: “small shop” appeal and great customer service.

Solution

Creating a way to donate and support local causes through promotional items so customers complete more purchases.

Research

Why a donation model?

I thought of Brands like Toms Shoes and The Cash app and how they donate to certain causes. I found a Cone Cause Evolution Study that shows:

  • 85% of consumers have a more positive image of a product or company when it supports a charity they care about.

  • 83% of Americans wish more of the products and services they use would support charities.

  • 80% of Americans are likely to switch brands (equal in quality and price), to the one that supports a charity.

donationgraph2.jpg

When choosing between two companies that each benefit a cause and sell the same product, similar in price and quality, 54% Americans would rather support a company that supports a cause that is relevant to them.

 

What is Fredericksburg, TX?

I did not know anything about Fredericksburg Texas before this project. I had an interview with an Austin resident who visited Fredericksburg frequently and her favorite aspect of the town was the location and beautiful hillside country. They have a lot of wineries and a popular downtown that gets a lot of tourism. They have a big retirement community being the number spot to retire in Texas. Another popular attraction is the National State Park Enchanted Rock which is frequented by bikers.

Beautiful Texas Landscape

Beautiful Texas Landscape

Wine Country

Wine Country

#1 Retirement Spot in Texas

#1 Retirement Spot in Texas

Biking Community

Biking Community

Personas

User Goal

Kurt a retiree wants to keep in shape with new sports equipment and wants to buy new gear from his local sport store. Due to the Covid-19 pandemic, his local shop is now closed and needs an online retail shop that provides the same Fredericksburg aesthetic he loves, while supporting the local community.

 
personakurt.jpg
personaannie.jpg

Ideation

Preliminary Sketches

I sketched out what might the homepage, how the products were displayed, and product page with the add to cart feature.

Homepage

Homepage

▶-Page-1-2nd-project (1).png
Displaying products

Displaying products

%E2%96%B6-Page-1-2nd-project+%283%29.jpg
Add to cart & product page

Add to cart & product page

▶-Page-1-2nd-project.png

What promotional items to use?

sportbottle2.jpg

I wanted to use the most cost-efficient promotional items that would be available in a sports store.  I chose a water bottle since they have a low cost and they can be used for every sport.

 

What does the navigation look like?

To determine the navigation, I performed an open card sort with six different users. I found some people separated the different products by sport, seasons, location, and by men’s, women’s and kids. I designed the navigation so I could separate the products out by sport, location and by men, women and kids.

▶-Page-1-High-fid-project2 (1).png

How can I add a Texas hillside landscape in the design?

I interviewed an Austin resident that frequents Fredericksburg and her favorite aspect of the town was the landscape. I sketched out some cacti and types of rock formations from some Fredericksburg photos. Then I created a Texas landscape in Adobe Illustrator for the footer.

texas hill country sketch.jpg
landscapestx.jpg

Testing & Improvements

Testing Results

I tested five users on six different tasks and found that the most confusion was around the adding products to the cart button and when you purchased an item, there was no feedback telling you a purchase has been made.

Frame 18 (1).png
 

Improvements After Testing

After my user tests I found I needed to

  • Add shipping prices in the payment process.

▶-Page-1-High-fid-project2 (3).png
  • Add icon to shopping cart when products have been added

%25E2%2596%25B6-Page-1-High-fid-project2%2B%25282%2529.jpg
  • Added a pop modal to show when a purchase has been made.

▶-Page-1-High-fid-project2 (4).png