UI/UX Design for Commerce Portal

CoLab Pty Ltd

Overview

In May 2022, I joined “CoLab Pty Ltd.” in Sydney, Australia, contributing to business expansion for a company that successfully secured funding from a lean startup. Initially, the company operated an e-commerce site built on Shopify, storing popular products from local restaurants and cafes. However, with business growth, the development of a new commerce framework was decided. The administrator portal was built using a framework based on TypeScript and Node.js, and as part of the product team, I led the UI/UX design. I was also responsible for developing a new design system that would support future scalability with a small development team.

Role

Seniur UI Designer

Tools

Figma, Height, Notion, Slack

The CoLab

Based in Sydney, Australia, CoLab sells popular menus and products from famous restaurants, cafes, and general stores in Australia on its commerce platform. A young couple living in Sydney initially started as “ChefPrep” to solve the problems of both “consumers” and “sellers” who were suffering from the Covid crisis their performance. After collecting the menu made by the chef, it is stocked in their warehouse and sold as frozen food. They got succeeded in getting an investment in Round A. At that time, based in Melbourne, it absorbed and merged “Co-lab Pantry”, which was growing by selling food and pantry items from local retailers online, and changed its name to “CoLab”.

Design Process

The UI/UX design of the administrator portal was a key focus of the CoLab Pty Ltd. project. The product manager conducted user research and competitive analysis to define the requirements. After that, wireframes and prototypes were created to gather feedback on the initial designs. The selected design system was customized to fit the development environment, ensuring consistency in both visual and interaction design while allowing for rapid response. Working closely with the development team, we improved the design based on feedback from user testing and optimized it with future scalability in mind.

Challenges

Choosing a design solution compatible with Vendure x Angular was a major challenge. We had to evaluate whether existing CSS frameworks met the technical requirements and business needs, eventually selecting the Clarity Design System. It was necessary to adjust its standard components to match the project-specific requirements while maintaining visual and interaction consistency. Additionally, improvements were made based on user testing feedback to meet user expectations. Building a scalable design system that would accommodate future growth was also a key challenge.

Solutions

We customized the chosen design system to suit the development environment, making adjustments to meet the project’s needs. The visual and interaction designs were aligned, ensuring consistency and quick adaptability. Feedback from user testing was incorporated, leading to improvements based on actual usability. This approach met user expectations and established a foundation that could support long-term operations and scalability.

Key Learnings and Improvements

This project taught me that selecting the right framework early in the process is crucial, ensuring alignment between technical and design requirements. Standardizing and documenting the design system was essential, making it easier for the entire team to maintain design consistency. Strengthening the feedback loop and quickly incorporating user feedback led to more effective improvements. Designing with scalability in mind from the early stages was also vital, highlighting the need for a strategic approach that supports future growth.