Excella Retro

2016 - 2017

retro.excella.com

A real-time retrospective and collaboration tool for scrum teams.

UX Designer

Team

UX Design: Lindsay Boylan | Development: Brendan Sawyer, Sam Blissard, Cameron Ivey, Alex Hoffman, Jon La Marr

Methods

User interviews, user flows, wireframing, high fidelity design, style guide, developer asset handoff

Tools

Sketch, Visual Studio Code, legal sized paper, a limited selection of magic markers

Goal

Help connect remote scrum teams by allowing for them to participate in a collaborative retrospective.

MMP

Redesign the original retro.excella.com to be more consistent with ExcellaLab's brand, less buggy, and more user friendly. 

MVP

Redesign the original retro.excella.com to use Google's Material Design components.

The Gist

When I first started working with the team building and supporting Excella Retro, the plan was to simply update the styling to be consistent with Google's Material Design. This was because the plan was to use Material Design when rebuilding the site from scratch. 

In it's second iteration, dubbed Excella-Retro-2 (we're clever, here at Excella), the plan changed to build an Angular 2 / Firebase web application using Angular Material. I worked with the team to get the user flow and elements down, then handed the designs and style guide (colors and typography) over to them to incorporate using Material.

Where we started

What could use improvement.png

The interim

Quotes from Interviews

“When dragging and dropping ideas to group things into a theme, being able to come up with your own description for a theme would be great (instead of just defaulting to the first item in the group).”
“From a larger feature overview, it would be great if the facilitator could choose what “sections” to have. ”
“A cool feature would be to allow the facilitator to determine the number of dot votes each attendee gets, as opposed to whatever is happening right now.”

First sketches

After getting feedback from current users of the old Excella retro, I sketched out a couple of key pages for the devs to get started on. It was important to us as a team to be iterative. I trusted them to use Angular Material elements as much as possible so that even when I only provided them with sketches, they could create something pleasant for the user. We would refine the overall look as we went.

Style Guide

Dev assets include:

  • Colors, which are Excella branded colors with additional grayscale and accent colors. 

  • Typography, Excella's 2 brand fonts are Marydale and Helvetica - I wanted to carry those through to Excella Retro to stay consistent with Excella's branding.

  • .scss sheets for fonts and colors were also included.

    • Should Excella's brand ever change, these are easily adapted.

Where we ended

High Fidelity Design

Create a retro or join one using an existing Retro ID

Add retro name, decide number of votes, and create different steps

Using Retro ID given by retro creator, join an existing retro

Add feedback relevant to this step

Admin can view/copy Retro ID, end step, or end entire retro

After each step, participants have the options to group feedback and give each group a name

After grouping, participants can use their allotted votes to decide which groups they'd like to discuss further

Lessons learned

Moving a scrum ceremony that works so well as an in-person meeting is challenging, and frustrating. Each scrum master has their own way of doing things. Creating a more flexible experience is key.

Next steps

Usability testing! Some teams have already started to use the tool, and have provided awesome input. I'd like to continue gathering feedback and iterating on our current version as needed.