UX Design Immersive: Project 2— Jeffrey’s Toys
Designing the e-commerce site for San Francisco’s Oldest Toy Store
My challenge: Create an interactive prototype for a brick-and-mortar toy store’s first e-commerce site
Skills tested:
IA & Navigation Design
UI design
Designing considering business needs
Phase 1: Breaking down the brief
I was given:
‣ values and objectives of the store
‣ a list of “Musts”, “Shoulds”, and “Coulds” for the e-commerce site
‣ three user personas to inform my designs
I extracted highlights from the brief to focus on. I realized that a lot of the brief was about the brand that the business wanted to maintain. This would be helpful to keep in mind for the project but a lot of the “feel” would come out in the visual design phase of the site design which lay outside the scope of this project.
Phase 2: Determining an organizational model of the site
I was given a list of the most popular toys Jeffrey’s Toys sold in store. These products were to inform our initial layout of the site.
With a small team, we performed a closed card sorting activity. Four different people, four different mental models. We managed to find logical parent categories to inform our navigation.
Jeffrey’s Toys wanted to maintain a quality over quantity feel so I knew we’d want to limit the number of categories displayed to keep the shopping experience feeling uncluttered.
To get further input of how people would organize the list of 50+ most popular toys, we set up an online card sort via Optimal Sort.
I tested the online card sort with 5 friends and saw variances in what categories people created but some notable trends. I combined my teams card sorting outcome with the online card sorting submissions and came up with 6 distinct categories.
I created a spreadsheet for the categories and products thinking that we would be using them for the site design soon and that it would be handy to have them laid out digitally.
Phase 3: Designing Flows for the Major User Journeys
I reviewed the three user personas provided by determining each person’s most pressing needs — which needs were overlapping and which were unique to the individual.
I articulated the site pages and features that each person would rely on to complete their goal. With the “What” mapped out, I created user flows for each person’s journey from discovering their desired product to checkout.
JASON
- What’s new
- Quick access to a range of options
- Familiar brand names
- Social proof from others to know what’s cool
- Sufficient product descriptions
- Trust with retailers
- Easy to make returns
Bottomline: Trust and Ease and Cool-Factor
Goal: Locate a specific product and check out as a first time shopper.
JENNY
- Record of past purchases
- Product descriptions should include info on age appropriateness
- Suggestions based on past purchases
- Fair pricing and flexible shipping options
- Doesn’t want to see too many choices
- Contact info
- Remember payment details
Bottomline: Reliability, Ease of navigation, value pricing
Goal: Use search filters to determine the best gift for a particular occasion and check out as a returning shopper.
DANIEL
- Knowledge and authority on product inventory
- Regularly updated inventory
- Fast shipping
- Able to purchase from mobile
- Able to submit product reviews
- Quick checkout process
Bottomline: Efficiency, authenticity/exclusivity, showing off purchases
Goal: Go to Saved Items and complete purchase for saved product as a returning shopper.
I began to see how constructing each of these individual user flows was creating puzzle pieces that would inform the site design. Understanding how each page needed to link to another would be critical for creating my interactive prototype.
I sketched out an initial idea for a site map:
At this point, I was very focused on the e-commerce functionality of the site and hadn’t been concerned with how it would also serve the purpose of drawing people to visit the store in person.
Phase 4: Creating Wireframes for each User Flow
I drafted a few versions of what the home page and the product category pages could look like. It was helpful to see them side by side to compare which versions would best serve the site goals.
I took to Sketch fairly quickly and began to design the main site pages.
Unlike my first project, I did not do paper prototyping usability testing with anyone. I knew that the interactive prototype would require usability testing and was eager to get some initial wireframes into Sketch.
In retrospect, getting feedback on the initial sketches and doing more competitive research during this early design phase would have been beneficial. I ended up changing a big feature later down the road — filtering on the product category page — which I could have prevented by doing more research up front.
I did get feedback on my wireframes from two different people. I realized that it was helpful to have two different versions actually created for people to compare side by side.
For example, I wasn’t sure if my cart should have the order summary up in the top right corner or more squarely in the top center. I showed my test users the following two wireframes:
The version on the right, with the cart in the top right corner, was clearly preferred which made it easy for me to continue on with the most intuitive version.
Phase 5: Using InVision to Create a Click-through Prototype
While I started out creating the main screens to be non-specific, i.e. “Product Category page” and “Product Page”. I realized that to test out particular user flows, more specific copy would help users in usability tests.
So I ended up creating Product Pages for three examples products that were necessary in each user flow: a magic wand, the Lego Millennium Falcon, and the Evel Knievel Stunt Cycle.
It was my first time using InVision and I found it fairly easy to navigate. I have a sinking suspicion that there are many shortcuts that I could still benefit to learn but I was able to upload my wireframes from Sketch using the Canvas plugin and even figured out how to create template hotspots.
I created the following two videos to illustrate what clicking through my prototype looked like for two user journeys:
Jenny’s search for a beginning magic trick for her nephew:
https://vimeo.com/user20207548/review/284602933/db713cfb7c
Daniel’s return to account to checkout a saved item:
https://vimeo.com/user20207548/review/284602899/5e6ca5cbbd
Phase 6: Presentation Time
We had 10 minutes to speak to the “Jeffrey’s Toys” stakeholders about the work that we’d been doing, why it was meeting their business objectives and recommendations for next steps.
This time around I really wanted to make sure that I was explaining the “So What?” of the research I had done and the design choices I had made.
I felt confident in my ability to talk to my peers in character — really engaging them as the Jeffrey’s Toys stakeholders.
10 minutes went quickly and I realized (especially after watching other people’s presentations) that I had not allotted enough time to show the walkthroughs of my actual prototype. If I were to present again, I would focus more on the functionality, realizing that the stakeholders actually want to see more of what they’ve paid me to create.
Overall Takeaways
I was impressed by how much I was able to accomplish in the span of 2 weeks. I have to give myself credit for quickly learning how to use a new prototyping program and to perform usability evaluations not straying from the test script.
It was quickly evident how we could approach this project with pre-existing preferences and intuition about how a website should look and flow. I can see how it would be easy to get overconfident about one’s ability to design a site for everyone without actually putting in the effort to do research and testing.
While it is important to know what your “good enough” point is in any project, I can see how starting out with a project scope and plan would be helpful to ensure that you don’t shortcut any important steps and that you maintain the integrity of the design process to learn, test, build (repeat).
