present.

A game to get people off their phones and enjoy the present moment with their loved ones.

Image alt tag

Overview

present. is a game to get people off their phones and enjoy the present moment with their loved ones. Its goal is to be the world's first and only app that doesn't want the user's attention but encourages them to put their phone down for a determined period. To achieve this peculiar endeavor, each participant must pay a fee to join each session as a representation of how much money their time is worth to them.

Process

  • Competitive Analysis

  • User Stories

  • User Flows

  • Lo-Fi Wireframes

  • Hi-Fi Wireframes 

  • Prototype

  • Developer Hand-off

Role

Lead UX/UI Designer in a team of 5.

Tools

  • Figma

  • Jira

  • Slack

  • Google Drive

  • Zoom

Duration

4 weeks

Problem

After investing a lot of time, resources, and research, the Present founders developed a prototype and found that the user interface design was not appealing and didn’t captivate their target audience.

Solution

With a thorough creation of User Stories and Competitive Analysis, I led my team in redesigning the app’s User Interface with key features and characteristics in mind: 

  • Simplicity. The app and its flow needed to be designed so that even the less-savvy users could easily interact with it. 

  • Speed. Every interaction should be as quick as possible since the idea is for people to get off their phones. 

  • Flexibility. Allow the users to play with people who still haven’t downloaded the app.

  • Gamification. Encourage the players to keep making progress in the art of being present.

Research
present.

Kick-Off Meeting

As a lead designer for this project, I gathered my team to discuss the scope, goals, expectations, and timeline. Additionally, in preparation for our client meeting, we worked on questions we wanted to ask to have as much clarity as possible. By the end of the session, the work methodology was clear, and each person knew their roles, the project deadlines, and the deliverables.

present.

Competitive Analysis

My team and I conducted thorough secondary research to understand the market better, its tendencies, best practices, and how the competitors tackled the same problem. We evaluated four competitors and carefully reviewed their features, premises, and user interface. We took careful notes that helped us create the User Stories and determine areas of opportunity to implement ideas for the present. app.

Ideation
present.

User Stories

After completing the secondary research and reviewing in detail with the client the app prototype they produced, I reunited the team. We worked thoroughly to identify the user stories that would help map the app and the user interactions. This was key to organizing our collaboration process and aligning our work with the client’s expectations and goals.

present.

User Flows

Once we completed the user stories, I met with the team and decided who would work on each flow.

I decided to work on the home page and the newly created flow of participants joining a new session. I was drawn to the home page design since it needed to be very simple; thus, it was an interesting creative challenge. I also chose the new flow since I enjoy creating from scratch, and unlike other screens, this one was not in the initial prototype the client shared with us.

Design

Moodboard

After the competitive analysis and understanding of user flows, we gathered user interface inspirations from many sources. We compiled them so we could all take some references for our design, noting trends and industry best practices.

present.
present.

Design Iterations

Before beginning the redesign of all the screens with Low Fidelity Wireframes, I proposed to the team an iteration challenge. We all designed two screens: The QR code scan and the congratulations page for the winners. We voted, and the team selected my design style as the guide for all the screens, and we mixed and matched elements from other designs to the tab bar menu, especially the QR code reader.

Lo-Fi Wireframes

After being endorsed by the team’s trust in my design, I created the component library to ensure a cohesive execution across all the screens. Once everyone completed their design, I worked with each team member, to adjust every detail until the app looked unified.

Style Guide

Once more, I proposed a small internal challenge to create high-fidelity wireframes iterations. We presented three proposals to the client, and they chose a mix of elements from all our designs, clarifying the graphic route for the project. Leveraging my previous years of experience with branding, I volunteered to create the Style Guide that summarizes logo, color, font, icons, and UI elements applications. 

High Fidelity Screens

With the Style Guide ready, we worked as a team to upgrade the Lo-Fi Wireframes into their High-Fidelity form. As the design progressed and the clients could see the app taking shape, a few adjustments needed to be made, and I collaborated and inspired some of my teammates to create design iterations.

Developer Hand-Off
present.

To ensure proper design execution, my team and I annotated every screen and the original components to help clarify each functionality and how every component works. We added a visual guide with the height, width, and paddings of the many elements and components used in the final high-fidelity screens. 

As a final step, we reviewed the developer hand-off files before the final delivery to the client to ensure quality and consistency across all screens and components.

Final Result: Prototype

Ultimately, once the final high-fidelity screens were refined, the clients were absolutely thrilled to see the interface. At last, I led the prototyping process of two flows: the game master and the invited players, to help bring the platform to life.

Reflections

Biggest Challenge

Leading a team is always an exciting challenge. It implies aligning different personalities, ways of work, and even time zones. It means inspiring everyone to bring their very best and challenging them to find ways to innovate, iterate, refine and polish until getting an excellent product. But, the best part of being a team leader is what I learn from everyone. I can say that every person I worked with on this project made me a better designer.  

Biggest Success

The final product itself was the most significant success. Hearing from the clients that this is better than what they expected and knowing that they feel confident to place this app in the marketplace, thanks to our work, means everything. Especially since I was so aligned with the mission and purpose of the project. I feel grateful that I was part of a team that is working to improve people’s lives.