Planning Poker Online. Revolutionizing Story Estimation

Identity and UX/UI Design for a Scrum Poker Web Application. Check Planning Poker Online now !

by: Oriol Torné Codina

Nowadays loads of software development teams are organized in scrum, agile frameworks. Projects are broken into goals that are estimated in terms of complexity and developed in timeboxed iterations called sprints. This process allows the product to continuously improve and adapt to rapidly changing and uncertain environments.

Whether in offices or working remotely, online tools have become a cornerstone in modern workflows. Here is where Planning Poker Online comes into the picture: we have build an online task estimation tool for agile teams that makes planning poker efficient, intuitive and fun.

Project

Brand identity and UX/UI design for new-age collaborative task estimation service.

Client

We Agile You (WAY) is a technology startup with multiple products and services that aim at streamline workflows in software development environments.

We had two main tasks to cover at the design perspective:

• Logo and identity design. To lay the design foundations of WAY products and services.

• Build a web application based on a consistent approach with visual branding and high level of usability.

Process

The first step was to create a logo and set the brand guidelines, followed by a design system to hold consistency across all UI elements. We conducted research to learn about our user’s needs and sketched the first concepts in wireframes. Next we built a minimum viable product (MVP) to test our hypotheses and take the right decisions regarding the user experience and the features. At last, we improved the overall UI design.

Logo Design and Mascot

We wanted the logo to be friendly, approachable and cool because of the collaborative nature of the service, but also innovative, reliable and diligent. It had to give Planning Poker Online’s customers the feeling of working with a partner that helps build their business, not just a boring and impersonal voting service. Actually, Planning Poker Online goes above and beyond voting: it aims to act as a companion that help software businesses optimize their entire workflows.

The best approach was to create a logo that would set the style basis for future WAY products and a mascot that would take over the communication of the entire brand in an emotional and humanized way as well as could cover marketing goals and campaigns.

The creative process moved through the traditional stages from research and sketches to polished digital iterations. Focusing on the concepts of gamification and innovation we combined a poker spade icon and a rocket spacecraft, using the brand color (blue) and adding typography for longer versions.

Web Design

All the design stage was made in Figma, since our team had to collaborate remotely. We also used Confluence, Google Docs and Trello for documentation and task management.

Research

The research phase was about to get to know our users and their relationship with our product:

• Who are our users?

• How do they use the product?

• What are they needs?

• When is it used?

• What will be the most important functionality?

We conducted interviews and analyzed the competitors. It was clear that our early adopters would be software developers, product designers and product managers with abilities in technology. We also understood though, that the process of estimation could involve more people (in the validation phase for example). We decided that the cognitive load should be reduced and we should keep the functionality down to the basics. The product would be used mostly in desktop or laptop viewports (95% of usage), leaving the mobile usage almost irrelevant (5%).

UX Design

The web application seemed be have a straightforward functionality: vote, view the results and move on to the next votation. But the reality is that to achieve that in a team you need to accomplish more tasks, for example: inviting team members to the game, create or import issues and discuss them.

We decided to build a minimum viable product (MVP): a functional, reliable, usable, most basic version of the concept we had sketched. Our objective was to focus on obtaining feedback as early as possible so we could make quick design decisions and test our hypotheses.

We observed early on in a qualitative user testing that people used the voting tool only after discussing an issue for a long time in another platform, so we soon iterated our designs to implement a new feature: a side bar with issue creation. Later on and after receiving new feedback from users using our MVP, we also added an integration with JIRA and the possibility to link an issue to the original URL. Now our users could discuss the tickets in our website or quickly jump to the original issue with no effort, increasing our retention. The way creators would share the link would be using a URL, what would lead after a while to a viral growth.

We defined two types of users: the creator of a game and the other team members. Using this system we created two different variations of our UI so that only the necessary information was visible for each user, reducing the cognitive load and constraining user’s actions. We also added a premium account only for creators, with a 15 day free trial.

After a month and a half iterating and optimizing our MVP, we saw our total number of visitors triple from around 1000 users a day to more than 3000 and an average usage duration of up to 23 minutes. Also the retention and activation rates of new customers increased significantly.

We wanted the actual game to be the center of attention, so we build the subpages, settings and other features in overlays.

After seeing we were getting fairly noticed, we put our efforts in building a strong UI but never stopped the iterations using the feedback we kept getting from users.

UI Design

The UI was designed using a design system created following the brand guidelines, typography and color palette. As the mascot was chosen as the main tool of WAY communication, it was decided to integrate it into the website and illustrate content like the landing page and some flows like becoming premium and system feedback notifications.

We built our task estimation system using poker tables as inspiration, as we wanted our interface to be recognizable and familiar, but without giving in to the temptation of looking too much similar to an actual poker game. That would only confuse our real users and cause the decision making of choosing our product in a search machine only more complex (we helped solving that problem also testing different key words for the SEO).

As we wanted our UI to be as simple as possible, we constrained the number of visible colors. The only color really present in the UI was the color of interaction (our primary blue) and the rest were a number gray tones, black and white, except for the system alarm colors (red error, yellow warning, green success and light blue). The information was organized in a hierarchical structure using different typography styles and spacing, as well as shades of gray. The base font size was set on 18px and its line height ratio at 1.3em for headings and 1.5 for the other text sizes, to increase readability.

To make the interface consistent I used the general rule of 8, which states that all the elements in the design are a multiple of 8 in terms of width and height, just as their spacing. Creating this rule, the UI gained visual coherence, rhythm and made work easier for developers.

The icons were created always in the same style, roundings and line thickness. They were put in a square container of 24px and then in another one of 56px or 72px, depending on their functionality and place in the interface.

Responsive

Even though we were building a product almost only for desktop users, we didn’t abandon the small part using our product in mobile devices. We understood that people could also need to do the votation on the way and use smartphones instead and that if we forgot this we could indirectly affect the overall workflow. That’s why we also kept improving the experience in small screens and reduce the information to the minimum.

Continuous Iteration

After we laid the groundwork for WAY and Planning Poker Online, we are still in further development of the web application. As we grow in number of customers we also get valuable feedback and suggestions for new features and improvements, which keep us engaged in an endless loop of iteration and testing, releasing dozens of updates weekly.

This is a great challenge for us. On the road we had to get rid of some cool ideas because we don’t wish to end up offering a low quality product with countless features (a so called Frankenstein app), but instead focus on solving the root problem we were hoping to solve. Do one thing, but do it well.

Check Planning Poker Online now !

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by me:

https://orioltorne.medium.com/myshop-an-e-commerce-app-case-study-8b71dd91b74c
https://orioltorne.medium.com/creating-a-tuner-app-tunefy-2f711c113257