WHIIP
Redesigning an OKR (Objectives and Key Results) work management platform for individual and teams
What is Whiip?
Whiip is an OKR-based work management platform that empowers individuals and teams to set, track, and manage their projects and tasks—ultimately enhancing productivity and efficiency in the workplace.
My Goal
At Whiip, my goal is to optimize the user experience for setting, tracking, and managing OKRs.
My role
UX/UI Designer
Involvement
-
User research
-
Competitor analysis
-
Persona
-
Wire-framing
-
Prototyping
-
Usability Testing
Project Scope
2 Designers
2 Developer
1 UX Manager
Tool
Figma
Duration
5 month
My Impact
-
Assisted the product manager with usability testing and competitive analysis, identifying 15 areas for improvement and suggesting 10 innovative solutions that were incorporated into the final product.
-
Boost overall productivity, and reduction in training time for new users.
-
Contributed to the development of an OKR software that received positive feedback and led to a 30% increase in user engagement.
The Problem
Exploring the Current Experience
The current product presents difficulties in providing an intuitive and user-friendly experience for managing objectives and key results. Users encounter constrained usability when setting, tracking, and managing their goals, resulting in reduced productivity, diminished user satisfaction, and lower adoption rates.
I was tasked with conducting user tests on our product, we recruited a diverse group of potential users representing our target audience. We created a testing environment that simulated real-world usage scenarios and prepared a set of tasks for participants to complete using our prototype.
Taking the lipstick from the table
User Pain Points
1. Navigation difficulties
Currently, users struggle to navigate OKRs on the platform, mainly due to the lack of a filter system, making it difficult to quickly check objectives' status or find specific information. The platform's poorly organized content also exacerbates the issue.
3. Inadequate guidance
The platform provides insufficient guidance through instructions, tutorials, or help resources. This lack of support may leave users, particularly new or less experienced ones, uncertain about effectively using the system.
2. Poor visualization of progress
The existing platform lacks visualized progress and clear representation of progress towards objectives and key results, making it difficult for users to evaluate their performance, pain point areas for improvement, and adapt their efforts as needed.
4. Inadequate collaboration
Within the existing platform, users might struggle to promptly give feedback, exchange information, and communicate efficiently with their team members.
Understand the Users
Primary Personas
Based on the user research I did, I developed two personas that facilitated the conveyance of my insights to the team. These personas further enabled me to maintain a strong focus on users' objectives and challenges as I advanced through the design process.
Key User Stories
By creating key user stories, I can prioritize development efforts and ensure that the most important features are built first, based on user needs and expectations.
How Might We
create a platform that empowers individuals and teams to track progress towards goals in a way that is transparent, easily accessible, while fostering motivation and productivity?
Competitive analysis
By analyzing the competitors’ products, we aim to understand their strengths, weakness and find opportunities that can improve our product.
Ideation
Based on the research, here are the key design considerations for the design:
Intuitive & Clear
Supportive
Real-time Collaboration and communication
Wireframe Sketches
Before diving into low and high-fidelity prototypes, I started to create some sketches and to start defining the flows, features, contents and layouts.
Low-Fidelity Prototype
After the sketches, I started to create wireframes on Figma. Design includes: 1) Visualized progress 2) Tutorial and Guidance 3) Setting, managing and Assigned OKRs 4) communication and collaboration 5) customization
User Testing
Before proceeding to high-fidelity designs, we tested our low-fidelity prototypes to ensure that all necessary content and features were included, and to evaluate the usability of the interaction and navigation. This allowed us to make any necessary adjustments and improvements.
Improvement 1
The user testing revealed that unclear options and labels in the filter system led to confusion for users. The current filter options had the same style, making it difficult to differentiate between them. Users preferred a more organized set of filters and advanced search functionality to make it easier to find what they were looking for.
Improvement 2
Users want more functionality when expanding objectives, including progress tracking on each key result, commenting options, and notes. The updates feature was found to be confusing, as users were unsure whether it was related to editing their OKR or updating progress towards their goals. More clarity is needed to improve the user experience of the OKR system.
Improvement 3
Users find the layout of creating the OKR too small and difficult to edit. And its too crowded to display all the information, making it harder to develop effective OKRs. Users prefer a larger, more user-friendly layout that allows them to easily view and edit their objectives and key results.
Improvement 4
During user testing, users also express a desire to see visualized alignment in the OKR system that help them align with the company and team objectives. Additionally, users wonders that if they are able to create OKRs together as an option and to provide feedback to one another.
Final Design
Overview and Alignment
Visualization of progress
By visualizing progress towards objectives and key results, users can better understand their performance and whether they are on track to meet their goals. Additionally, this visualization can promote transparency and accountability within teams and across the organization.
OKR page design
Setting, tracking and managing
The OKR page allows users to access and view individual, team, and company OKRs, filter information, and edit, share, update, and comment on OKRs. Real-time notifications and feedback promote transparency, collaboration, and accountability, making it easier for users to achieve their objectives and key results.
Setting OKRs and Actions
Step by step and offering supports
Providing guidance, resources, and support when creating OKRs, including ratings and suggestions for objectives, key results, and actions, which can help users develop effective OKRs and achieve their goals more effectively.
Collaboration and Reflection
Work together and self-analysis
Providing various collaboration methods can enhance empowerment, motivation, and engagement among team members. Self-reflection features can also help individuals understand their performance and gain a better understanding of themselves.
Branding
Logo Design
Logo Idea
When I joined Whiip, the company was in its early stages, and there was a need to establish a comprehensive brand identity for the organization. This included creating a logo, developing an illustration/avatar, and defining a color palette that would represent the brand consistently across all its marketing and communication materials.
At Whiip, we aim to design OKR platforms that connect teams, help them progress toward their goals, foster growth, and promote alignment.
The logo concept is inspired by the company name's two "i"s, symbolizing connection, collaboration, and growth. The stylized "i"s represent teamwork and partnership, creatively incorporating our brand's core values and the purpose of our work management platform. It's a unique and memorable representation of our brand identity, capturing our mission to foster collaboration and drive growth.
Final Logo Design
Combination mark
At Whiip, our mission is to design OKR platforms that connect teams, help them progress toward their goals, foster growth, and promote alignment. The aim is to create visually appealing logos representing the brand and conveying the company's values and purpose.
Design system
Reflection
Collaborating on the work management platform project has been an incredibly enriching and gratifying experience. I am grateful to have had the opportunity to work alongside a skilled and dedicated team. As we worked together to bring the design to life, I faced challenges related to the development process. These challenges turned into valuable learning experiences that will undoubtedly contribute to my professional growth,
"Efficiency" and "collaboration" were at the core of the work management platform's spirit. Through this project, I honed my skills in crafting a visually appealing and user-friendly interface that fosters efficiency and collaboration among team members. I also discovered the importance of effective communication within our team, as well as the significance of incorporating it into the platform's features. Additionally, I gained insights into UX principles and how they can be applied to create a seamless and satisfying user experience.
