Invest with intent
During my tenure at Monolith, my primary focus revolved around a new project, token.com, a savings app designed to help users grow their money through a high-interest account.
The project aimed to develop a Minimal Viable Product (MVP) for launch in Brazil within a four-month timeframe. The marketing branding for the token.com app had been conceptualised before my arrival, and my task was to design a product that seamlessly aligned with the established branding. The challenge was to create an engaging and visually dynamic app for money growth, avoiding the conventional appearance of a standard banking application. Stakeholders envisioned a gamified and interactive interface, emphasizing simplicity while offering a unique user experience.
Plan
As the sole UX/UI designer on the project, I developed a streamlined workflow that facilitated a quick and efficient process for the entire team. The accompanying diagram illustrates the structured flow of work.
Discovery and Define
After weeks of discovery and definition, involving stakeholder meetings, competitor analysis, and user interviews, I identified the product's essence, its target audience, and ensured alignment with the stakeholders' values and core ideas. Once I had the foundations established, I transitioned to the creation phase.
Creation
I presented multiple ideas on how to visualise money growth in an engaging manner.
The chosen approach involved introducing a character-guide on the home screen, animated to reflect the user's growing funds. Additionally, interactive animations were incorporated for actions like activating or topping up an account.
Preliminary wireframe designs were presented in Portuguese for testing with a Brazilian audience. The ideas behind the wireframes tested well.
Determining key features for the MVP was crucial, with a focus on a "Know Your Customer" (KYC) process for new customer sign-ups and a user-friendly home screen.
The KYC process, was designed to be enjoyable and featured interactive elements such as displaying customer information on an ID card.
Within the home screen, I identified essential user actions, including topping up and withdrawing funds, understanding the growth mechanism, seeking assistance, and viewing a forecast of potential earnings within the app.
Design system
To ensure visual cohesion, both a Design system within Figma and a UI style guide was created for token.com, with the UI style guide building upon the existing marketing style guide.
Adapting and refining the marketing colour palette for UI purposes, the design focused on accessibility and harmonious integration of colours and elements.
The result was a well-crafted interface that met the project's goals and provided an engaging and visually appealing experience for users.
KYC journey and screens
The video below shows the KYC journey and how a user becomes verified to token.com as a banking product.
Animation sheets
To assist developers in replicating UI animations, I generated documentation containing precise timings for elements such as opacity, rotation, and position. This proved to be an invaluable and time-efficient resource for the developers, particularly given the intricate nature of the animations I had designed.
Home screen
After the KYC process, the user is then invited into the home screen to deposit their money. The video below shows the flows along with the animations
Conclusion
In conclusion, the token.com project stands as a testament to the successful fusion of strategic planning, user-centric design, and creative problem-solving.
The MVP was launched and was a success which allowed the company to create a more in-depth cryptocurrency investment app off the back of the MVP.