Shelfy.io -Powered Mobile Application
E-commerce mobile applications with a shelf-based interface
As a Product Designer at Shelfy.io, I participated in the creation and redesign of generic interfaces for a Native mobile app. I developed features and pages such as "Wishlist," "'Collections," "Delivery," and "Payments" based on in-depth qualitative user research, competitive analysis, and testing. Curiosity in the e-commerce field and deep empathy for the end-users gave me the opportunity to create a good and exciting user experience.
Challenges
Creating a native mobile app involves a deep understanding of both the iOS and Android operating systems, as well as the ability to work within their restrictions. By prioritizing responsive design principles, I crafted wireframes and prototypes that seamlessly adapted to various screen sizes and resolutions, maintaining optimal usability across all devices. Through iterative usability testing and heuristic’s analysis, I implemented intuitive touch interactions, resulting in a polished and user-friendly app experience that exceeded expectations.
Task 1
Create a "Delivery" page that allows users to manage their delivery information and streamline the checkout process.
UX Research
I started with the user research to form an understanding how people interact with the "Delivery" page. As a result from the in-depth I found out that users interact with it the several ways:
-
Entering and keeping shipping information
-
Selecting delivery options
-
Viewing shipping costs and timeframes
-
Tracking orders.
Then, I conducted a competitive analysis, focusing on industry leaders to identify best practices and maintain an enjoyable user flow. Based on the results, I pointed out the following key elements for the "Delivery" page:
-
Default address
-
Add new address
-
Edit/Delete address
-
Delivery preferences
-
Shipping Methods
-
Costs and Discounts
-
Help Center
Design
Delivery Flow
When the user first enters the "Delivery" page, they will see a description that provides heuristic recognition rather than recall. After taping the call-to-action button, the user is directed to the "Delivery Zones" page, where they can view a list with descriptions. This design decision provides a smoother user flow by explaining which places are included.
On the "Delivery zone" page, I added information about:
-
Delivery cost
-
Contact details
-
Estimated time of arrival
I made this decision based on UX research.
After selecting the delivery zone, the user is directed to the "Success" page. I added the confirmation of the action as it is one of the most important design principles that provides calmness and an enjoyable user experience. As a call-to-action button, I chose "Continue Shopping" to increase user engagement with the store.
After selecting the delivery zone, the user can find information about the active delivery zone and add a new one in their profile. At the top part of the "Your delivery zones" page, users can see the active delivery zone, enhancing its visibility.
To find profound information about the chosen delivery zone, the user needs to tap on the card. It allows users to easily access relevant information and ensures a streamlined user flow.
Task 2
Redesign a "Wishlist" page. The Wishlist is one of the most important features in e-commerce, as it encourages user engagement through personalized recommendations.
UX Research
To redesign the "Wishlist" page I started with competitive analysis to identify prevalent design patterns across various e-commerce platforms. This research provided valuable insights into industry standards regarding bigger images and less text.
Wishlist
After implementing the changes, users can easily view images on the 'Wishlist' page, enhancing the user experience by presenting the most valuable data.
Results
The new design for the "Delivery" pages was tested, and the average time for adding a delivery zone is exactly 1-2 minutes.
The new design of the "Wishlist" was approved by 72% of respondents.