Try again on a desktop for the best experience.
Nextpick
A scalable e-commerce electronics store, with a consistent style guide and component-based interface
NextPick is a digital marketplace for electronics, gadgets, and home appliances, helping users browse, compare, and shop with confidence. This UI project focused on a responsive interface, with clear navigation, while keeping the user experience in mind and collaborating closely as a team.
Team
2 UX|UI designers
Duration
5 months
Tools
Figma
Year
2024
My role
As a UX/UI Designer for Nextpick, I created user personas, stories, and flows to guide design decisions, designed wireframes for key pages, developed a style guide for typography, colors, icons, and components, and collaborated with my teammate through design reviews to refine the user experience.
Overview
50+ high-fidelity screens designed for desktop
80+ responsive components built for design consistency and scalability
Complete style guide (typography, color, icons, buttons, layout)
Interactive prototypes covering core journeys (product search, comparison, return process)
Project brief
Online platform for digital goods.
Fast, seamless, and secure shopping.
Accurate product info for smart decisions.
Up-to-date product library.
Compare products by price, features, and reviews.
Secure payments and fast shipping.
User flows
We selected two key user flows to showcase: one for purchasing a Windows laptop and another for managing order returns or repairs, each designed to enhance the user experience.
Task flow
Purchasing a Windows Laptop on Nextpick
As a new user, I want to quickly find laptops that fit my budget and needs so that I can make an informed decision without wasting time.
As a detail-oriented customer, I want to easily compare multiple laptops based on their key specifications so that I can choose the best value for my work and personal use.
As a first-time user, I want a smooth and simple checkout process so that I can purchase my laptop without any complications or delays.
Task flow
Order Return and Repair Process on NextPick
As a user, I want to access my profile easily to check my purchase history and warranty information so that I can stay informed about my products.
As a loyal user, I want my account to reflect my loyalty status so that I receive the best possible service and benefits for my long-term relationship with the brand.
As a busy professional, I want to quickly register a return or repair for my smartwatch so that I can resolve the issue as soon as possible.
Wireframes
Iterations
We selected two key user flows to showcase: one for purchasing a windows laptop and another for managing order returns or repairs, each designed to enhance the user experience.
Typography
Iconography
Colors
Spacing
Grids
This grid system uses 12 equal columns, centered layout, 80px column width, and a 24px gutter for spacing between columns.
Components
UI Designs
Blog
The blog page is designed to share updates, insights, and news. It features a clean layout, categorized posts, and easy navigation for a seamless reading experience.
