Susana Binder
Experience researcher & designer

App design

Research · User Flows · Wireframes · IxD

Summary

Sector
Video streaming app

Brief
Develop an MVP

My Role
· UX Researcher & Designer
· Benchmarking, interaction design, technical requirement specification

UX Deliverables
· User flows
· Wireframes

Duration
6 weeks (October-December 2019)

Mobile app design —  Recast

Introduction

Recast is a blockchain-enabled tokenized platform governed by smart contracts that reward everyone in the economy of sport and esports (i.e. fans, brands, stars, teams, broadcasters, sporting federations) for their engagement. *

What sounds rather simple put in a sentence turned out to be a major challenge on the UX level.

Our task was to produce an MVP with clear user flows and interactions and pixel perfect UI.

On this project, I collaborated with the startup founder and his remote developing team, and my UI colleague.

* https://www.f6s.com/recast

Process

1️⃣ Immersion

We kicked the project off with three days of immersion with the startup founder.

It was important to understand the current dynamics of the sports broadcasting sector as well as the competitive advantage of the proposed app. While we were working and sharing thoughts and ideas with the founder, we also contributed to the branding of the app. The values we agreed the app should stand for helped to streamline important decisions regarding its inner workings and type of interactions.

2️⃣ Analyze & Synthesize

The amount of information and its complexity made it necessary to invest over a week into reappraising, processing and synthesizing it. 

3️⃣ User flows

See section Deliverables.

4️⃣ Wireframes

See section Deliverables.

5️⃣ UI screens and 6️⃣ Prototype

These last two steps were entirely performed by my UI colleague.

Immersion room

Immersion room

Deliverables

User Flows

Once it was clear what exactly the app should achieve, my UI colleague and I started drawing the user flows.

They included generally needed ones like the sign-up process, actions from home, user profile, sharing and exploring, and some more specific ones that I'm not able to share here.

We also had to define interactions, the notification system, and content actions and permissions.

We sent every finished user flow to the client and received feedback during a call the day after. Once all user flows had been validated, we went on to design the wireframes.

User flows

User flows

Wireframes

We then went on to translate the user flows into wireframes.

Additionally to what we had defined in the previous stage, we needed to design the app's alerts, a variety of video views, and a very basic desktop version.

Wireframes

Wireframes

Challenges & Learnings

It was the first time I worked professionally on an app design from scratch. Hence, I took for granted that I would face some major challenges related to details of the deliverables.

What I did not anticipate, however, is that the biggest challenge would turn out to be our internal communication.👇

What is an MVP?

We knew that we were supposed to design an MVP - but no one stopped to think about what this meant in practice. And wrapped up in the excitement of the moment, we ended up designing the complete app.

The fact that we didn't define the scope of the MVP generated an important work overload, additional costs for the client, and a delay in the final delivery.

💡Learning

Make sure you define clearly the scope of the deliverables before taking up the work.

Define your deliverables

If you google the term user flow, you'll come across a variety of images that all stand for the same. It makes you wonder whether there is some confusion around the topic or if different ways to approach user flows are possible.

In any case, my colleague and I had a different understanding of user flows which slowed down the work somewhat.

The wireframes did not require any definition. However, we probably should have talked about their resolution before starting to design them. With the aim of speeding up the pixel-perfect UI design of the screens, we prepared almost pixel-perfect wireframes. Having loads of symbols added to the time-consuming aspect of this project.

💡Learning

Make sure all members, especially the ones working on the same thing, are also on the same page regarding its form and content.

Time management

I'm usually not someone who has a time management issue, quite to the contrary.

In this case, however, time evaporated, and we found ourselves behind schedule big time.

Looking back, I think it took me too much time to analyze and synthesize all the information and try to figure out the inner workings of the app. I still believe it was necessary to ensure correct user flows and everything that follows.

But this and the fact that we hadn't limited the dimensions of the MVP but were trying to address the entire app meant that we had to produce too many user flows and wireframes (with the associated definition problem I already mentioned).

6
Weeks
13
User flows
15
Wireframes