present.
A game to get people off their phones and enjoy the present moment with their loved ones.
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.
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.
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.
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.
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.
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.
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.
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.
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.