#include E-Store
#include E-Store
#include E-Store
How might we create an E-Store website within the #include design system, ensuring smooth product sales and management for clients?
How might we create an E-Store website within the #include design system, ensuring smooth product sales and management for clients?
How might we create an E-Store website within the #include design system, ensuring smooth product sales and management for clients?
Role
Visual Design
UX/UI Designer
Tools
Figma
Client
UCD #include
Time
5 weeks, 2024
PROJECT OVERVIEW
#include is community of web developers and designers dedicated to fostering collaboration, growth and the creation of creative digital solutions at UC Davis.
Currently, we're in the process of developing an E-store platform, empowering aspiring entrepreneurs to effortlessly manage and showcase their products
#include is community of web developers and designers dedicated to fostering collaboration, growth and the creation of creative digital solutions at UC Davis.
Currently, we're in the process of developing an E-store platform, empowering aspiring entrepreneurs to effortlessly manage and showcase their products
PROBLEM
How might we design and implement a fully functional E-Store website that aligns with the #include design system, catering to clients' needs by providing an intuitive platform for seamless product sales and management?
How might we design and implement a fully functional E-Store website that aligns with the #include design system, catering to clients' needs by providing an intuitive platform for seamless product sales and management?
01
User Research
I had a meeting with the project's development lead, who provided an overview of the project scope and my design responsibilities. Initially, my focus will be on designing the essential elements such as product pages and order management to kickstart the e-store, with plans for additional feature integration in the future.
I began exploring various E-commerce platforms for inspiration, including eBay, Amazon, Poshmark, Shopify, and numerous others.
I had a meeting with the project's development lead, who provided an overview of the project scope and my design responsibilities. Initially, my focus will be on designing the essential elements such as product pages and order management to kickstart the e-store, with plans for additional feature integration in the future.
I began exploring various E-commerce platforms for inspiration, including eBay, Amazon, Poshmark, Shopify, and numerous others.
02
Iterations
As we progressed from the mid-fidelity sketches to the high-fidelity designs, we encountered significant design choices that contribute to the overall evolution of the design, ensuring a more polished and effective outcome.
Dashboard
We refined the Dashboard layout to significantly improve the ability to differentiate between products and orders. The redesign (right) ensures a clearer, more intuitive user experience by placing products at the top and orders at the bottom.
As we progressed from the mid-fidelity sketches to the high-fidelity designs, we encountered significant design choices that contribute to the overall evolution of the design, ensuring a more polished and effective outcome.
Dashboard
We refined the Dashboard layout to significantly improve the ability to differentiate between products and orders. The redesign (right) ensures a clearer, more intuitive user experience by placing products at the top and orders at the bottom.
Products Page
In redesigning the products page, we realized that some essential information necessary for effective product sales was overlooked. Through experimentation, we identified the optimal layout for each category, ensuring a concise and orderly presentation.
Products Page
In redesigning the products page, we realized that some essential information necessary for effective product sales was overlooked. Through experimentation, we identified the optimal layout for each category, ensuring a concise and orderly presentation.
Orders Page
The redesigned orders page features a progress bar that allows sellers to conveniently track the progress of each order and identify the necessary steps for successful order fulfillment.
Orders Page
The redesigned orders page features a progress bar that allows sellers to conveniently track the progress of each order and identify the necessary steps for successful order fulfillment.
03
Design System
#include's design system revolves around various shades of purple, which influenced my decision to maintain this theme in the #include e-store. Additionally, I opted for easily legible typography, selecting fonts like Be Vietnam Pro and Inter.
#include's design system revolves around various shades of purple, which influenced my decision to maintain this theme in the #include e-store. Additionally, I opted for easily legible typography, selecting fonts like Be Vietnam Pro and Inter.
04
Final Designs
Final Prototype
The final prototype encompasses user sign-up/log-in processes, product listing creation, and order viewing functionalities.
Final Prototype
The final prototype encompasses user sign-up/log-in processes, product listing creation, and order viewing functionalities.
05
Conclusion
REFLECTION:
Venturing into the realm of e-store design for the first time presented its fair share of challenges, particularly in the realm of comparison with existing platforms to determine the optimal design for #include's e-store. These initial strides mark the beginning of #include's e-commerce journey, with promising potential for growth and evolution. I can't wait to see how it will be further developed, and I am immensely thankful for the opportunity to contribute to the beginning of this exciting project.
REFLECTION:
Venturing into the realm of e-store design for the first time presented its fair share of challenges, particularly in the realm of comparison with existing platforms to determine the optimal design for #include's e-store. These initial strides mark the beginning of #include's e-commerce journey, with promising potential for growth and evolution. I can't wait to see how it will be further developed, and I am immensely thankful for the opportunity to contribute to the beginning of this exciting project.
Let's Build Something Impactful.
awu.
© 2024 Annabelle Wu
Let's Build Something Impactful.
awu.
© 2024 Annabelle Wu
Let's Build Something Impactful.
awu.
© 2024 Annabelle Wu