Mobile App themes for e-commerce app builder
Mobile App themes for e-commerce app builder
Mobile App themes for e-commerce app builder
E-commerce
E-commerce
Mobile App
Mobile App
Overview
Overview
The goal of this project was to create a robust component set and design visually appealing and user-friendly e-commerce mobile app themes for a mobile app builder platform that enables users to transform their Shopify websites into mobile apps.
The goal of this project was to create a robust component set and design visually appealing and user-friendly e-commerce mobile app themes for a mobile app builder platform that enables users to transform their Shopify websites into mobile apps.
Role
Role
As a design lead for the project, I led all the design initiatives and worked with 2 UX and 1 UI designer and was the Point of Contact (PoC) for the client and their development team.
As a design lead for the project, I led all the design initiatives and worked with 2 UX and 1 UI designer and was the Point of Contact (PoC) for the client and their development team.
Process
Process
01
Discovery
Understanding Requirements
Analysing user inputs
02
Wireframes
Exploring components
Wireframe flows
03
Moodboards
Moodboards based on different themes
04
Design
Design Systems
UI Design
Dev Collaboration
Discovery
Discovery
Understanding Requirements
Understanding Requirements
We held a series of meetings with the client to understand the scope of the project, the target audience, and the core features of the platform. Based on this, we identified the key requirements for the e-commerce mobile app themes.
We held a series of meetings with the client to understand the scope of the project, the target audience, and the core features of the platform. Based on this, we identified the key requirements for the e-commerce mobile app themes.
Analysing User inputs
Analysing User inputs
We analyzed the user feedback collected by the client through user interviews. We analyzed the feedback of the clients’ customers, to understand the pain points, user preferences, and expectations related to the e-commerce mobile app themes. This helped us to design themes that were more user-centric and met the needs of the target audience.
We analyzed the user feedback collected by the client through user interviews. We analyzed the feedback of the clients’ customers, to understand the pain points, user preferences, and expectations related to the e-commerce mobile app themes. This helped us to design themes that were more user-centric and met the needs of the target audience.
Wireframes
Wireframes
We created the wireframes in 3 variants, each differing from each other in components and layout.
We created the wireframes in 3 variants, each differing from each other in components and layout.
Moodboards
Moodboards
Based on the insights gained from the user feedback and our analysis of current e-commerce industry trends, we created a mood board for 8 different themes that differed in style, fonts, colors, etc. We ensured that the themes catered to different user personas and their preferences.
Based on the insights gained from the user feedback and our analysis of current e-commerce industry trends, we created a mood board for 8 different themes that differed in style, fonts, colors, etc. We ensured that the themes catered to different user personas and their preferences.
Design System
Design System
We developed a base design system following Material Design 3 guidelines. The system encompasses typography, color palette, and various components such as buttons, input fields, tabs, toggles, sliders, etc., available in both Light and Dark modes. This approach ensures scalability and modularity, enabling the creation of theme-specific systems using the base design system.
We developed a base design system following Material Design 3 guidelines. The system encompasses typography, color palette, and various components such as buttons, input fields, tabs, toggles, sliders, etc., available in both Light and Dark modes. This approach ensures scalability and modularity, enabling the creation of theme-specific systems using the base design system.
Interface Design
Interface Design
Finally, we created end-to-end UI flows for all the themes, using theme-specific design systems. We ensured that the UI flows were consistent across all the themes and adhered to the platform's design guidelines.
Finally, we created end-to-end UI flows for all the themes, using theme-specific design systems. We ensured that the UI flows were consistent across all the themes and adhered to the platform's design guidelines.
