The Eternal Fit is a customized fit diamond rings e-commerce website. As the name says, The Eternal Fit is designed to fit perfectly on the wearer's finger regardless of life events that may increase or decrease the ring size. With the patented solution - the unique ring-to-spring technology, the ring grows and shrinks as you grow and shrink.
Project Goal
Create mobile-friendly UI design based on original desktop version
Role
Responsive UI Design | Prototyping
Desktop View
The original desktop version was provided by project manager. I was asked to design mobile view version based on the desktop view version.
Points to Consider Transitioning to mobile view
Before started, I kept the below key points in mind:
- make texts readable without the need of zooming in
- make navigation clear and visible
- get rid of anything that is not absolutely necessary
- make the design consistent
- ensure the buttons and icons sizes are finger-friendly
Major Adjustments
Mobile Version
Prototyping
I used Adobe XD to create high fidelity prototypes.
After the prototypes are created, they are connected and presented on physical mobile phones to show the users for usability 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.