WEBSHOP
Designed a webshop app with key e-commerce features
Jubi is a mobile e-commerce app developed as part of my Complete Web & Mobile Designer course. The project focused on advancing my Figma skills while tackling a design challenge, building a webshop using UX/UI methodologies and techniques.
Timeline
Spanning several weeks, I applied my learning throughout the course while independently developing my own project from concept to design.
Background
The project combined structured learning with practical application, refining my ability to create user flows, site maps, wireframes, design systems, interactive prototypes, and microinteractions. I explored various Figma techniques, applying them to design an intuitive shopping experience from onboarding to checkout.
This category outlines the step-by-step approach taken during the project, including sketching, user flows, site mapping, wireframing, and designing a design system before presenting the solution.
Sketching
I began by exploring the overall user flows, focusing on how users search, navigate, and interact with the webshop. I considered their emotions and actions while browsing and purchasing, refining navigation and micro-interactions to ensure a joyful shopping experience.
User Flows
I created user flows in Figma to outline key paths, mapping how users move through essential processes like registration, product search, and checkout. This helped define interactions early in the design phase.
Site Maps
To structure the app, I built a site map that visualizes the relationships between different pages and sections. This ensured a well-organized architecture, making all essential features easily accessible before moving on to wireframing.
Wireframes
I experimented with creating wireframes, using previous sketches, user flows, and a sitemap as a foundation while drawing inspiration from existing webshops and applying tested UX patterns. Though research wasn’t the main focus, it was crucial in shaping the wireframes.
Design System
I developed a design system that defined grids, typography, accessible color schemes, iconography, UI elements, and micro-interactions. This system allowed me to create reusable components for a consistent design, used for the solution.
Jubi is an e-commerce app designed to deliver an engaging shopping experience by integrating essential features users expect from a modern webshop.
Personalized Shopping
Jubi adapts to user preferences with smart recommendations and dynamic filtering, ensuring relevant product discovery.
Flexible Cart Management
Users can adjust product quantities or remove items directly from the product page, allowing quick modifications without disrupting their shopping flow.
Engaging Microinteractions
Subtle animations and feedback mechanisms enhance key interactions, from product selection to checkout, creating a smoother and more engaging user experience.
This project provided hands-on experience in advanced Figma workflows, UX methodologies, and e-commerce app architecture, deepening both design and research expertise.
Mastering Figma
Developed advanced proficiency in Figma, leveraging design systems, microinteractions, prototyping, and component libraries to build a scalable, cohesive solution.
Expanding UX Knowledge
Explored UX techniques, tools, and research methods to analyze existing solutions, identify best practices, and enhance usability and user experience.
E-commerce Insights
Learned to structure an e-commerce app by researching key user actions and breaking the experience into flows to optimize the shopping journey.