Event design and front-end development
Client name and some outcome details obscured
100% escalation decrease
Overall conversion increase
System admin efficiency increase
3 new contracts signed
Summary
In this project, I conducted thorough user research to create the strategy, design, implementation, and scalable design system, allowing client to be in full control of their site contents.
Team
I was the product designer and web developer, working a graphic designer, and product manager.
Challenge
Client hosts a recurring annual event with their CMS product, engineered without user-centered design in mind, the product was extremely powerful yet difficult to use. In the past, client had to sign a new contract every year to have a team update their content throughout the 1 month long event, which has caused multiple escalations and resource exhaustions on both sides.
Instead of participating the cycle of having client pay for every year’s site content update, I advocated to look into creating a new, scalable and adaptable experience for them so they can better own the product, save time and budget.
Research
The target user in the project was client’s internal admins, who were in charge of updating site contents in the CMS during the event.
For quantitative research, I was able to go into client’s account and look at their past history, including contracts signed, feedback given, and support chat scripts. Overall, client has expressed a considerable amount of frustration of using the CMS, they felt stuck because a data migration for them will be too costly at the moment.
Since most quantitative data are readily available in client’s account, I wanted to utilize contract hours to focus more on the qualitative side. I interviewed client admins and the director, asked them to demonstrate how they update contents with the current system, assembled the notes into user flow analysis to investigate the target user’s mental model, which revealed their relation to the CMS system, behavioral patterns, motivations, goals and struggles.
Development & more research
I shared those research insights with the team. On the front end, I utilized those insights with our graphic designer to create a new user interface for client’s audience signing up for the event. On the back end, I investigated the capability and limitation of client’s CMS system, and used a modular approach for the site architecture, which required minimum user effort to update site contents.
Initial prototype was built and ran by client, using notes from the contextual observations, I revised the user flow analysis, which lead to revisions in both the front end UI design and the back end site architecture. Time and budget constraints only allowed for one round of edit, however, the final prototype was easily scaled up to host all contents for the event website. Documentation was also provided to help new users onboard.
Vue.js’ Template Syntax allows client to control contents from a jSon file-like experience.
Design system
A good design system should be like a symphony, it’s made with pieces that echos with each other, to inspire people and sets them up for success.
I consulted client admins to ideate and prioritize the UI components based on their branding and long term needs, those UI components were delivered with HTML, CSS and JavaScript where they were accessible and customizable.
A custom Vue pattern library was also delivered offering UI patterns, best practices and shortcuts to utilize the Vue.js code.
And finally, an interactive guideline on how to use all the pieces together in the design system, should the user ever need to scaled up the site.
Outcome
The end product was shipped on time, overall, it gave client admins great user-control in managing event site contents that saved them tons of time, headache and cost.
Client also saw conversion increase (exact number obscured), had 100% escalation decrease, and signed 3 new contract with us.
Reflections
I was lucky to be allowed to create a new approach for client’s problem. To me, the most important lesson was to not go with the flow when a problem presents itself, especially a recurring one. With web development approach that also reflects user research insights, the project was easy to implement on both front and back end.
I used this project as an example to advocate the value of user research to other developers, that like many other fields, web development can also benefit from user research.
What’s next
In the next step, I would like to run more evaluative search with client admins during the event while they were using the product. Then collect more feedbacks after this year’s event, learn the difference of their mental models before and after using the product, and use those research insights to further improve the experience from the product.