Metro Retro
Project sector:
Digital Product Development
Role:
UX Consultant. UI Design. Illustration. Brand Development
In the words of the founder and creator Stephen Whitfield, “Metro Retro is a free web app that helps teams run productive, engaging and fun retrospectives. It uses real-time updates, adaptable templates and a quirky sense of humor to riff on the classic paper based retrospective but taking advantage of modern tech!”
Read more about how the product started here.
I've included a few visuals in this case study to give you a taste of Metro Retro but for the best experience, take a look yourself, it's free!
Metro Retro (MR from here on) had been focusing all of their efforts, rightly so, on getting their product working as intended. They had reached a point where it was time to review UX decisions, add polish to the UI, create a marketing site and give the brand a personality before launching to the wider market. Up to this point, only a closed BETA testing group comprised of designers, product owners, QA and developers had used the platform.
My primary roles within the project were:
The product is for everyone and anyone who needs to run agile retrospective or futurespective sessions with their team. Aimed at both distributed and co-located teams, real-time collaboration and interactions are at the core of its usability.
As most of the product had been built by the time I joined the project, my initial focus was on running discovery sessions to establish the application tone and style direction. Accordingly, I conducted market and competitor research to validate any design direction taken. The insights I gained helped us to understand the existing application landscape so we could position MR to the correct market space.
After establishing an aesthetic, I moved my attention to the application UX. It was important for MR to be a tool that could be picked up and used with a very easy learning curve. This is because the entire ethos of a retrospective is that it is a quick process for teams to conduct together, without major barriers to entry. Keeping the workflow and UI logic understandable was a core requirement to ensuring MR’s ease of use. We experimented with many layout variants, considering how the product may need to expand when future functionality is added.
While finalising UI decisions, I moved my attention to the brand personality. Our colour palette, icon system and typographic choices had already started to set the tone, but the brand needed more to stand out. I was also thinking about the broader strokes of creating the marketing site and social collateral, and for this I needed a wider range of assets to avoid a bland identity.
This is where our ‘mascot’ was born. He has a name, but that’s only for us to know.
Creating this single asset lead us to rework the application’s UI in certain areas, because we now had a personality to inject throughout MR. When you use the app, you’ll see him appear whenever we need to relay a message or indicate a user action.
The marketing site almost created itself at this point. With aesthetic, tone and personality in place, I was able to quickly iterate multiple variants for testing before we finally settled on what you see today.
The site’s primary purpose is to showcase the product. Our hero video shows its functionality in-situ and allows you dive right in and create your first board.
Rather than launching a separate window or application, the site transforms directly into the application. This allows users to quickly get going with their next session, championing that ease of use ethos.
Since its launch, Metro Retro has grown rapidly, with consistent updates and improvements to functionality. The team at MR are always open to feedback, so have a play and let them know what you think.
Besides the privilege of getting invited to help launch a product that the team had been developing for over a year, this was one of the most rewarding projects I’ve worked on in a long time. Metro Retro is only the beginning for this company, so keep an eye on what they release next.