My Role: UX Research, UX Design, UI Design, Usability Testing
Tools Used: Adobe XD, Adobe Photoshop, Google Forms, Zoom
My Role: UX Research, UX Design, UI Design, Usability Testing
Tools Used: Adobe XD, Adobe Photoshop, Google Forms, Zoom
"Using an application or a website should feel as natural as the sand between your toes."
"Using an application or a website should feel as natural as the sand between your toes."
"Using an application or a website should feel as natural as the sand between your toes."
VINO'DOWD
Your Favorite Toy and Hobby
E-Commerce Site
The Challenge
My Role: UX Research, UX Design, UI Design
The challenge was to create a website for a successful fictional brick-and-mortar retail business and apply user experience research, analysis, and design to create an e-commerce website that would increase online sales. I wanted to create a site for a toy store but I knew that the majority of toy sales had moved to large department stores and online retailers. So, my first step was to reach out to toy buyers and ask if they would support a local toy store and why. Let the research begin!
​
Research
User Survey
As I mentioned above, I began my research by sending out a survey to toy store customers. I wanted to find out how people feel about local toy stores if they still feel they are necessary and if they wished there was one in their town. I know, very high level general questions to start but before I pursued building a site for a local toy store I wanted the users to confirm there was enthusiasm for them remaining a part of their community. The response I received told me that people still wanted their toy and hobby products and if possible, they wanted to buy them local.
Now that I had my answer, I needed to create a business with a fictional history and brand so that I could conduct further research to find out how the little guy could compete with Amazon and Walmart.
​
I created a family-owned toy store, named 'Your Favorite Toy and Hobby'. The store was established in 1965 and specialized in customer service and carrying a wide variety of products.
Competitive / Comparitive Analysis
In order to get a better understanding of what the competition was offering in regard to features and functionality, I conducted a competitive and comparative analysis. Neither exercise revealed any substantial differences between the direct and indirect competition.
Information Architecture
The feature inventory I completed for direct and indirect competitors enabled me to quickly put together a feature list for the Your Favorite Toy and Hobby website. Below are the must-have features to be competitive in this segment.
-
Sign up with account
-
Business login
-
Mark favorites
-
Save cart
​
-
Checkout online
-
Several payment options
-
Rate products
​​
-
Free Gift Message
-
Share on social network
-
Pickup in store
Content Organization Scheme
My next step was to determine how to categorize the site product content. To create categories that made sense to the customers, I had eight of them perform a card sort with 75 different products. This process showed that most people agreed on how toy and hobby items should be categorized.
User Flow
While conducting my initial research, I completed a task analysis with one direct and indirect competitor. This helped me to start creating user flows for my site. Below is the final user flow I used for the site.
Design
Sketchs & Wireframes
With the research and information architecture decided, I started to sketch and wireframe until I felt like I had a design that reflected the local business I had created and a logo that felt like it was created in 1965.
Protoytpe 1: Usability Testing and Survey
I sent out the first prototype to users with a detailed testing script. I got back some excellent suggestions for navigation improvements but more importantly, the users started to tell me what services and features they wanted highlighted.
Valuable User Observations​
​
​​
-
Staff product knowledge is important
​
-
Site popularity could be increased by letting people know that store carries a wide variety of items that are hard to get
​​
-
Store known for excellent customer service
Protoytpe 2: Usability Testing and Survey
The next prototype added all of the required product screens and a detailed 'About' page. Again, I asked the users to follow my script and test the prototype and again, they came through for me with great suggestions to separate this business from the competition.
Valuable User Observations​
-
Call out toys from around the world
​​
-
Store has a rich history
​​
-
Store has good customer service
​​
-
Personalize the 'About' page with family photo
​​
-
Staff product knowledge level is important
-
Owner ‘Toy picks of the month’ suggestion
Personas and Problem/Solution Statement
It took two rounds of prototype testing and follow-up survey questions to get a feel for what the users wanted from a local toy store. Also, the users told me through their survey answers and testing feedback what they perceived as special or different about this business, and in doing so, enabled me to create two personas based on the data they provided. Only when I had reached this point, did I have enough information to clearly define the personas, the problem, and the solution.
Persona 1: Local Customer
Persona 2: Business Customer
Barbara and Robert are finding great prices and online buying convenience but not enough expert product knowledge and customer support to ensure they are making the correct toy and hobby purchases for their family and professional needs.
Problem Statement
Solution Statement
A toy and hobby e-commerce site backed by a local, reliable business that specializes in high quality products supported by an expert staff that is known for providing unparalleled
customer support.
Final Prototype
The final step of the challenge was to produce a mid-fidelity prototype that would show how this new e-commerce site would look and function. It includes fifty product detail pages and a full purchase and checkout sequence.
Next Steps
I would like to add color to the prototype and have already added color to one screen. In addition, I would like to change the icon, fonts and add more photos and history to the About page.
