Design Research
Visual Design
1 Month
1 Product Manager
3 Software Engineers
International Olympic Committee (IOC) is a global organization that is at the back of the Olympic Games. Based in Switzerland, it organizes and sponsors Olympic-related sport events, including Winter & Summer Olympics and Paralympics. For each game, IOC uses the internal tool called Olympic Management System (OMS) to handle +20,000 game participant (athletes, staff, media reporters, service workers, etc) data.
The tool had not been updated in awhile, so IOC data operation team had hard time managing participant info. As IOC prepared for Tokyo 2020 Paralympic Games, it decided to revamp OMS to improve the operational workflow.
How can we improve Olympic Management System (OMS) tool to help manage participant info effectively?
As a sole designer for this project, I worked cross functionally with Product Management and Software Engineering to deliver the final solution that increased the task completion rate by 45%.
Talking to Users
First thing first, I started the project by getting more information about the target users I was designing for. Because the team was spread across Europe, I ran user interviews via Zoom. I also ran surveys to triangulate different data points. After interviewing the operation team, I gained insights about the end users:
- Goal: Manage large data at scale for operational efficiency
- Interests: Save time on simple tasks and allocate resources to more challenging tasks
- Behaviors: Use OMS primarily to view participant information and add or edit participant data
- Pain Points: OMS is hard to use and learn
Heuristic Evaluation
After hearing directly from users, my next question was ‘Which part of OMS is creating user pain points?’ To find the answer, I reached out to users again, asking them to navigate the tool as if they would use in their natural settings. Through this exercise, I identified several problems.
Usability Tests
After defining problem areas, I ran usability test as well to evaluate the product navigation. I asked users to complete three different tasks that were related to the main function of the tool, which was to find, register and edit participant info.
Here, I was surprised to see that the direct path rate was relatively high, all over the average, while the average time and task easiness rating remained low. Having conducted various research studies, I began triangulating various data points to decide on the next steps.
Key Takeaways from Research
These are the key research insights that helped inform design strategy:
- Olympic Management System serves key functions - register, edit, and search - that are straight-forward yet crucial to data management
- Users do not want to see too many functions from the tool. They want the tool to be simple and easy-to-use as much as possible.
- User navigation is not too complicated. Direct path rate was above average.
- Users are overwhelmed by user interface. The amount of text, category filters and lack of visual hierarchy complicate the user experience.
Based on the research insights, I realized this project was going to be a more visual-focused rather than ux project. In order to set the angle of the problem space, I developed the following problem statement:
How might we reduce information overwhelm and create visual hierarchy to help improve the operational workflow of IOC?
Getting inspirations from other products
Having defined the project scope, my next goal was to understand how other companies addressed the information overwhelm and visual hierarchy in their dashboards.
One of the key solutions I examined was Google AdWords for it was a common marketing tool that was used by the IOC team. Since the team was familiar with Google AdWord’s user interface, I looked into the design of the tool for inspirations.
I also examined Airtable, one of the most popular task management recently. I've heard a lot of positive reviews from people and after asking them why they enjoyed the tool, people mentioned its easy to understand the chart design. When I looked at the Airtable chart myself, the color lables also caught my attention. I liked the way these eye-catching labels were mixed in the plain white chart without creating any distraction.
Sitemap
Before jumping into design, I collaborated with my Product Manager to build the sitemap. The goal was to create a simple and intuitive web structure. Since the tool offered a lot of features, our goal was to create a structure by sorting them based on each category. After engaging with our users, we defined the four key features that could serve as the main navigation of the web. We considered the remaining features as secondary and grouped them for each category.
Now, I started brainstorming for design using pen and pencil. I sketched out key screens for each key user flow, focusing on key ui components and screen interactions.
Because of time constraint, I jumped straight into hifi design and explored various interactions to find the most efficient and straight-forward user flow.
The MVP
Having gone through multiple rounds of iterations, I aimed to create the design that aligned most closely with users’ goals and behaviors. For each practice, I referred back to research insights from the earlier stage. The goal was to create the solution that aligned most closely with user goals, needs and behaviors. Here is the first draft of design I created.
Iteration, iteration and iteration
Through user testing, I gathered meaningful feedback to improve design. These insights helped me define rooms for improvement in design.
1. Improve visual hierarchy
Users thought the plain white chart was a lot easier to read than the old design. However, they still wish to see some highlights and distinction for each data, because each data and number is still relatively difficult to recognize.
2. Rearrange data category
The order of data category does not align with how users navigate the chart info. For example, when people look up participant information, such as game and function, they first match participant number or name and then look up other info. These orders are reversed in the current chart design.
3. Restructure feature priority
Some features, such as 'add participant' or 'add multiple participants' are primary functions that should stay on the table chart screen, which is the landing page of the tool, rather than as part of the secondary tab. Relocate key features to higher up in the hierarchy for easy access.
Responsive Design
Because users mainly access the tool through web, desktop design was prioritized for this project. Once the web tool design was completed, I designed a web page design for cross device applications.
Design System
As part of the project, I created the design system to streamline design process moving forward.
Design Impact
The final solution I delivered helped improve the following metrics. These numbers helped my team evaluate the success of design and whether it did its job to address user pain points. We saw improvements in all the metrics we measured.
40.6%
52.8%
92.2%
Increase in task completion time
Increase in task easiness rating
Of users who preferred the new solution
Next Steps...
Prepare for Tokyo 2020 Paralympic Games
The tool will be used during the Summer Paralympics so our team needs to prepare for the implementation process with the Engineering and Product teams. Look forward to hearing more feedback from users after they use it real-time.
Globalization
Since Olympic sports game is an international event, the tool is used by people who speaks different languages. While the initial design was designed in English, our team in Spain will take over to customize design based on different languages. As we continue with the global implementation process, we might encounter new problems that rise from cultural differences, such as users' reading habits, behaviors, etc. These discoveries will challenge us to work on new designs.