Shutter inc
E-commerce scenario project
Duration :
1 month
Role :
Product Designer
Tools :
Figma, Miro, Photoshop, Illustrator, Google forms
Project Description :
Solo student project under consultation from a Senior Product Designer Research & UX UI, interviews, sketches, wireframing, high fidelity mockups, usability testing, prototyping
Methodologies :
Screener survey, Interviews, Empathy maps, Affinity mapping
Introduction :
E-commerce challenge presented by Project Manager
Problem :
Users for an e-commerce website are abandoning the site without conversion. Your project manager suggests that users are unable to determine which products are best suited for them.
Objective :
Improve the conversion from browse to completion of checkout to increase revenue on the product’s mobile-web experience.
Solution :
Allow users to compare product models. Allow users to use a guest checkout.
I/ DISCOVERY
Plan Research - Set agenda for the project
Conduct Research - Secondary Research
For camera sales, the industry leaders are Amazon, B&H, and Henry’s. I conducted a heuristic evaluation of their shopping experience online for laptop and mobile devices.
Amazon — 3.5/5
Henry’s — 3.5/5
The good
UX for these shopping flows better understands the customer by breaking down the types of cameras and functions they offer
B&H Photography — 5/5
The bad
Some flows for high end camera shopping showed that they are more geared toward selling to amateurs and also have deceptive strategies for selling gear that users are not asking for
Conduct Research - Survey
For my research I chose to send out a survey. My goal for sending out the survey was to get qualitative and quantitative data on the purchasing habits of professional and amateur photographers.
Key insights from research :
Users want options for comparison of products
Most people buy their cameras out right and aren't interested in payment plans
Users need to be able to trust the website they are conducting business with
Most users will buy their camera using a computer and not a mobile device
II/ DESIGN
Design information architecture - Site map & user flows
The site map allowed me to define the information architecture for the site. By defining and organizing this information, I began imagining how how a user would navigate the website.
I created user flows to better understand the process the user has to go through when shopping for high end cameras.
Seen here is the comparison shopping flow. This flow will allow users to compare two products when shopping.
Design in low fidelity - Sketching & Wirerames
I designed wireframes to express the thinking of my user flows for the purpose of creating a new shopping experience that will allow users to do more research and have an easier time selecting their desired camera.
I made low fidelity wireframes in figma to provide a foundation for a design that could be tested with users.
III/ VALIDATE
Prepare to test
I wrote up users a few simple tasks and a test script for my first round of testing to validate my ideas about achieving the goals of the user. These are listed below.
Tasks for users
Compare 2 products using the compare feature
Add an item to your shopping cart
Use the guest checkout feature to purchase an item
Example 1.
You are looking to buy a new mirrorless camera. Before you make your purchase you want to do some research for the new camera. You would like to compare 2 camera models side by side. Show me how you would do this.
In person testing — wireframe prototype
I tested the wireframe prototype on 3 different users. Each one had difficulty navigating the product and this contributed to changes that I needed to make. I discovered that I needed to update links for products to be compared and that the the comparison feature I created needed to allow for “double clicking” so that it appeared more realistic in its functionality.
Synthesis of results
Creating a lo-fidelity prototype that works is challenging. Users had a hard time imagining the lo-fidelity design as real and were also expecting real results! I felt limited with the amount of time I had set forth in planning phase for the creation of this prototype. I needed to reiterate a prototype that was more advanced so that it would work more easily with users. Through these first testing rounds, I knew what changes would be important to implement when further developing my next iteration of the high fidelity prototype.
IV/ DESIGN
Update to High Fidelity Prototype
Components & Variables
New Hi-fidelity screens
Rendering the wireframes to High fidelity mockups allowed me to implement the feedback from the users in the first round of testings. These changes included making all products clickable, having the key comparison shopping function work with multiple products, and updating a new guest checkout feature. These changes helped me understand how users behave when making big purchase decisions for camera technology.
To make the prototype work more authentically and reliably, I had to create some custom variables and components for the shopping comparison feature and guest checkout feature. These helped me work faster and create more realistic interactions for the new prototype.
Key Screen for comparison shopping
Seen below is a key screen for the comparison shopping feature. This screens purpose is to make the consumer more educated about technology specifications from the camera manufacturer and be more likely to make an educated purchase based on comparison of products.
V/ VALIDATE
Re-evaluate the test script
I stuck with the simple tasks and a test script from my first round of testing. I wanted the users to have the same script from before and record the differences now that i had made iterations from the wireframe prototype.
Second round of user testing
In the second round of testing for the new high fidelity version of the prototype, users were more easily able to accomplish the tasks from the test script. This gave me confidence in my design and alllowed me to validate that parts of my flows were intuitive and acceptable.
Summary from testing
In the second round of testing for the new high fidelity version of the prototype, users were more easily able to accomplish the tasks from the test script. This gave me confidence in my design and alllowed me to validate that parts of my flows were intuitive and acceptable.
VI/ DESIGN
Iterate to High Fidelity
The final iterations to my mockup included a fully usable comparison feature page, options for guest checkout that were intuitive, and links that worked more fully. This new version allowed me get more accurate feedback from users during the last round of testing.