UI/UX Case Study: Translating E-commerce web app into mobile app
Sunrise Ecommerce was a fledgling company with several offerings. They approached me to design a mobile application from their still-in-development e-commerce website. Since there was already a website, I didn’t have to reinvent the wheel for user flow.
Objective
To design an e-commerce application by incorporating all its features from the website and at the same time, maintaining a smooth user experience and branding.
Project Includes
- Design Ideation
- Final Design
- User Testing + Refinement
Home Section
Firstly I divided the home sections into 6 sections
- My Cart
- My Account
- Categories
- Search Bar
- Carousel
- Product
I decided to make a separate section out of category(03) along with home, Cart(01), and Profile/Account(02).
Search Section(04) and Carousel(05) & Product(06) remained on the home page with the repositioning of Carousel. Products were divided into sections of their respective categories with a feature to slide horizontally. You can see the full list by clicking on the arrow or title.
Categories Section
The category section is fascinating. Initially, I attempted to follow the website’s flow by breaking the whole procedure down into two steps. After selecting the category, you would be directed to another screen containing the material of that category ( fig 7). However, after conducting some user testing, I discovered that there was potential for improvement. Having two steps hid the content inside the category section and unless you knew the exact category, it was quite difficult to browse through it. As a solution, I switched it to a single screen with categories on top. By toggling between the components above, users may navigate the interface with reasonable ease (fig 8).
Cart
When it comes to the Cart section, it is mostly straightforward. Begin with the product card. First, I collected together all non-clickable items, which comprised an image, name, category, and per unit pricing. The quantity and delete buttons were kept separate. This provided some space for buttons. Other than that billing section is kept just below the product section.
Inside of cart section, there is the checkout page. This checkout page for the web contained two forms and a payment section which was obviously too long for mobile. Creating two screens for forms and payment can be a viable solution. But I used a pop-up for payment instead. The user could return to the checkout page by dragging the popup down. This was much smoother than clicking back from one screen to another. Plus, it gave the impression that the user was finishing payment on the checkout page. There was also a visual confirmation at the end of the payment.
Account Section
The account section had three functions included inside it.
- Account Details
- Order Details
- Option to Log out
Account Detail was mostly text so it was not that big of a problem. Since personal detail was the first thing that users saw on the website. I kept it that way with the ability to edit it.
As for the My Order section, I had to change the formatting a bit. Instances of the order were separated by a horizontal line while the elements inside a single instance were separated using Proximity. The orders could pile up over time, making the list longer and difficult to navigate. In order to compensate, a new search function was added, which would search products & orders inside the My order section.
Lastly, the Logout whose functions are self-explanatory.
Signup
The SignUp screen was simple and straightforward. A Show Password Toggle was added instead of Confirm Password field which reduces friction and improves the conversation rate. Active and error states were also designed to better assist the users. Supporting text for password requirements where mentioned clearly.
+Many More
Along with everything listed above, there were additional displays such as login, empty state, search screen, and so on. These displays were likewise created after much consideration and study.
Conclusion
All, in all this was an exciting project to work on. I learned a lot along the way. I am pretty content with everything I was able to achieve. Throughout the project, I made good use of Material Design 3 and 8-point grid systems. Low-fidelity Wireframes and information architecture were also used.
What can I do better?
- Testing with users from different areas.
- Adding additional features even if they were not available in the Website
Helping Hands
I want to thank Tuna technology for giving me the opportunity to work on this awesome project. I also want to thank Saroj Kunwar( HOD), Laxmi Pandey(Ui/Ux designer), and Jeewan Kunwar(Project Manager) for guiding me and helping me with the research and project.
