Nithya Geereddy | UX Designer
UX Designer
Jeffery TN.png

Jeffery's Toys | UX Design

 
Screen Shot 2018-09-20 at 11.06.33 PM.png

OVERVIEW

Context: Jeffery’s Toys is the oldest toy store in San Francisco. For this concept project, my challenge was to bring the store experience online by introducing e-commerce in the website redesign. I was given a project brief which discussed the business goals, and personas that highlighted user pain points and needs. The main goal was balance these needs, and make sure that Jeffery’s Toys new e-commerce doesn’t rob its users of the store experience.

Duration: 10 days

Tools: Pen, Pencil, Paper, Sketch and InVision

Deliverables: Lo-Fi Wireframe and User Flows


WORKFLOW

How I Spent the Ten Days

JourneyJefferyToys.png
 

BUSINESS ANALYSIS & USER GOALS

Balancing The Goals

After carefully evaluating the business goals from the brief, and understanding the user needs and pain points from the personas, I was able to discover the following trends:

  • Users need easy ways to search and filter options

  • Users and Business wants to develop a sense of trust & brand

  • Users need a fast and seamless checkout process

BizAndUserGoals.jpg
 

CARD SORTING & IA

Defining The Structure

Through the help of multiple rounds of open and closed card sorting, I was able to define a structure of different categories with 100 products. The seven categories were:

  • Outdoor

  • Hobbies

  • Old is Gold

  • Pretend Play

  • Games

  • Learning

  • Collectibles

 
 
IMG_0921.jpg

How might we bring the store experience online without losing the Jeffery’s Toys heritage?
I wanted the homepage to display information about the store’s heritage and have a plug for their featured products. I also decided to separate the e-commerce store as “SHOP” on the homepage navigation. The users can enter the e-commerce store after clicking on “SHOP”, and this way, their entire focus won’t be on the e-commerce story only.

Site Map: Blue indicates the e-commerce section of the website, and the Green shows different ways to encourage users to come to the actual store.

Site Map: Blue indicates the e-commerce section of the website, and the Green shows different ways to encourage users to come to the actual store.

 

PERSONAS & USER FLOWS

Understanding Who I am Designing For

After figuring out the structure for 100 products, the next step was to understand what features and functions can be introduced in the redesign to aid user meet their goals. Synthesizing all of this helped me brainstorm and come up with the following possible features:

  • Filter for products

  • Faceted Navigation for age group, price (under $50 etc)

  • Wish list & Sharing function for product page

  • Saved shipping information for faster checkout process

  • Reviews/Add reviews

  • Gift recommendation

  • Help & Support

Understanding How I am Designing It

The user flow helped me inform how the wireframes were going to look. A good filter was the first priority since that came up in all the three personas. The main takeaway from the flows were:

  • Jenny: needs a wish list, sharing feature and filtering

  • Jason: needs recommendations, filtering, to establish trust in the brand

  • Daniel: needs sharing feature, filtering

 

DESIGN & ITERATE

For the first step of iteration, I drew out the following sketches for the wireframe and got feedback from 5 people. The overarching feedback I got was to include login in the global navigation for consistency.

The next step was to make wireframes and test it out with people. After doing usability testing with two people, and getting a positive feedback, I was able to make the final prototype of the proposed solution.

IMG_0984.jpg
 
IMG_0989.jpg