/portfolio

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.

PROJECT TYPE

Personal

SKILLS

UI/UX Design, Typography

Figma, UI/UX Prototyping Tools

FIELDS

UI/UX Design, Graphic Design

STATUS

Finished

2021

LIVE PROTOTYPE

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

Paper wireframes

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.

Digital 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.

The 'logged out' screen
The 'sign up' screen
The 'log in' screen
'Forgotten details' screen

Styles

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 UI library containing colour and typography styles, logo, etc
'Logged out' screen
The 'sign up' screen
The 'forgotten details' screen
The 'log in' screen
E-mail verification screen
Re-send details reminder screen

The final Figma live prototype is available at the top of this page.

That's not allowed, sorry!