Shoptacle:
An E-commerce app and website
Shoptacle: Crafted for those who expect more from every purchase.
Nature of product
Shoptacle is an e-commerce platform that allows users to explore a wide range of online shopping, provides access to premium delivery, clear navigation and paycheck summary for a smooth experience.
My Role
UI & UX Designer designing an app and website for an e-commerce platform.
My Responsibilities
Conducting research, Paper and digital wireframing, low & high-fidelity prototyping, conducting usability studies, accounting for accessibility and iteration on design.
The problem statement
With the collected data and research, it is revealed that how common users face challenges in e-commerce platforms that includes delivery costs and time, user experience, difficulty in navigation, evolving with customers expectations, also in payment gateways. Even there are some platforms where fast delivery options are available but they are tied to monthly subscriptions, deterring those needing a one time service.
The Solution
To address the issue that revealed by the research and with the help of user personas and empathy maps where I was able to design an exclusive fast delivery option tailored for users who require urgent deliveries without the monthly subscription which only allows customers to pay a small additional amount for prioritized.
Alongside this, I focused on creating clear navigation throughout the platform to ensure a smooth browsing experience.
The checkout flow was simplified with a checkout summary where users can engage in check or change their details like address, orders, payment method, and able to view the total cost in a single screen before finalizing their purchase.
Addressing the solution
2
1
3
4
Pain points to gain points - Lap version
1
2
There will be choice of choosing standard and premium delivery depending on their needs.
3
Clear navigation will helps users to find what they're looking for quickly reducing frustration and drop-offs. Which are crucial in fast-paced online shopping environments end up helping increased customer satisfaction.
4
The "In Your Bag" section provides users with a clear and convenient overview of their order. It allows them to confirm the items they've selected and edit key details such as delivery options, date of arriving, and payment method all from a single view. This simple layout helps reduce errors, saves time, and ensures a smooth checkout experience.
1
2
Pain points to gain points - Mobile version
1
There will be choice of choosing standard and premium delivery depending on their needs. Implemented a interactive smooth slide to making fun and natural without distracting from usability.
2
Clear navigation will helps users to find what they're looking for quickly reducing frustration and drop-offs. Which are crucial in fast-paced online shopping environments end up helping increased customer satisfaction.
Challenges faced
Creating a premium delivery feature was challenging, as users wanted faster service but were hesitant to pay extra without clear value. I explored various benefits like same-day delivery and priority support, then tested different UI approaches to communicate these clearly. Through user feedback and iterations, I designed a flow that made the value of premium delivery intuitive and appealing.
design process
I followed an interactive user-centered design approach in which I have to focus on the users and their needs.
User Research
The aim of conducting user research is to help understands the pattern followed by users while purchasing products in online, and the identify the problems faced in the process. Also, the existing features or services that competitors provide, as well as the need for new ones that enhance the user's experience.
User Persona
Design guideliness from research
01
The choice of choosing standard and premium delivery should be viable of a glance.
02
Quick purchase route easy and effectively
03
Payments should be secure and track delivery on time.
04
Make navigation simple anyone can understand.
Basic Userflow
Usability study
In this study, Three participants completed the task of browsing, place an order independently. Each participants answered a simple questionnaire about their experience. Each session lasted a 15 - 20 mins roughly and it does includes with an introduction.
Participants are :
1. A CA Student and two IT employees who likely to place 2-3 orders per month.
Empathy Map
Low - fidelity wireframes
I design wireframes that bridge the gap between concept and final product, ensuring smooth collaboration between designers, developers, and stakeholders.
Style Guide
I design wireframes that bridge the gap between concept and final product, ensuring smooth collaboration between designers, developers, and stakeholders.
UI Elements
High - fidelity mockups
Landing Screens
Sign in and sign up screen
On-Boarding Screens
Main screens
More Images
Whats next ?
The next step for Shoptacle is to finalize its branding and design, ensuring a consistent look and feel. Developing a functional version with core features like product listings, search, cart, and checkout is essential. Setting up product listings and onboarding vendors will help populate the platform. A solid marketing strategy, including social media and paid ads, can generate initial traction. Beta testing with a small group of users will provide valuable feedback for improvements.
Lessons learned!
Taking part in Shoptacle taught me user-centered design in a new light. Perhaps the most convincing was how important recurring development is. Initially, I had a solid idea for a delivery feature I called premium delivery. After user testing, I found that the actual execution needed endless polishing to meet user expectancy.
Combining creativity and practicality also stood out as a lesson. Crafting different styles of UIs required me to determine if every single feature added or removed onto the user experience. This enabled me to strengthen design decision’s from usability research instead of just the aesthetic capture.
Well-planned user research also taught me a valuable lesson. Conducting empathy mapping and observing user actions uncovered insights that would otherwise be unreachable through hypothesizing. That great design begins from listening was reinforced.
To summarize, Shoptacle taught me to respect the design cycle, accept critique, and foremost, focus on the user.
