Pixworld is a website that makes camera buying easy and no-stress.
Process and Timeline
The problem prompt
Pixworld is a fictional online hypermart of electronic products, but it is predominantly a camera reseller.
-
50% of users open on average 7 item pages and then abandon the site without moving any items into the cart. Product Manager’s hypothesis is that users are unable to determine which camera is best based on relative features.
-
70% of users who place an item in the cart do not purchase. Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase. Product Manager wants a guest checkout to solve for this. The guest checkout must capture email.
Constraints
Problem prompt from the Product Manager was provided by Springboard.
This project was conceived as a one-person project to be conducted in 90 hours.
I made changes to the product (bikes to camera) and the device I was designing for as this part was flexible in the prompt. Designing the project around a camera-buying process appealed to me as a photography enthusiast.
Goal
The business goal is to improve the conversion from browse to completion of checkout to increase revenue on the product’s web experience.
Solution
Search and Product comparison
User doesn't have to open multiple tabs to compare camera models.
Highlight differences
Differences between 2 models are highlighted. This helps the user in decision making.
Guest checkout experience
User does not have to log in to checkout reducing cart abandonment related to logging in.
How big is Cart abandonment problem?
Research from Baymard institute suggests that 69.99% of carts are abandoned. The report also covers over 10 reasons for cart abandonment. 24% abandoned the cart because they did not want to create an account to check out. The effect of cart abandonment is recoverable and estimated at $260 Billion.*
I wanted to understand how competitors tackled cart abandonment. I chose to study Amazon.com, Bestbuy.com and B&HPhoto.com as they are leaders in selling technology products and camera equipment. I conducted heuristic analysis of all 3 websites and studied how they tackled comparison between products and cart abandonment.
Competitor Research
Primary research
Decison : Conduct primary research?
I was able to obtain considerable information on how e-commerce websites tackled the problem space. However, despite the wealth of information, I wanted answers to a few questions, which secondary data did not provide answers to.
​
-
How did users go about researching, comparing and buying a camera?
- What device did they prefer to make the purchase on?
- How did they navigate while purchasing a camera?
- Did users really prefer a guest check-out over logging in?
​
Hence, I decided to conduct primary research to delve into these aspects.
Research plan
​
-
User surveys to assess demographics and psychographics.
-
User interviews (5) to understand the current buying process.
-
Contextual enquiry/ usability test on competitor sites to understand how users interacted with the website.
I circulated survey on slack and my friend and family circle to screen people for user interviews. Through the survey, I was able to get 21 responses and chose 5 participant from the responses. I conducted 5 remote interviews (4 on zoom and 1 over the phone). Some of the questions I explored were -
Process of Buying camera
Success in current buying process
Checkout experience
Pain points in current process
Comparison Process
Decision making process
Interview Insights
"I asked friends for information. I did my research online, searching multiple websites and groups. "
"I had to eliminate options by going through them so that number of tabs open was minimal."
"I was logged into my account. I find it easier to track orders if I am logged in."
I used affinity mapping to make sense of interview insights.
Challenges galore : delays and broadening scope
-
I was not able to conduct interviews as per the schedule. This cause some delays and changes in methodology. I did not have time to schedule contextual enquiry of competitors as interviews took longer than I expected. I decided to proceed with the data available.
​
-
Restricting the scope to only DSLR cameras was not ideal as I learnt that DSLRs were a dying category. I decided to broaden the scope to all types of cameras.
Define
Nobody used guest checkout- contradictions in personas?
​
None of the users I interviewed used guest check-out as they felt that the cost of the product warranted them to log in to be able to follow shipping and order updates. Therefore, I combined the interview data with information that the PM had provided to come up with a proto- persona.
Meet Craig, tech-savvy photography enthusiast
The Minimum Viable Product : Comparing products and guest checkout
Based on the major pain points of the user and from secondary research, I came up with the MVP
How would the user navigate?
Would they search or use the menu or featured products or the CTA? To me logically the quickest way to find what they were looking for was to use the “Search” option. Hence, I used Search as a way for user to navigate to the product they were looking for.
Lo-fidelity designs
I referred to many e-commerce sites, specifically those selling technology products as I designed the lo-fidelity screens.
How to design compare screens?
I needed a way to make 'compare products' pop up as user added the items. Figma's Open and swap overlays seemed to be the answer to this. I decided to construct the comparison as a pop-up. However, Figma does not allow navigation on the original page once the pop-up is active. This would make it difficult for the user to browse and add a second product to compare. After much thought, I decided to explain the pop-up constraint to the users during the test and make use of Figma's Pop-up capabilities.
Testing
Testing Lo-fi prototype
I conducted Usability tests (5 tests : 4 remote and 1 in-person) on the Lo-fi screens to test the usability of designs before I proceeded to create hi-fi designs. Usability testing is my favorite part of the entire design process as it helps me interact with users and understand the efficacy of my designs.
UI elements
Deciding on the primary color for the website was easy- Blue was the clear choice. It conveys efficiency and dependability that is important to an e-commerce website. I chose white as the background so that the UI looked clean and was not cluttered.
Create a dark mode vs scrappy testing?
I had trouble choosing the hero image for the landing page. I tried many iterations, but none were satisfactory. The hero image I was happy with necessitated me to create a dark theme. Since I was using a design system which did not support a dark theme, I did not want to change the elements on all screens just for one button. I had usability tests scheduled beforehand and decided to come up with a scrappy version of the button for testing without creating a dark mode.
Hi-fidelity screens
Search Page
Compare Products Page
Hi-fidelity usability tests
I conducted usability tests on the Hi-fidelity prototype on 6 users and wanted to understand 2 things :
-
How users interacted with the search bar when they were given the first task of searching for a mirrorless camera? I wanted to keep same tasks as the ones in lo-fidelity testing, but wanted to see if the navigation pattern would be different if I gave them a different task.
-
Was pop-up intuitive?
Search vs Browse difference?
My question was - why would users want to browse when using the search bar would have been was so much more efficient?
​
Another question I had was - would asking the users to find a model number rather than a category have had an made a difference to the way users navigated?
Some users didn't understand the category name and preferred browsing over searching. This was such a curious finding as logically I would expect someone not knowing a category name to search for it, rather than trying to browse.
The next decision I had to make was: should I use the same tasks as Usability 1, specifically about finding a Mirrorless camera, especially now that I had an indication that some participants might not understand what mirrorless cameras meant. I contemplated changing the task to 'Find a specific model'. After much thought, I decided to use same tasks as lo-fi to make the results comparable.
Though the tasks were same across lo-fi and high-fi testing, there was one difference between the two tests. I asked an extra question in hi-fi tests.
How would you navigate if you had to find Sony a7 IV camera?
3 out of 5 participants said that they would probably use the search bar, but still preferred using the main menu/ CTA button.
Why were users preferring to browse even when they had something more concrete (like a model number) rather than a category they might not be completely sure about?
Would results have been different if my usability test participants were amateur photographers and not just people who liked taking photos or had bought a camera recently. It definitely made me wonder if the results of the usability tests might have been different if I had given the respondents a slightly different task to accomplish.
​
Changes after usability test
Issue 1 : Search bar not used.
Issue 2 : Compare product pop-up confusing.
Some of the other changes that I made( minor issues in my classification) were formatting related.
Conclusion
-
Time constraints : Working on a tight schedule gave me a flavor of the real world project situation.
​
-
Planning related : I had trouble finding participants for the research part of the project and had to forgo competitor contextual enquiry tests that I had planned initially to make up for lost time.
​
-
Designing for desktop : This was my first time working on a desktop product. I thought it would be easier to design for larger screens, however my challenge was I did not know what to do with a lot of space. This was such a strange and unexpected problem to have!
Overall, it was a great learning opportunity. It was helpful that there were many established patterns that I could learn by studying e-commerce websites. I did not have to reinvent the wheel. This project also taught me to embrace changes in schedules and be willing to be scrappy under time constraints.
Retrospective
If I were to do this project again, I would make many changes in the way I conducted it.
​
-
The ‘Compare products’ pop-up confusion was completely unnecessary. I wanted to make use of a Figma’s capability of pop-ups with open and swap-overlay. However, this only complicated the whole experience.
​
-
I did not realize when I was creating user flows and the lo-fi screens that the 'Search vs Browse' question would be very important to consider. When I deconstructed the whole conundrum later it still didn't make complete sense : It is understandable that If a potential user had already done bulk of the research before the actual buying, they would be more likely to type in a model number rather than a category of product. However, it was still difficult to explain why 3/5 respondents still wanted to browse/ use CTA rather than search so late in the purchase process.
​
-
I did not anticipate the need for a dark theme when working with an existing design system. I would be mindful of this the next time.
Want to see my other projects?
