Slab Fabricator is an e-commerce market place that connects between sellers and buyers of stone surfaces, bringing a wide range of surfacing products on one trading platform while joyfully consumers, designers, fabricators, kitchen and bath showrooms, general contractors, custom home builders, stone distributors, surfaces manufacturers engineered stone brands.
Project Goal
Redesign shopping and check out process, to make the experience more user friendly and smooth.
Role
UI/UX design | User Experience Mapping | Prototyping
Previous Design
I started with studying the previous design, tried to find the parts that can be improved. At the same time I also asked a couple users and discussed with UX lead to help diagnose the problems.
Journey Mapping
After analyzing the previous design and understanding what can be improved, I created journey maps to begin determining screen to screen user interactions.
Key Revisions
Revised Design
Interactive Prototyping
I used Figma to create interactive prototypes for testing.
Sign In
Users can either create their own accounts or sign in with facebook or google account.
Once logged in, it will take the user to the home screen, showing the featured products and menu.
Navigation Menu Icons
Icons will be highlighted in pink color with darker border to indicate the users where they are.
Menu Items
Menu is divided in to six categories. Users can tab on the triangle expand button to see full list of items under each category, then hit the + button to add items into cart. Once an item is added into cart, users can choose to check out or add more items and check out later. Customizing items to users own liking is also available.
Check Out
Users can go to cart to view item(s) they add. Next users can choose to proceed to check out, add more items, or cancel the order. Once confirmed purchase, an order number with tracking link will be provided. Customers can click on the link to track their orders.
Search
Users can search based on typing in keywords or by categories.
Profile
Under "me," users can edit profile, edit payment, view past orders, and change settings.
Call
Users can use "call" to contact the store directly if they have any questions, instead of looking up phone number of the store online.
More
Under "more," users can find additional information such as story of Boba, FAQ, contact info, privacy policy and so on.