Caseology - Ecommerce Product Detail Page

Responsive Website
About Caseology
Caseology is an Amazon top seller brand which providing smartphones cases. On this project we want to rebranding caseology and refresh its ecommerce site. establish itself as the leader in the category and connect customers to its brand. 
Team Composition
Product Owner(1), Product Manager (1), Marketing Manager(1), UX/UI Designer (1),  Developers (3), Graphic Designer(2)
My Role- UX/UI Designer
Including User Research, Product Feature Suggestion, Wireframe, Hi-fi Prototype, Interactive Prototype,
Spec Document, Visual Specification, AB Testing
What is the Problem of Product Detail Page
- Users  was limited amount of reading, which means eye only focus on one things at one time, Two image or two section show on same line may cause user confuse and hard to focus.
Users entering the site for a browsing experience, not an informational experience. beside use amount of text information on BTF, PDP should provide more images
- Quality is not just conveyed through information such as material and dimensions but can be conveyed through alternative methods such as reviews​​​​​​​
1. From Heatmap show, Users try to click the center to change image (see yellow dot circle). Which mean they cannot focus on two images at same time.
2. From scrolling map show, Half percent of users not scroll to Spec and Tech explanation
Strategy for Redesign
1. Hide less pertinent information to reduce cognitive load.
2. Provide large, captivating photos for users to focus one at a time.
3. Make reviews easily accessible (not hidden and full screen)
Research
I did 200+ Poll on our site to collect enough customer feedback of Product Detail Page. And collect PDP page perfoming information from Shopify and  Google Analytics.
Sketch Exploration
I discovered through collaborating with project manager, engineers and visual designer. To list different variation of design element. I write down the pro and cons of each element, comparing and testing it.
Wireframe Exploration
Wireframe
Final Design
 Library
After rebranding, I create new pattern library. Which need to consider visual appearance and usability. 
After 
After launch, I did poll on caseology website. and the word cloud show customer feedback for new page. Most people like the new looks and feel it easier browsing products.

Other Projects

Back to Top