PRODUCT DESIGN / INDUSTRY DESIGN PROJECT

Peercise

Empowering team leaders to run engaging and customizable online retrospectives
Peercise is a tool that helps teams collaborate and create an enjoyable, more efficient virtual retrospective. It features a progress review at the start of every meeting so that teams understand how they performed during the last sprint and what will be discussed. Team leaders have access to a variety of controls to customize every meeting, and team members can control anonymity so that they feel comfortable providing honest feedback.
Skip to the High-Fidelity Prototype
team
UX Researcher/Designer (Me)
UX Researcher/Designer
Client/Developer
My ROLE
(Design Audit, Competitive Analysis, Ideation, Usability Testing)
Duration
4 weeks
Tools
Figma
Google Suite

Introduction

This was an Industry Design Project in which I collaborated on a real retrospective website app that is still in the early stages of development.

A retrospective is a meeting held by a software development team at the end of a project/process to discuss what they did well and not so well, and how they can improve for future iterations. These meetings are normally in-person and interactive, but because of the COVID-19 pandemic, teams have had to work remotely and attend retrospectives virtually.
Problem
While there are many online retrospective tools available, most are limited in customizing for language preferences and are expensive to use. The client created a retrospective tool because he noticed that members of his teams were having difficulty staying engaged during online meetings. The client wanted to improve the MVP by adding more features that would enhance team communication and make it easier and fun to use.
Goal
Design an online retrospective tool that helps team leaders run efficient, customizable meetings that keep team members engaged.

Research

1. Gathering Information During Client Interviews
Before we started working on the project, the client had already conducted user research with people from his own teams at the software development company in which he works. Based on our conversation with the client and the research notes he provided us, we discovered the following:

1. Many online retrospective tools are available, but they do not translate all of their labels into Spanish, and they are expensive
                   
2. Users need: 
We focused on designing for user needs because providing Spanish translations and determining product pricing was outside of our project scope. However, all of these key findings informed the creation of a persona on which we based our design decisions.
2. Existing App Design Audit
We examined the existing app design, generated assumptions of user pain points, and identified key areas for improvement.
3. Competitive Analysis
The client named two of his product’s largest competitors: Team Retro and EasyRetro. We also looked at Reetro and Retro.Works in order to understand a wider range of existing products’ unique strengths and discuss potential features for Peercise.
Unique Strengths of Existing Online Retrospective Tools
2. Sketching Screens
Using the user flows as a guide, we sketched out ideas about potential screens so that we could create a prototype and get user feedback. 

We started sketching dashboards that would allow users to keep track of their organizations, teams, and retrospectives. We also sketched what a retrospective meeting screen might look like with features listed in the user flow.

UI Design

We used Figma’s online collaboration feature to choose typography and a color palette, create components, and design the retrospective meeting screens. We chose a monochromatic blue color palette to help users feel calm yet professional as they engage in a retrospective. Bright colors such as red, green, yellow, and light blue help distinguish between different topics. We chose Raleway as our font to add an element of fun to the tool while still being readable in different sizes.
Side-by-Side Comparisons
Our proposed designs make better use of screen space and make options, controls, and important information more visible. In the retrospective discussion screen, responses are organized in columns for improved readability.
Proposed Retrospective Screen Details

High-Fidelity Prototype

Results from Testing the Prototype

We conducted moderated remote usability tests with two people who have participated in an in-person retrospective or team meeting. We wanted to find out if they could easily navigate through a retrospective using our prototype.

We gained valuable feedback about our designs:

“Call to action” buttons need to be placed in easy-to-find locations. Participants had trouble figuring out how to create a new retrospective from the user dashboard, which is the first screen users see after creating an account or logging in. In the prototype we tested, users have to navigate from the user dashboard to the organization dashboard and/or team dashboard to be able to create a new retrospective.
Team Dashboard
In the Team Dashboard, the participants did not immediately see “Create new retrospective” in the upper right corner.
User Dashboard
Revised User Dashboard
We changed the user dashboard so that users can either click on “Retrospectives” in the left side menu and open up the retrospective wizard to start a meeting, or they can click on “Start a retrospective” in the upper right corner. This helps achieve the goal of making the app easy to use and efficient in starting a retrospective right away.
Make it easier for users to understand what icons mean. When asked about which icon to click if they wanted to reveal their team member responses at the Brainstorm stage of the meeting, the participants were uncertain. As new users, they did not know what the light bulb and eye icons symbolized in the top right corner.
Retrospective Brainstorm Screen
Recommendation:
In order to make it easier, we recommended to the client that he add hover-over text to indicate what the icons mean or always have labels beneath the icons. The client might also consider placing the icons below the top bar so that users understand that they can change aspects of the current screen (either show team member responses or show who wrote each idea).

Conclusion

While we could not help with adding a Spanish translation to our designs or determining product pricing, we were able to address user needs. Based on our research, we think that the features implemented in our designs will help team leaders run efficient, customizable meetings that keep team members engaged because of the following:
Lessons Learned
Next Steps
The literal next step was to hand off the high-fidelity mockups, style guide, and prototype to the client/developer.

If we continued working on the project, we would conduct more usability tests and further iterate on the designs to reflect user feedback.

Other Projects

IntroductionResearchDesign ProcessUI DesignUsability TestingConclusion