![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 3.234 10.567 L 0.598 10.567 L 0.044 0 L 3.788 0 Z M 0 14.267 C 0 13.588 0.185 13.115 0.554 12.849 C 0.923 12.569 1.374 12.428 1.905 12.428 C 2.422 12.428 2.865 12.569 3.234 12.849 C 3.604 13.115 3.788 13.588 3.788 14.267 C 3.788 14.917 3.604 15.39 3.234 15.685 C 2.865 15.966 2.422 16.106 1.905 16.106 C 1.374 16.106 0.923 15.966 0.554 15.685 C 0.185 15.39 0 14.917 0 14.267 Z" fill="rgb(255, 255, 255)" height="16.105846188517717px" id="d8ocSgdvf" transform="translate(20.148 3.872)" width="3.7883077087402377px"/><path d="M 3.146 2.171 L 0 2.171 L 0 0 L 3.146 0 Z M 3.079 14.156 L 0.066 14.156 L 0.066 3.655 L 3.079 3.655 Z" fill="rgb(255, 255, 255)" height="14.156313890536383px" id="Q86BCRZI9" transform="translate(14.648 5.534)" width="3.1458461538461666px"/><path d="M 11.897 13.292 L 8.706 13.292 L 8.706 8.108 L 3.19 8.108 L 3.19 13.292 L 0 13.292 L 0 0 L 3.19 0 L 3.19 5.25 L 8.706 5.25 L 8.706 0 L 11.897 0 Z" fill="rgb(255, 255, 255)" height="13.292307692307693px" id="gBNeo28SG" transform="translate(0.543 6.398)" width="11.896608000000015px"/></svg>)
MY ROLE
Main UX/UI Designer - Interaction Design, Design System, Prototype, Visual Library
DELIVERABLES
Visual assets
Components library
High-fidelity designs
New Figma file structure
TEAM
Outsourced Marketing Company
Developers (Web, iOS & Android)
QA
YEAR
2021-2022
At that time, Fluency Academy was looking to modernize the visual concept of all its products, aiming for a more fluid, relaxed, and welcoming appearance while maintaining its casual vibe with vibrant colors and elements that inspired students to learn.
We began with Memhack, which was the largest and main digital product of Fluency at that time, reaching more than 500k users. We seized the chance to enhance the app's appearance, as you'll notice. Overall, the user experience has been significantly improved.
Often, less is more. The statistics section that appeared on the dashboard when students logged into the app was found to be largely irrelevant according to research conducted by the Customer Success team. Additionally, some statistics were repeated at the end of the study session.
This allowed us to transform the dashboard into a library that automatically filtered and displayed the content students needed to study at that moment, while we kept the statistics only after the session or in deck details if accessed.
The study session is by far the most important feature of Memhack. Students can easily spend an hour reviewing content in a study session. That's why it has been given a more neutral, clean look that is less tiring and has more personality.
Rating your performance on each card is crucial for memorization in this app, as it calibrates the SRS and decides when to review content. Adding personality and enjoyment when clicking on a note has significantly improved the student experience.
Constantly collaborating with the rest of Memhack’s team, the design system was created consistently, well-organized, and tailored for Flutter, the technology used for both the app and the web version.
Having designed various features for Memhack over the years, the Design System has been modified numerous times, becoming robust while always maintaining simplicity and efficiency in each component.
Every decision was data-driven. Constantly in touch with directors, I also collaborated with the Customer Success team, Developers and QA through daily build reviews to ensure functional, intuitive designs. Navigation and interactive elements were streamlined for clarity.
To cover a wide range of study contexts and support the mission of democratizing education, Memhack has also been designed as a responsive web version that considers not only the dimensions of elements but also the usability differences across various devices.
As mentioned above, students can spend a significant amount of time using Memhack, and it was essential to adapt it for all study contexts. The dark mode was not just about aesthetics; it was a necessity to minimize strain on the eyes of those studying in dark environments.
During my years as the lead designer for Memhack, we also created a landing page to guide new students on how to use the application alongside their classes, as well as the main access page for Memhack's web version.
12%
Of the increase in the average rating given on the Apple App Store and Google Play.
31%
Of the decrease in the number of complaints about the app in the Customer Success team.
8%
Of the increase in the daily study time of students using the app.
11%
Of the increase in the adoption rate of Memhack through the web app.
Leading the redesign of Memhack as part of Fluency was a wonderful and rewarding challenge. From creating basic app elements to adding specific animations to enhance the student experience, my team and I significantly improved the journey for those looking to change their lives by learning a new language.
This was one of my first efforts at Memhack, which allowed us to build a solid foundation for many other features I developed with my colleagues in the future, such as adding gamification through streaks, voice recognition for pronunciation practice, and onboarding new students, among others.
