MINNA APP LOGIN SCREENS
For my most recent Figma project, I created the login screens for a made up Japanese learning app called Minna (みんな), which is an informal way of saying ‘everyone’.
I first collected inspiration from existing apps and UI design portfolios, as this was my first time designing a login screen. I then made paper wireframes which I translated into digital ones, before moving on to the styles.
This was another self-driven task to learn how to use Figma. I found myself becoming a lot more confident in creating my design system and obtaining the results I wanted. I also aimed to stick to the WCAG in terms of typography and colour contrast, and finished the project in one day.
UI/UX Design, Typography
Figma, UI/UX Prototyping Tools
UI/UX Design, Graphic Design
Below is the live prototype that resulted from this project. The interface consists of six screens which follow the login screen journey, including the creation of a new account and the recovery of login details. Please note that the prototype is best viewed in full-screen mode (click the icon at the top right corner).
THE DESIGN PROCESS
The first step was to collect inspiration from existing mobile apps and UI design portfolios. This allowed me to have an idea of what a login screen typically consists of, and what design trends are currently used in them. I translated this newly acquired knowledge into paper wireframes.
When I finished the paper prototypes, I created digital wireframes based on them. These served as a very simple prototype and a way of trying different things with the layout. I aimed to improve usability by keeping ways of switching between creating a new account and logging in with an existing one, and added ‘back’ buttons in later iterations.
After setting up the wireframes containing the main layout and user flow, I focused on the interface. I wanted the app to look professional, while maintaining some lighthearted elements to highlight the fact that it is a learning app and make it attractive to different audiences (more casual learners, for example). To make the changes easier, I created a UI library based on components. I also set up my own colour styles, which made colour management very easy. Colours were chosen by taking inspiration from pictures of Japan.
The final Figma live prototype is available at the top of this page.