ZippoGreen - Online Lighter Store
Revamped a retailer's online presence for simplified product order
Role
Duration
12 weeks
Tools
Figma, HTML/CSS, React, JavaScript, MySQL
Team
Just me 🧘
GitHub
Background
ZippoGreen relies heavily on social media for sales, leading to a manual and inefficient ordering process.
ZippoGreen is a lighter retailer in Hanoi that is primarily based online through social media. While this provided visibility, the ordering process was labor-intensive: customers had to message the store directly, and staff spent significant time replying, confirming orders, and tracking inventory.
The problem
How might we give customers a more streamlined way to shop and make orders?
My solution
A dynamic, operational e-commerce website for ZippoGreen.
Research & Ideation
Interviews with the store manager revealed 2 main customer struggles:
📚 Customers struggled to find past products buried under old posts.
🕝 Customers experienced delays and frustration when ordering
The nature of social media sales created multilayered obstacles for both customers and staff, leading to reduced customer retention and productivity.
Having understood the problem space, I suggested two possible directions to the store:
💡 Build a profile on existing e-commerce platforms
✅ High usability for customers as the UI and order process on these platforms are familiar.
✅ Low costs to implement
❌ Low flexibility if the store wants to expand to selling services (e.g., lighter repair)
💡 Develop a dedicated website for the business
✅ High scalability if the store wants to expand products for business growth
✅ Stronger display of brand identity
❌ Implementation costs require upfront investment
Product focus
Designing a simple purchase flow to ensure the solution directly addresses the problem.
After discussing with the store manager, we chose the website approach for its long-term flexibility and growth potential. A website would enable the store to showcase its unique selling points and personality, thereby appealing to the specific needs of its customers.
Recognizing that the website will be used by both customers and staff, I created 2 flows dedicated to their unique experiences:
The challenge
As I am also implementing the website, I wanted to make sure that the layout and flows I design are technically feasible.
Before applying visuals, I validated the layout and flows with the store manager to align expectations. At the same time, the lo-fi wireframes helped me to visualize how I would translate the design into code. As I was simultaneously learning web development while working on the project, I opted for an information architecture that is simple and standard for quick implementation. This also allowed me to quickly test usability and refine the design with ease.
Translating design into code
Implementing the website was the most time-consuming yet rewarding process.
Through iteration, I aligned on a design that balanced:
Technical feasibility: Fast & easy implementation
Customer needs: Fast, simple, frustration-free ordering
Business needs: Reduced manual work, scalable inventory management
Reflection
Being both the designer and developer was intense, but highly rewarding.
ZippoGreen was the first web-based project that I developed from scratch, and it taught me the challenges in transferring design into code to ensure consistency and practicality. Therefore, my design focus for this project was technical feasibility rather than aesthetics, which allowed me to learn a lot about how information architecture and user interactions are developed.
This experience has allowed me to better understand engineers' workflow and technical capacities, which I hope will help me collaborate with them more effectively in cross-functional teams.