UX Design
Craft Workshops
Side Project
Little Red Flower ─ Member / Course Management System
Project Duration
10 weeks (2022.06 - 2022.09)
Team
Interface Design - Jiun
Full-Stack Engineering - Vic
Development Process
Waterfall
Responsibilities
Project communication, UX design, UI design, prototyping, engineering handoff
Tools Used
Figma, Xmind, Adobe Illustrator
Project Overview
Background
Little Red Flower Handmade Rugs is a brand offering DIY workshop experiences — customers can sign up for a one-day course through the official site (built on Wix) or via Pinkoi to make their own rug.
Both Wix and Pinkoi offer a merchant back office, but the two platforms' data lives in separate silos, making it genuinely hard to consolidate. With the brand just getting started and both time and resources tight, the client chose to compile and manage everything manually in Excel.
But as the brand kept growing, the Excel-based way of managing things started running into real limitations and friction. This project set out to build an easy-to-use, efficient back-office system so the client could focus more on growing the brand.
Project Goal
Goal
The overall structure aimed to be clear and simple — skipping overly elaborate categorization to save time searching and understanding, so the client could complete each task more efficiently. When planning the feature flows, I also referenced the client's existing habits to lower the learning curve and help them get comfortable with the new system quickly.
Development Timeline
Scope of Work
Click the image to view it enlarged
Identifying Problems
Identify Problems
Before starting to plan the system, we reviewed the Excel file the client used to manage data and asked about their usage habits and details. Here are the five major problems we uncovered during that research and analysis:
Sitemap
Sitemap
Click the image to view it enlarged
User Flow
Flow Chart
I turned major flows like “Log in / Sign up” and “Send Email” into flowcharts — beyond making sure each step worked smoothly, they also gave me something to reason from when building out the screens later.
Log In / Sign Up
Click the image to view it enlarged
Invite New Member
Click the image to view it enlarged
Send Email
Click the image to view it enlarged
Wireframe
Wireframe
Drawing wireframes shaped the system's prototype — beyond discussing with the engineer whether the page layouts were feasible, they were also used to confirm with the client that the feature flows and design met their needs.
Design Output
Design Deliverables
Starting from the details to improve the browsing experience
Since the brand only runs a handful of course types, with names that are mostly similar, it was easy to get lost trying to find information. To fix that, we added a status tag to every course — “Open,” “Full,” or “Ended” — so users could tell a course's current status at a glance and spend less time searching. We also kept the system flexible enough that users can adjust how the interface and data are presented, cutting down on unnecessary distraction.
Fast data import and export
We provided two ways to add records — besides adding them manually, users can bulk-import existing data from an XLS file. They can also export data as a PDF or XLS file, making it easy to print or share with people outside the team.
Simpler, lighter-weight management
To make management easier for users, we designed four solutions for the parts of managing students and payments that gave users the most trouble:
Sending notifications or marketing emails with ease
By creating reusable email templates, users can send course notifications to specific students or promotional emails to everyone. We also designed a “Scheduled Send” feature that automatically sends emails at a set time, helping users use their time more flexibly and effectively.
Visual Guidelines
Design Guideline
Learnings & Reflections
Takeaways
01｜Constant communication and iteration to cover the gaps
My engineering partner and I both took this on as a side project alongside our full-time jobs, so the timeline was tight, and since he was stronger on the back end and less familiar with the front end, the build process was full of challenges. To lighten his development load, we talked things through a lot — could some components be adapted from existing libraries to save rebuild time? Would a feature that's really convenient for the client end up ballooning development costs? There was friction and the occasional wall along the way, but leaning on each other's expertise made the project stronger.
02｜Understanding the difference between B2B and B2C products
The back-office system's users are brand employees, so their needs and expectations differ from a typical consumer platform — security matters more, since accounts shouldn't be open for anyone to register, and ease of use matters more than visual polish. I built up the project's structure and prototype step by step by looking at a lot of similar products, putting myself in the client's shoes, and asking about how they used to manage things.