Project - PricePixel
Overview :
Pricepixel is a responsive web app and mobile application that I designed as a part of the UI course. Its for people who want to buy their favorite products from their favorite retailers like Macy’s, Nordstrom, Belk, and many more at the price they want to spend on them.
Problem :
Users always want to save money when they buy their favorite products. They wait for the product to go on sale but they forget to track the price. Sometimes they don't find a particular size or style. The other tracking sites are not integrated with the store's site, so users can not buy the product through the tracking app.
Solution :
Pricepixel allows users to select a store and browse 1000s of products. Then enter a price they are willing to pay for their favorite product and save it to track the price in future. If the price goes below the set price, they will get a notification and the user can buy it through pricepixel app. Users can anytime check the price history of the products.
Roles and Responsibilities
- Branding
- User Flows
- Wireframing
- User Testing
- Style Guide
- Visual Design
Brand Guidelines
Guiding Principle
Logo
The logo mark is inspired by price tag which is made of pixels. It justifies the logo type pricepixel.
Typography
Color Palette
The design has two primary color. Black and bright yellow.
bright yellow can lend a sense of happiness and cheerfulness. its the most energizing of the warm colors. It’s associated with happiness and sunshine. Black can make it easier to convey a sense of sophistication and mystery in a design.
Photography
All the images are related to apparels, jewellery beddings, watches etc. Most of the images are with white or light colored background with no shadows.
Writing Style
We want our customer save their money and time and let us do all the work for them. We are authentic, Straightforward and customer satisfaction is our utmost priority. We are smart and clear and our tracking tool constantly reflects the updated prices of the products. We are a smart and friendly, and our marketing reflects that. our voice is positive, bold and formal.
User Flows
Wireframes
Low-Fidelity Wireframes
Mid - Fidelity
High - Fidelity
User Test Results
Test scenario
You are a new user and want to add a product to your Wishlist to track price . Which steps would you take to accomplish this task?
| Pain Points | Priority | Recommendations |
|---|---|---|
| confusion between “Add to cart” and “Add to Wishlist” button | Critical | Keep the Add to cart button somewhere else |
| Women’s category screen Layout can be better | Preferential | Make them round instead of square |
| No way to go back to the select store screen | Critical | Add a back button on the home screen |
| Home icon does not match with the other icons in bottom navigation Bar | Preferential | Change the Home icon |
| Confusion between add to favorite and add to Wishlist icons | Critical | Remove the favorite icon from the product catalog |
High -Fidelity wireframes After making necessary Changes
UI Elements
Final Designs
Onboarding
Sign up
Sign up process is simple. User either can sign up with email id or they can sign up using the social media button right away.
Explore & Select
Set Price & Get Alerts
Retrospective
I learned how to build a cohesive brand for an app. I learned how to use brand elements consistently. The guidelines helped me to achieve my goal.
