Bringing Street Commerce Online: Designing a Web App for Essential Product Sales
NEEDS
In informal markets, many users lacked easy access to everyday products and services like ice, pet food, cleaning supplies, and bill payments. The client needed a digital platform to bring these essentials online and reach more customers efficiently.
MY ROLE
As the lead UX/UI Designer, I was responsible for defining the product concept, designing the layout and structure, and delivering a high-fidelity interface. I managed everything from early research to the visual design system using Figma.
CHELLENGE
The main challenge was designing a vertical layout for large public screens while ensuring accessibility, intuitive navigation, and compliance with usability heuristics.
PROCESS
I facilitated a design thinking session using the “Crazy 8s” method to generate and evaluate early ideas. From there, I created low- and high-fidelity wireframes and built an interactive prototype to test layout and functionality.
I also introduced a fixed menu bar to simplify user interactions across a large vertical screen, improving accessibility and reducing visual friction.
METHODOLOGY
We followed a full Design Thinking approach: empathize, define, ideate, prototype, and test. This helped us stay user-centered throughout the process.
TEAM COLLABORATION
I led the project from concept to launch, collaborating with one front-end and one back-end developer. I was responsible for the entire UX/UI strategy and maintained design consistency through each development phase.
FINDINGS
User testing revealed that older users needed larger buttons and clearer icons for better accessibility. I applied inclusive design by increasing element sizes and simplifying visual layout.
I also restructured content with scroll indicators and action menus, helping users understand where they are and what they can do on each screen. Logos were prioritized by relevance to reduce clutter and improve visual hierarchy.
COMMUNICATION
I maintained ongoing collaboration through Slack and Figma to ensure alignment with developers and reduce misunderstandings. This streamlined feedback and boosted productivity across the team.
LEARNING
This project reinforced the importance of communication and iteration. I learned to listen to feedback openly and quickly adapt my designs to keep moving forward and improving usability.
FINAL DESIGN
We launched the MVP with 15 users in a real-world environment. The final interface made product selection, payment, and navigation more intuitive — especially for users with limited digital experience.
