Habitual
Habitual
Mock Project - E-commerce App
Mock Project - E-commerce App
January - April 2023
January - April 2023
App design:
App design:
A follow along tutorial that broke down the full design process, as well as a guided creation for a full design system.
A follow along tutorial that broke down the full design process, as well as a guided creation for a full design system.
Role:
Role:
As a student, I had the opportunity to learn the details of design systems and thinking through this project.
As a student, I had the opportunity to learn the details of design systems and thinking through this project.
Time frame:
Time frame:
January 2023 - April 2023
Design - April 2023 - June 2023
Design - April 2023 - June 2023
Design - April 2023 - June 2023
Currents
Polaris
Invent Animate
Competitive Analysis
I researched the three biggest influences/most popular bands of the genre to craft a more familiar experience.
Currents
Polaris
Invent Animate
Competitive Analysis
I researched the three biggest influences/most popular bands of the genre to craft a more familiar experience.
Currents
Polaris
Invent
Animate
Competitive Analysis
I researched the three biggest influences/most popular bands of the genre to craft a more familiar experience.
Currents
Polaris
Invent Animate
Competitive Analysis
I researched the three biggest influences/most popular bands of the genre to craft a more familiar experience.
Currents
Polaris
Invent Animate
Competitive Analysis
I researched the three biggest influences/most popular bands of the genre to craft a more familiar experience.
Market Research
The claim
The e-commerce industry is expecting to continue the strong growth its seen. A current market size of 16 trillion and growth set to exceed 57 trillion by 2032.
The Problem
E-commerce has become a regular part of everyday life, however with how saturated the market is, simplicity of the user experince is paramount.
$60T
$35T
$10T
2022
2027
2032
$57T
Market Research
The claim
The e-commerce industry is expecting to continue the strong growth its seen. A current market size of 16 trillion and growth set to exceed 57 trillion by 2032.
The Problem
E-commerce has become a regular part of everyday life, however with how saturated the market is, simplicity of the user experince is paramount.
$60T
$35T
$10T
2022
2027
2032
$57T
Market Research
The claim
The e-commerce industry is expecting to continue the strong growth its seen. A current market size of 16 trillion and growth set to exceed 57 trillion by 2032.
The Problem
E-commerce has become a regular part of everyday life, however with how saturated the market is, simplicity of the user experince is paramount.
$60T
$35T
$10T
2022
2027
2032
$57T
Market Research
The claim
The e-commerce industry is expecting to continue the strong growth its seen. A current market size of 16 trillion and growth set to exceed 57 trillion by 2032.
The Problem
E-commerce has become a regular part of everyday life, however with how saturated the market is, simplicity of the user experince is paramount.
$60T
$35T
$10T
2022
2027
2032
$57T
Market Research
The claim
The e-commerce industry is expecting to continue the strong growth its seen. A current market size of 16 trillion and growth set to exceed 57 trillion by 2032.
The Problem
E-commerce has become a regular part of everyday life, however with how saturated the market is, simplicity of the user experince is paramount.
$60T
$35T
$10T
2022
2027
2032
$57T
Market Research
The claim
The e-commerce industry is expecting to continue the strong growth its seen. A current market size of 16 trillion and growth set to exceed 57 trillion by 2032.
The Problem
E-commerce has become a regular part of everyday life, however with how saturated the market is, simplicity of the user experince is paramount.
$60T
$35T
$10T
2022
2027
2032
$57T
Amazon
Etsy
eBay
Competitive analysis
The top competitors in the E-commerce space, provide an easy path to follow for best practices in the industry.
Amazon
Etsy
eBay
Competitive analysis
The top competitors in the E-commerce space, provide an easy path to follow for best practices in the industry.
Amazon
Etsy
eBay
Competitive analysis
The top competitors in the E-commerce space, provide an easy path to follow for best practices in the industry.
Amazon
Etsy
eBay
Competitive analysis
The top competitors in the E-commerce space, provide an easy path to follow for best practices in the industry.
Amazon
Etsy
eBay
Competitive analysis
The top competitors in the E-commerce space, provide an easy path to follow for best practices in the industry.
Amazon
Etsy
eBay
Competitive analysis
The top competitors in the E-commerce space, provide an easy path to follow for best practices in the industry.
Site Map
Site Map
As with any project, the Site Map is important to understanding different aspects of the user journey.
As with any project, the Site Map is important to understanding different aspects of the user journey.
Design System
Throughout the project, more of the system came together. After research, site map and flows were created, we built out the design style first, followed by component creation.
Color palette
Primary, secondary, tertiary and background.
Font
Body: Gothic A1
Regular, Medium, and Bold
AaBbCcDdEeFfGgHh
High fidelity
High fidelity
With the building blocks in place, it was time to level up the design. Focusing on visual properties as well as micro-interactions.
With the building blocks in place, it was time to level up the design. Focusing on visual properties as well as micro-interactions.
Microinteractions
Microinteractions
Some of the interactions we explored were a parallax effect, a cart overlay, an expressive add to cart button, and a slide to delete motion. The progression can be seen below.
Some of the interactions we explored were a parallax effect, a cart overlay, an expressive add to cart button, and a slide to delete motion. The progression can be seen below.
Just for you
The Metamorphosis
Franz Kafka
$12.99
All Star High Tops
Converse
70.99
Deals
View all
Bose Noise Cancell...
4.25
$400.99
The Hobbit
4.25
$14.99
Home
Wishlist
Profile
Search
My Interests
View all
Tech
Reading
Gaming
Fashion
Music
Macbook Pro 13"
Apple
$1934.99
DualSense Wireless Controller
Sony
$79.99
Aleinware Curved Monitor
Dell
$2454.99
Just for you
The Metamorphosis
Franz Kafka
$12.99
All Star High Tops
Converse
70.99
Deals
View all
Bose Noise Cancell...
4.25
$400.99
The Hobbit
4.25
$14.99
Home
Wishlist
Profile
Search
My Interests
View all
Tech
Reading
Gaming
Fashion
Music
Macbook Pro 13"
Apple
$1934.99
DualSense Wireless Controller
Sony
$79.99
Aleinware Curved Monitor
Dell
$2454.99
Just for you
The Metamorphosis
Franz Kafka
$12.99
All Star High Tops
Converse
70.99
Deals
View all
Bose Noise Cancell...
4.25
$400.99
The Hobbit
4.25
$14.99
Home
Wishlist
Profile
Search
My Interests
View all
Tech
Reading
Gaming
Fashion
Music
Macbook Pro 13"
Apple
$1934.99
DualSense Wireless Controller
Sony
$79.99
Aleinware Curved Monitor
Dell
$2454.99
Just for you
The Metamorphosis
Franz Kafka
$12.99
All Star High Tops
Converse
70.99
Deals
View all
Bose Noise Cancell...
4.25
$400.99
The Hobbit
4.25
$14.99
Home
Wishlist
Profile
Search
My Interests
View all
Tech
Reading
Gaming
Fashion
Music
Macbook Pro 13"
Apple
$1934.99
DualSense Wireless Controller
Sony
$79.99
Aleinware Curved Monitor
Dell
$2454.99
Just for you
The Metamorphosis
Franz Kafka
$12.99
All Star High Tops
Converse
70.99
Deals
View all
Bose Noise Cancell...
4.25
$400.99
The Hobbit
4.25
$14.99
Home
Wishlist
Profile
Search
My Interests
View all
Tech
Reading
Gaming
Fashion
Music
Macbook Pro 13"
Apple
$1934.99
DualSense Wireless Controller
Sony
$79.99
Aleinware Curved Monitor
Dell
$2454.99
Just for you
The Metamorphosis
Franz Kafka
$12.99
All Star High Tops
Converse
70.99
Deals
View all
Bose Noise Cancell...
4.25
$400.99
The Hobbit
4.25
$14.99
Home
Wishlist
Profile
Search
My Interests
View all
Tech
Reading
Gaming
Fashion
Music
Macbook Pro 13"
Apple
$1934.99
DualSense Wireless Controller
Sony
$79.99
Aleinware Curved Monitor
Dell
$2454.99
Would you like to work together or just say hi? Send me an email :)
Would you like to work together or just say hi? Send me an email :)
Let's create together
Let's create together
Let's create together
Let's create together
Let's create together
Let's create together