Product Page Redesign
Year
2022
Contribution
User Research UX Strategy User / Data Flow Usability Testing A/B Testing
Tools
Figma Shopify Calendly
Team
Maud de Boer — UX/UI Design Chander Rajput — Frontend Firdos Aliev — Backend
Challenge
To thoroughly understand the problems, I divided the research phase into two stages: a stakeholder workshop to determine business goals, followed by customer interviews for insights into pain points and website feedback. After writing down the problem statements, I created UX strategies for each level of the business (users, business and product) by taking into account internal and external points to determine the goals and scope of the project.
![](https://framerusercontent.com/images/W5ggsBPThNBYBo2HUGImNN2rc.png)
User Data Flow
To align product and user goals, I created a user data flow to track customer actions and their impact on the business’ backend. By mapping out various scenarios, I facilitated the development of an API that links the storefront to the app. The user flow guided me in determining the necessary screens to create.
![](https://framerusercontent.com/images/Tn3oUjepRJEAt2TLS9YFIHnUI.png)
Visual Feedback
After conducting usability testing and collaborating with the front-end developer, I discovered that Shopify's limitations affected my previous designs. To address this, I made additional design iterations that incorporated visual feedback points aligned with the theme's styling, resulting in the most effective final design.
![](https://framerusercontent.com/images/QyAKhigJq0zVloFkF5kZn4EbfQQ.png?scale-down-to=4096)
Calendly
Due to budget and scope constraints, I selected the free app Calendly for customers to book their scans, as it offered seamless integration and communication options. Now, the team receives automatic notifications whenever a customer requests a scan. I added the Calendly widget to both the product page and customer profile.
![](https://framerusercontent.com/images/k4aG74uTKsukxqWkgmUSj6u7MkI.png)
Product Tags
![](https://framerusercontent.com/images/5Zm2f5l8Im4Y4K8FjG0TddO3g.png)