Checkout process in the Oneway store
Step-by-step checkout process in the Oneway store starting from the main page with all products in the selected category and ending with successful ordering
MY ROLE
Solo UI/UX Designer
PROJECT TYPE
Case Study
SKILLS SET
Wireframing
UI Kit
Introductory
A large company Oneway has been on the market for a long time, and now decided to open their own online store. The company has their own corporate style and small design system.
Task
Develop layouts for webpages displaying product lists within selected categories and individual product detail pages, using corporate style guidelines. Create a checkout process workflow in accordance with corporate design system, prioritizing a desktop-first approach.
Create a specification for buttons and filters for design handoff.
01 WIREFRAMING
Mid-Fidelity Wireframe
First, I started creating wireframes of the main page with products from one category and frameworks of other pages with individual products and the process of their design, based on the basic elements from the provided design system.
Checkout Process
In creating the checkout process, I followed established user experience patterns in this way and incorporated them into my wireframing desing.
02 DESIGN SYSTEM
UI Kit
Specification for Buttons and Filters
To better understand the behavior of buttons and filters, I have created a detailed specification for the main design elements and filter fields.
03 FINAL DESIGN
High-Fidelity UI Design
Using the atomic design approach I have created sets of components and produce a high-fidelity design for both the main page showcasing all products within a selected category and individual product detail pages.
Step-by-step Checkout Process
The checkout process consists of three simple but very informative and intuitively designed steps for any user, which end with a successful checkout.
