PTCi cafe
Product Page Redesign
Overview
For my mobile design course at DePaul University, we were tasked with creating a high-fidelity desktop, tablet and mobile prototype for a product page from a website. The goal was to think strategically and consider business goals and user needs while redesigning the existing page. In addition, the redesign needed to also consider important usability attributes such as ease of use and learnability.
Team
Solo
Strategies
UX/UI Design, Prototyping
Timeline
1 week
Tools
Figma
The Problem
In order to help customers make informed decisions before making a purchase, PTCi cafe needs to make fundamental changes to the way customers interact with their product page on desktop, tablet and mobile. Their existing product page was not responsive, therefore, it was crucial to create a responsive product page that still contains the same elements and information that meets business goals and user needs.
Goals
User: Make more informed purchase decisions
Business: Grab consumer attention immediately to make an order and build trust in the product and company
Product: Create a responsive product page
Research Insights
Lack of meaningful organization and visual hierarchy. The site was overwhelming as there was a lot of information on the page.
Too much focus on the ingredients and not the process of making a purchase. The product page lacked a clear and visible call to acton button.
The website contained the appropriate information, but lacked important signifiers as well as a visually appealing website.
How might we use PTCi cafe’s existing content to create a more usable product page, so that users can make more informed purchase decisions?
Solution
The product page is a crucial aspect of any business but it can also become a frustrating experience for customers if done incorrectly. To maintain trust with customers and to ensure that they were getting all the information needed before ordering, I used concise copy and clear visuals to help them make a more informed purchase.
Clear product options and buttons
For the redesign, I added a navigation bar that includes a hamburger menu and search icon to help users find other information more efficiently. The redesign also includes clear call-to-action buttons that allow users to customize and make orders online. In the existing site, important features such as ordering online, customizing an order and selecting product options were nonexistent or difficult to find. In the redesign, users can can select their desired panini sandwich, smoothie and quantity with the added dropdown feature. Users can easily identify the order online and customize buttons as they contain key text labels.
Visual Hierarchy
The current structure of the site is disorganized and frustrating, with no clear visual hierarchy, which makes it difficult for users to read through the information. This page has a lot of information about the product, but it was important for the user to read. I focused on restructuring the site by adding visual hierarchy, so that the user can easily scan the page and find what they’re looking for.
Build Trust
The existing product page flooded the user with irrelevant information. I removed the restaurants menu from the product page and used the additional space as an opportunity to include related products and reviews of the product. Related product recommendations creates a more personalized experience for users and could help increase conversion rates for PTCi. In addition, including reviews from customers allows users to gather more information about the product and provide more insight. Whenever a customer is feeling doubtful about making a purchase, the reviews can help establish trust and help customers make more informed decisions.
Figma Prototype
Reflection
I really enjoyed redesigning a product page for an existing site. I learned so much about responsive design too. This was an enjoyable project and I learned so much. I got the opportunity to work on a redesign of an existing site, learn about product pages, and solve a common problem. Product pages are extremely important for businesses. I focused on making the product page better in order to help customers make more informed decisions, help users make an order, and build trust.
The business owner reached out to me, and expressed their admiration towards the redesign. I’m hoping to return to this project when I complete my program and help them redesign their website as well as their online ordering system for their restaurant.