Teletón - Aplicatón

Mobile Sketching Wireframes Ideation
  • Year: 2019 - 2020
  • Client: Teletón
  • Team:
    • Project manager
    • Three designers (including me)
    • Developers
My role in the project:
  • Summarizing features and sections at the beginning of the project.
  • Sketching and wireframing the first ideas.
  • Proposing the first user flows.
  • Building the first interfaces in Sketch.
  • Guiding the design team through the entire process.

Early sketches of the app.
Early sketches of the app.

Context

Mid 2019 the client was looking for a refresh of their mobile app for the next Teleton campaign scheduled for the 29th and 30th of November of the same year. This need appeared after Teleton noticed their audience wasn't as engaged in the television streaming of their annual campaign.

Goals

Main goal: Urging people to participate in the Teleton campaign through their phones.

Specific goals:

  • Showing events related to the campaign.
  • Informing the audience about events and news regarding Teleton.
  • Visualizing the last tweets from Teleton's official account.
  • Allowing people to sign up and participate in the events the app shows.

Users

The user archetype was defined by the design team through user personas, building on everything we previously knew about Teleton since it is such a massively known foundation and campaign in Chile.
During the creation of these archetypes I monitored the work of the designer assigned to this task to make sure we were going in a good direction.

Archetypes. These were made by another designer in the team, not me.
Sketches and diagrams with the initial features of the app.
Sketches and diagrams with the initial features of the app.

Process

Building the user personas we had a basic idea of what we had to do. During this step of the design process, I personally feel like it is easier to let ideas flow through handmade sketches using just pen and paper. I initially had a vague idea of how the interface would look like and putting that into a sketch helped me land the idea.
These ideas were discussed with the Project Manager who helped define the functionality of the app and helped making more sense of what we were proposing from the design team, this allowed us to focus on working on ideas that could be developed in time with our deadlines.

To this followed the building of the low low-fidelity prototypes made in Sketch to formalize what was said during the iterations with the PM. During this stage we experimented with a grayscale interactive prototype to make sure the user flow was correctly planned.

Wireframe in grayscale
Wireframe in grayscale
Gif showing the user flow
Gif showing the user flow recorded with Quicktime

Remote User Testing

After some iterations with the team to define the graphic style of the app, we had a prototype ready to be tested with potential users. For this we used Maze, which allowed us to evaluate the behaviour of the users through a remote user testing.

Heatmaps generated with Maze.
Heatmaps generated with Maze showing were users clicked or tapped the most.

Findings and observations

With both usability reports we got from Maze and the comments from our coworkers we had a good amount of things that required correction, like hierarchy, correct use of text and navigation problems. One of the main changes was moving the menu to the bottom of the screen for easy and more comfortable access. We also added a floating button so people could make their donations through the app, since it is one of the actions that most people associate with Teleton.

Design process for the event and home sections.
Design process for the event and home sections.

Learnings

Being part of the design process of a mobile app was enriching in the sense that it was one of my first experiences designing in this format. One of the instances that I enjoyed the most was defining the features the app would have with the help of the PM. I truly appreciate those collaboration moments.

Even though we delivered the app, I would make things different. I feel like it's always good to be critic of our own work and in this project in particular I would definitely spend more time researching the users and testing with them, especially during the early stages of the project.

However I feel like a lot depends on the context, the deadlines and the budget for the project; but this was one of the experiences I would love to do again, just because I learned a lot from it.

Screens of the app.
Phones showing the app.