DELIVERABLES
Wireframes
UX/UI Design
Prototype
DSM Library
Animation
Design QA
ROLE
Senior Designer
YEAR
2018 - 2019
PROGRAMS
OVERVIEW
The TOTUM app project focused on enhancing a student discount platform by integrating advanced features like the PASS ID onboarding, while addressing user needs through iterative design and testing. This involved market research, competitive analysis, ideation, wireframing, prototyping, visual design, and user testing to create a more intuitive and engaging experience. The project aimed to reduce drop-offs, improve usability, and align with business goals, resulting in a streamlined app that evolved with the brand.
PROBLEM STATEMENT
The initial TOTUM app faced challenges in user onboarding, particularly with features like PASS ID, which required complex verification steps leading to high drop-offs. Students struggled with lengthy processes involving sign-ups, membership choices, document scans, and payments, compounded by unclear flows and backend issues. The goal was to simplify these interactions, reduce flaws, and create a user-friendly system that met government requirements for identification while appealing to students' needs and frustrations.
ROLES & RESPONSABILITIES
As the digital product designer on the TOTUM app project, my role was pivotal in conducting research, creating wireframes, mockups, and prototypes, and ensuring high-fidelity designs aligned with user and business goals. I collaborated closely with the project manager through Jira tickets and reviews, presented solutions to stakeholders, and handled quality control by analyzing screens and optimizing assets. Additionally, I prepared design system libraries (DSM) to streamline handoffs and reduced app size through manual exports.
DURATION & HANDOFF
The project spanned several months, with key phases like design sprints lasting five days each. Handoffs involved uploading prototypes to Invision for review, exporting assets in specific formats for iOS and Android, and sharing via Dropbox. Once approved, designs were integrated into Jira tickets for developers, with ongoing feedback facilitating refinements.
SCOPE & CONSTRAINTS
The project scope encompassed improving onboarding flows, particularly for PASS ID, while incorporating usability tests, mood boards, and visual designs to evolve the app. Constraints included limited initial user data, the need to optimize app size, and adapting to government-approved identification requirements. Some features were prioritized based on feasibility, with unused concepts explored for future phases to balance innovation and technical limitations.
RESEARCH
The research process heavily involved market analysis, competitive evaluations, and user interviews to understand student behaviors and app usage. We requested data from the data team to inform quick solutions, but with limited initial insights, we conducted interviews and tests with real students at universities or in-office. By clustering responses, we identified patterns that revealed UX insights and areas for improvement, guiding the design toward a more user-centric platform.
RESEARCH GOALS
Define how students use apps on a daily basis.
Learn about popular apps.
Understand business goals.
Define common behaviors.
Determine user's needs and frustrations.
Identify areas to improve.
MARKET RESEARCH
First, I researched the market by comparing similar student discount apps. I signed up for each, gathered data on their flows, and created artboards with screenshots for easy comparison. This helped uncover how these apps appealed to users and highlighted opportunities for TOTUM to differentiate through better onboarding and engagement.
COMPETITIVE ANALYSIS
A competitive analysis was performed to understand the strengths, weaknesses, similarities, and differences between competitors. This step was crucial in identifying gaps in user interfaces, feature sets, and overall experiences, such as cumbersome verification processes. Insights from these analyses informed our strategies to create a more intuitive and efficient app.
SERVICE MAP
Below is a simplified example of the PASS ID onboarding process and a bird's-eye view of the entire app with PASS ID onboarding. This service map provided a strategic blueprint, illuminating user paths and pinpointing opportunities for enhancement. It helped define feature priorities by focusing on high-impact areas like reducing steps in verification to minimize drop-offs.
IDEATION & DESIGN
During the ideation phase, the project manager requested new screens via Jira, which I noted on sticky notes and placed on a whiteboard with printed UI screens for review. We incorporated design sprints, a five-day process for answering critical business questions through design, prototyping, and testing ideas. This allowed us to pinpoint problems, identify user personas, and generate innovative solutions quickly, blending user needs with technical feasibility.
WIREFRAMES
The wireframe sketches were mocked up on paper then transferred into Sketch or quickly created using my own wireframe library. This process focused on structuring layouts and content to satisfy user and business goals in a technically feasible way, bypassing complex tools for rapid iteration.
USER TESTING
In the early stages, wireframe prototypes were tested on people from different departments for quick feedback on copy and flow. For PASS ID, we conducted extensive usability testing with students to identify flaws, reducing steps and improving the process. We also tested marketing materials and sign-up flows at universities, interviewing at least 10 students to gather valuable data on issues and strategies.
HI-FI DESIGNS
A competitive analysis was performed to understand the strengths, weaknesses, similarities, and differences between competitors. This step was crucial in identifying gaps in user interfaces, feature sets, and overall experiences, such as cumbersome verification processes. Insights from these analyses informed our strategies to create a more intuitive and efficient app.
PROTOTYPE
Each idea or flow was converted into a prototype, uploaded to Invision, and sent to the product owner for review. If feedback was provided, changes were made before presenting to the business. This interactive preview facilitated precise feedback, setting the stage for user-focused development.
USER TESTING
In the early stages, wireframe prototypes were tested on people from different departments for quick feedback on copy and flow. For PASS ID, we conducted extensive usability testing with students to identify flaws, reducing steps and improving the process. We also tested marketing materials and sign-up flows at universities, interviewing at least 10 students to gather valuable data on issues and strategies.
TESTING & LAUNCHING
During the design phase, we collaborated to refine high-fidelity prototypes in Sketch, iterating based on Invision feedback. One responsibility was quality control, where I analyzed every new screen before launch, creating rules for text sizes, padding, and colors. The project concluded positively, with the new features like PASS ID addressing initial challenges despite constraints. Although further testing of unused concepts could have added value, the launch met goals and satisfied stakeholders.
CONCLUSIONS
The success of this new feature within the company stands as a reflection of the diligent research, ideation, and design work put into the project. Less confusion and a streamlined process emerged as key outcomes, leading to a product that not only looks great but functions with efficiency and user-friendliness. Though some improvements were left on the drawing board, the results speak to the quality and thoughtfulness that went into solving real-world problems and adding significant value to both the user and the company.