A mobile app and web administration platform
One product serving daily communication, teaching workflows, campus services and management.
EDTECH PRODUCT DESIGN · MOBILE + WEB
LIULIANCAMPUS
EdTech App & Web Platform
Reframing a fragmented legacy education product into a coherent mobile and web experience for families, teachers and school administrators.
Explore the redesign
01OVERVIEW
A connected campus system, not a collection of screens.
Liulian Campus brought communication, teaching, operations and administration into one cross-platform product ecosystem.
Families, teachers and school administrators
Each role needed a different balance of immediacy, control, detail and data access.
To make complex school work easier to navigate
The redesign replaced fragmented patterns with clearer structure and a shared visual language.
The project began as a redesign of an existing product. It became an exercise in rebuilding coherence across roles, workflows, devices and visual decisions.
Business context · Doubleflyer reports serving more than 100 education institutions. This is company-level context, not presented as a direct outcome of my redesign. Source ↗02CHALLENGE
Turning a feature-rich legacy product into a coherent school operating system.
Useful functions, fragmented experience.
- Inconsistent workflows and navigation
- Outdated visual patterns
- Dense features without a clear hierarchy
- No dedicated Product Manager
Clear structure, shared rules, distinct role experiences.
- Role-aware information architecture
- Predictable interaction patterns
- Cross-platform visual consistency
- A foundation the development team could implement
DESIGN QUESTIONHow might I preserve the depth of an existing education product while making the experience feel clear, trustworthy and usable across very different roles?
03MY ROLE
I was hired for visual design. The product needed structural design first.
Before a Product Manager joined, I worked across workflow reconstruction, interaction structure and interface design, then translated the system into production-ready mobile and web UI.
Audit
Review inherited features and inconsistencies
Structure
Reorganise workflows and navigation
Design
Create the full mobile and web interface
Handoff
Deliver screens and logic to developers
- Legacy product audit and early interaction restructuring
- Complete mobile and web UI redesign
- Visual system and cross-platform consistency
- Developer handoff, presentation and marketing design
- The visual expression of the Liulian Campus name
- Complete UI for the later App structure planned by the Product Manager
- Brochure design from the Product Manager's content structure
- The original 1.0 feature strategy
- Front-end development or formal user research
- Illustration authorship; royalty-free artwork was sourced online
LATER
As customer demand grew, I made the case for dedicated product ownership and supported the founders in hiring a Product Manager. After the role was established, I could focus more deeply on interface and visual quality while collaborating within a clearer product process.
DESIGN ALSO MEANS IMPROVING HOW A TEAM DESIGNS.04RESEARCH & THINKING
Working with fragmented product knowledge.
There was no formal research programme. Product knowledge was distributed across the founders, engineers, sales conversations and the behaviour of the existing platform.
Business goals and product history
Technical logic and existing behaviour
Recurring customer needs and objections
Evidence of real tasks and friction
DESIGN SYNTHESISScattered inputs became a navigable product framework.
One product did not mean one identical interface.
Parents needed fast reassurance; administrators needed control, density and traceability.
Platform choice should follow the task.
Mobile supported immediacy. Web supported long-form management, configuration and analysis.
Navigation had to express the school model.
Roles, permissions and feature groups were part of the experience, not back-office details.
Colour needed a job.
Functional colours made dense schedules, modules and statuses easier to scan.
05STRUCTURE & SYSTEM
Four product domains, organised around real school work.
The redesign grouped a broad feature set into clearer mental models, then adapted those models to the needs of each role and platform.
LIULIAN CAMPUSSHARED PRODUCT CORECommunication
Messages, announcements, class circles and home-school updates.
Teaching & learning
Homework, Q&A, schedules, courses, resources and assessment.
School operations
Leave, attendance, approvals, tasks, OA and campus services.
Data & administration
Permissions, records, grade analysis, reporting and configuration.
FAMILIES / STUDENTSMobile first
→Messages, schedules, homework, leave and progress.
TEACHERSMobile + Web
→Communication, teaching, approvals and resource work.
ADMINISTRATORSWeb first
Configuration, permissions, reporting and operations.
VISUAL LOGICOne language,
One language,
two contexts.
A shared palette keeps the experience recognisable, while each icon family responds to a different job: quick scanning in the product and expressive storytelling on the website.
SHARED PALETTE
Gradient utility icons
Compact cues for frequent tasks and fast recognition.
Grade analysis
Leave request
Homework
Evaluation
Attendance
Campus service
News
NoticesIllustrated outline icons
Friendly feature stories with a more expressive character.
Class circle
Task management
Online Q&A
Student leave
Scan attendance
Repair service
Campus news
Campus notices06DESIGN OUTPUT · MOBILE
Everyday school tasks, brought closer to the people using them.
The mobile experience prioritised immediate information, frequent actions and a more approachable tone for families and teachers.
Frequent actions stay visible and close to the home screen.
Avatars, colour and illustration soften institutional workflows.
Charts and schedules turn school data into recognisable patterns.
07DESIGN OUTPUT · WEB
Operational depth without visual noise.
The web platform supported dense administration tasks through stable navigation, modular content areas and consistent table, form and data patterns.
DATA MADE COMPARABLE
Individual performance combines a subject profile with change over time, giving teachers a clearer basis for discussion.
08BRAND & TOUCHPOINTS
The product system extended beyond the product.
I carried the same visual language into launch imagery, presentation boards and sales materials so the experience remained coherent from product demonstration to daily use.
09REFLECTION
This project taught me to design beyond the interface.
The real design challenge was not any individual screen. It was creating coherence across people, responsibilities, workflows and devices, while helping the team establish a clearer way to make product decisions.
- Systems thinking in a live product environment
- Cross-platform UX and high-density interface design
- Visual consistency across product and communication
- The initiative to improve team process, not only output
- Formalise design tokens and component documentation
- Test workflows earlier with distinct school roles
- Apply stronger accessibility and contrast standards
- Design responsive behaviour from the system level