Our Product Design Process

Asis Patel
Dec 7, 2016 · 7 min read

We, the Experience Design Department at Perform Group, have documented our ideal product design process. This is the process we use to launch and continually improve our products across the company. We’ve created a range of products across the sports media landscape successfully applying this process for brands…such as Goal, Sporting News, Voetbalzone, and more.

Image for post
Image for post

The Problems We Faced…

Prior to introducing our process we as a design department faced several challenges:

  • There was a lack of understanding of UX from the wider business.
  • The lack of understanding meant it was difficult to get stakeholder buy-in and apply a user centric approach to all projects.
  • It wasn’t clear what our role was to the wider business. Our aim is to solve problems, but we were mistaken as artwork-ers or wireframe-ers.
  • There was an inconsistent approach to different projects, making them a nightmare to manage and resulting in key stages being missed.

By introducing our process we’ve reduced the impact of the challenges we face.

Image for post
Image for post
We started by brainstorming our process

Our Solution…

We have defined our process into 7 key stages. For each stage we explain what it is and why we do it. Throughout we have used three people who represent the key people within the project team.

Image for post
Image for post

Let’s begin,

Time to grab the popcorn 🍿 Enjoy!

Image for post
Image for post

01 — Kick Off Meeting

The kick off meeting happens on the first day of the project. The whole project team comes together to define the project. 3 things to come out of this stage are: 1) why are we doing it? 2) who is it for? 3) what are the KPI’s? — oh and not to mention we make sure everyone is clear on their roles. Whilst everyone is in the same room this is also a great opportunity for people to share their expert opinions and ideas.

Image for post
Image for post

Image for post
Image for post

02 — Research

After gaining clarity on the initial project definition both the Product Team and the Design Team dig deeper and investigate the project through research. The Design Team focuses on investigating user needs, the existing market and what the key business stakeholders want. In the meantime The Product Team investigates the key business constraints and ultimately how the product will make money.

Image for post
Image for post

Image for post
Image for post

Image for post
Image for post

3 — Requirements Alignment

Once user and business requirements have been gathered, the project team re-groups. Within the alignment meeting the team create a series of project goals. This is where we make compromises with the aim to satisfy as many business and user requirements as possible.

Image for post
Image for post

Image for post
Image for post

4 — Ideation

Once project goals have been identified we feel it is important that everyone has a chance to express their ideas. As well as giving the whole team a voice it is another great opportunity to get a diverse range of ideas and expert opinions as everyone comes together.

Image for post
Image for post

Image for post
Image for post

5 — Part 1: Ideation & Prototyping

This stage of the process is all about creating tangible outputs which can be shared with the team for discussion and furthermore used for usability testing. As famously quoted from David Kelley, our goal is “Fail Fast, to Succeed Sooner”.

Image for post
Image for post

This stage can range from low fidelity prototypes which could be quick sketches linked together to make a clickable prototype. Or high fidelity prototypes that mimic the final user interface, these are more suitable for usability testing and demonstrating ideas to developers or stakeholders.

We use Sketch as our go to software for creating wireframes, high fidelity UI screens and Specs. We use InVision to create clickable prototypes and Principle to explore interactions adding finesse to them.


Image for post
Image for post

5 — Part 2: Usability Testing

We can now put prototypes in our hands and our colleagues hands. Most important, though, is the opportunity to get them into our users hands. This helps us spot issues before it’s too late as well as being able to validate ideas as we create them.

Image for post
Image for post

Using our prototypes we can quickly perform usability tests, allowing us to iterate on our ideas/prototypes. Two methods we commonly rely on are hallway testing, and remote testing (via Userbrain), although we also contact users or perform usability tests in the streets to gather quick feedback. Other methods we use are quick data gathering tests to validate our decisions. For this we use remote services such as Optimal Workshop or Usability Hub.

Image for post
Image for post

6 — Design Delivery

We validate our prototypes as much as possible before passing them onto the development team to build. This is our way of eliminating as much risk as possible.

We communicate our design via a high fidelity InVision clickable prototype. This gives a feel of how the product will work. Alongside this we also supply all our designs using Sympli. This allows the developers to click on the designed screens and get the specs for each individual element. With many of our development teams based around the world effective communication is essential.

Throughout the build we constantly communicate with the development team to address any issues as they occur and guide them to the finish line as smoothly as possible.


Image for post
Image for post

7 — Measurement & Analysis

Once our product is out there and being used by users we take the time to review it’s performance. We use analytical tools such as Google Analytics to review numbers/traffic and Hotjar to enable heat maps on our products — both are great ways to gauge user behaviours and check patterns. Getting feedback from users is essential. To validate the analytical insights we conduct further hallway tests or further remote user testing, this provides validation for our insights. Once we have our insights we discuss our actions as a team and our strategy to make the product better.


The Process in use

To give you an idea this is how we’ve adapted our process to fit different situations. Here is a break down of how this works across different project types.

1 — New Product or a Rebuild

If we were tasked with re-designing an existing product or asked to create a new product from scratch. Then we would go through the whole process in order to lay a stable foundation for the project and ensure the best possible outcome.

Image for post
Image for post

2 — What Happens Post-Release?

It’s not goodbye once a new product is released, it’s very much a case of constantly evolving the product, by analysing and iterating the aim is to make it even better. Nothing is ever finished.

Image for post
Image for post

3 — Quick Turnaround

This is when a client calls and asks for something to be delivered ASAP. If we don’t have time to do further research, it’s essential we still reference the original research to validate our goals and assumptions from the brief. We then go into the ideation stage prototyping and delivering a prototype as soon as possible. The solution is analysed and iterated upon further down the line when there is more time.

Image for post
Image for post

Finally…It’s Not a Linear Process but a Cycle

Throughout this post we have visualised the process as a linear process in actual fact it is a cycle which is constantly in motion. One point to note is wherever we are in the cycle, we always refer back to the requirements/project goals. This keeps us on track to the goals we are aiming to achieve.

Image for post
Image for post

Thank You!

Thanks for reaching the bottom. Hit us up with some 💙 to let us know you enjoyed it!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store