___THE PROBLEM
User research revealed that many struggle with urgent deliveries, as fast delivery options are often tied to monthly subscriptions, deterring those needing a one-time service.
___THE PROCESS
01. DISCOVERY
User Interviews
The design process for the e-commerce app and website involved several key stages. Firstly, I conducted extensive user research to understand the needs of a online users to identify their pain points with existing online apps.
Based on this research, I developed user personas and created wireframes to map out the app’s functionality and structure. From there, I created a high-fidelity prototype and conducted usability testing to refine the design and improve the user experience. The final design included features such as a easy navigation and premium fast delivery feature.
Persona and Empathu map
To ensure ToDoza meets the needs of its target users, primary data was collected from students and working professionals, as they are among the most impacted by productivity tools. Through a series of user interviews with three individuals—a college student, a CA article and a corporate employee—valuable insights were gathered on their task management habits, pain points, and expectations from a to-do list application.
02. DEFINE
User flow
To understand user needs and pain points, three individuals were interviewed for ToDoza’s website research: a working professional and two students with different task management habits. The interviews explored their struggles with productivity tools, desired features, and expectations from a to-do list app.
03. Ideate
Wireframing & Prototypes
I design wireframes that bridge the gap between concept and final product, ensuring smooth collaboration between designers, developers, and stakeholders.
04. UI
Branding
Following the branding, Shoptacle’s design system ensures consistency and usability, #DD6040 was used in the first Shoptacle project to create a sense of urgency and engagement, making it ideal for key UI elements. This bold red-orange hue was strategically applied to CTA buttons, promotional banners, and important alerts, ensuring high visibility and guiding users toward essential actions. Its warmth and vibrancy added a dynamic, modern feel to the design, reinforcing Shoptacle’s brand identity while enhancing user interaction.
Elements
Shoptacle’s interface is built with a cohesive set of UI elements, including intuitive buttons, structured input fields, and minimalistic icons. The design ensures clarity, accessibility, and ease of interaction, swiping icons, maintaining a balance between functionality and aesthetics.
Color Choice: #DD6040 (warm reddish-orange)
Energy & Excitement – This color evokes passion, urgency, and enthusiasm, which is great for retail and e-commerce.
Psychology in Shopping – Orange-red hues often trigger impulsive buying behavior and are commonly used in sales and discounts.
Brand Differentiation – If competitors use blue or green, this color makes Shoptacle unique and memorable.
Color Choice: #FFFFF (White)
Promotes clarity & focus – A white background provides a neutral space that helps users concentrate on their tasks without distractions.
High contrast with primary color (#4F46E5) – Ensures clear visibility of key elements like buttons, text, and icons.
05. Validate / Testing
User Testing
For user testing, i interacted with a real user with the prototype to gather feedback. The primary goal was to understand how users interact with the interface and identify any pain points or areas of confusion to optimize the overall user experience. The user testing involved observing user actions, collecting verbal feedback, and sometimes using tools like eye-tracking to analyze visual attention patterns.
Feedback
Based on the feedback gathered from user testing, I have made several improvements and additions to the prototype. I introduced a premium emergency delivery feature available up to three times a month, with pay-per-use charges. This user-friendly, cost-effective solution ensures quick deliveries without subscription commitments. It has been well-received, offering affordability and convenience for users, while also proving beneficial for the business.
THE NEXT STEPS!
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.
While working on a shopatcle app, i learned the importance of auto layout, components and more. Initially, I didn't use auto layout in this app nor the website and later i realized its value only after learning it. I decided to keep this project because this is my 1st i've ever done, could've been done better with some help, thus i wanna learn from my errors. I've made sure i should use the learnings in next project and i really did. you can check out my 2nd project called "ToDoza" an project and Dashboard platform below. Thanks for reading.
