VanPeople Network Ltd. is a leading online media provider with a branded network of localized platforms targeting local Vancouver Chinese users. VanPeople is consisted of six major online platforms which focus on providing an array of services in different categories. Our channels include website (VanPeople.com), iOS/Android APP, WeChat channel (100,000+ followers), Weibo official account (50,000+ followers), which cover over 450,000 users in the Greater Vancouver area.
demand analysis
After receiving feedbacks from ours clients & through the management team, it was clear that VanPeople needed a new design guideline in order to make the platform consistent, intuitive and delightful.
39% of the negative comments gathered from the "Feedback" section were UI inconsistency related.
30% of the clients complained that the platform was overloaded with irrelevant information and appeared obsolete.
Business goals:
• Optimize user experience
• Creating more user friendly interface.
As the VanPeople team grew, it became increasingly critical to maintain a consistent style and visual language across all product lines. With nearly over a dozen products, it became clear that a more systematic way to guide and leverage our collective efforts was needed. The initial outcome was to have a collection of reusable components, guided by clear principles, that can be combined together to create experience simple and smooth as possible.
Draft of prioritizing key functions
UX Challenges
Getting Everyone Onboard
A Design System is not a one-man project and if you want it to succeed, everyone need to be on board. The more integration you demand, the more standardized protocol you need at the table.
Planning & Prioritizing
Failing to plan is planning to fail. We constantly toggle between working on our design system and enhancing the application. Planning and prioritizing our tasks are imperative.
Client Communication
Although our users and clients have been long longing for this change. Yet, it was important to balance between user involvement and keeping them excited about the upcoming change. As a start, this project was close beta tested among our key partner clients and VanPeople employees only.
UX solutions
A Design System
The primary solution was to create a design system that was guided by not only best practices but also creative concepts.
Standardization
To develop protocols for each design step to ensure consistency and efficiency of work.
Customer Stickiness
To simplify the user experience, any unnecessary elements needed to be eliminated. Wilson Score method should be applied to reconfigure the platform.
Laying the foundation
This system is based largely on the principles of atomic design. The key idea behind this methodology being small, independent - atomic - parts, can be combined into larger molecular structures.
Bringing it all together
While creating these components, we collected them in a Sketch file, which we referred to throughout the design process. After a week or two, we began to see huge leaps in productivity by using the library when iterating on designs. One day, while putting together a last-minute prototype, our team was able to create nearly 50 screens within just a few hours by using the framework our library provided.
Presentation video
Project Learnings
Collaboration is key
The more eyes on a design, the more it’s exposed to varying opinions, experience, and critique — and this can only ultimately improve it. Or at the very least, test it.
Process in essential
For a project that is vast, it gives you a roadmap to navigate through what can be a foggy route. This is especially useful when you’re starting out.
