My Website | E-Commerce Redesign
17881
single,single-portfolio_page,postid-17881,ajax_fade,page_not_loaded,,qode-theme-ver-6.5,wpb-js-composer js-comp-ver-4.4.3,vc_responsive

E-Commerce Redesign

Toys Et Cetera

PROJECT DETAILS

Time Frame: Two Weeks

 

Deliverable: Medium Fidelity Prototype on Invision 

 

PROTOTYPE

Toys Et Cetera is a Chicago based toy company that aims to deliver value the old-fashioned way. They promise to provide toys that are safe, developmentally sound, culturally sensitive, creative, constructive, and FUN! 

APPROACH

My first task was to explore the website as it would give me my first clue on how to approach my research. My first impressions of the current website:

 

• Dated

 

• Visually Busy

 

• Unclear Site Navigation

TOYSETC-LANDING-PAGE

Toys Et Cetera website – dated & visually busy.

METHODS

I wanted to delve deep into how people go about buying toys and what that experience is like for them. I headed to Toys Et Cetera in Chicago’s Andersonville neighborhood and spoke with the store manager about what set their store apart from their competitors. I also spoke with customers on how their experience was shopping there and their preconceived perceptions before they got to the store.

3 Personas

Affinity Mapping

Competitive Analysis

Contextual Inquiry

SYNTHESIS

Personas

3 personas were provided for us on this particular project, each with their own specific needs

Affinity Mapping

I used post-its to help visualize what people had to say about their shopping experiences and also what the personas that were given to us needed out of their shopping experience. Grouping statements and quotes that related to each other helped me to narrow down my focus and design direction.

Insight #1

Shoppers often need more information besides price and description to make a purchase.

Insight #2

Shoppers are experiencing a lack of clarity due to no clear way of navigation.

Insight #3

The in-store experience of being attended to during the shopping experience isn’t replicated through the online portal.

AFFINITYMAP

Affinity Map – Persona / Shopper Pain Points

Competitive Analysis

After analyzing user insights, I decided to look into layout comparisons of competitors websites. This would help me to figure out what other companies prioritize and how that might help Toys Et Cetera. I noticed that most retailers like to bring shoppers attention to the center of the screen with big hero images. This was an opportunity to fill that area with the main functionality of the experience I wanted to create.

Landing pages of four other major toy retailers

After close inspection of my personas and the insights I uncovered, it made sense to design for the user with the least amount of tech experience. This lead me to craft my problem statement and design direction. 

Problem Statement

 

While there are many ways to navigate the site, users experience a lack of clarity that makes them need a more personal way of buying items.

 


 

 

Design Direction

 

Solution should create a tailored way of buying items by providing support and attention to detail in order to accomplish customer satisfaction.

IDEATION

After gaining the insights I needed, I decided to ideate quick low fidelity sketches and mockups to help realize what I wanted to accomplish through my design.

Low-fidelity sketches

Usability – paper prototype

WIREFRAMES

E-COMMERCE-WIREFRAME-LOW

Low-fidelity wireframes

E-COMMERCE-WIREFRAME-MID

Low-Mid fidelity wireframes

MID-FIDELITY DESIGN

Although paper prototyping helped me to figure out transitions, I needed to see those on the digital screen. I used Adobe Illustrator to create each page and exported them to Invision to see how user flow would work out.

HOMESCREEN-1

Landing Page: Contains big greeting and iconography to help catch

shoppers attention

As shoppers choose how they want to shop they are walked through the entire process with distinguishable buttons and a bread crumb trail so they know there are a limited amount of options to get to the end of the filtering process.

What I observed in my research is that shoppers enjoyed the hands on approach they received during their in store experience. What I wanted to my solution to capture was the tailoring aspect of going into a store and receiving one-on-one attention from an associate.

HOMESCREEN-2
HOMESCREEN-3

Main Feature: As shoppers use the personal assistant, they are given real-time filtering results in the space below.

Another aspect about my solution was to never have the user leave the main page until they check out. So once a user picks an item that they want to know more about they click on the items image which triggers a pop up with images, suggested recommendations and drop down menus of information. This can help them sort out the information they want to see and the information they don’t, making their experience more seamless.

HOMESCREEN-4

In making this redesign I learned that there’s way more that goes into E-Commerce than meets the eye. I believe that the out of the box thinking lead me to have a solid solution that can be built upon to help customers have a better online shopping experience.