Smart People: the future of learning languages — Part 2: User interface
Context
As reminder, the project we were working on is to propose a digital solution to student between 18 and 21 years old who are unable to attend the Smart People summer camp.
Goals
The goals of this challenge was to develop the graphical identity of Smart People application and apply design principle and UI best practices. We should also create a high-fidelity prototype of the MVP and learn how to work with another designer on the same project.
Approach
After doing the user research and create a mid-fidelity wireframe, we realize 4 usability tests and choose to iterate directly on the high-fidelity wireframe.
Before we jumped into the hi-fi, we did a moodboard in order to see the vibes we wanted to express in our application. We looked for images that express learning by doing, highlight content, bonding, and the connection between digital and paper. We struggled at first, we wanted to focus on the “highlight content” and pictures of learning people’s. We realized then that it was not expressing the mood we were looking for.
This is the last version we came up with. We choose more to focus on the bonding mood.
Then we started doing our Style Tile so that we can have a first impression of what the app would look like. We completed this Style Tile while working on the high-fidelity and adding new elements.
We choose to use the yellow as our primary colors and use it on our buttons and title as a reminder of highlighting stabilo. The blue is mainly used on our selection buttons when it comes to quizz and riddle.
We used a classic Proxima Nova font to be easily readable, and black #000000 for the headlines. And a gray #999999 for the body text so that it contrast a little less and won’t tire the eyes of the user.
We wanted the app to be friendly, so we choose rounded the corner of our square so that it won’t feel sharp and scary.
We used an ocean green #48B693 and a roman red #DC5F66 to express right and wrong. Not to bright, not to dark, nice and pleasant to the eye.
High-Fidelity Wireframe
As this was a group project, we choose to realize the high-fidelity wireframe on Figma, which allow us to collaborate and design on the same screen at the same time. After we created our first high-fidelity wireframe iteration, including the feedback from our usability test. We did a Design critic with other team from Ironhack UX/UI Bootcamp, and gathered more feedback to iterate on our design.
The design critic helped us understand that we had some consistency issues between the “choose your culture” screen principally, but other screen aswell. The “lesson” screen was overcharged with text and content and not enough spacing. Some elements of the “quizz” screen was not contrasted enough, we had to checked our contrast issues between our colors on contrastchecker.
With those feedbacks, we adapt our design and create new screen. We realize some A/B testing with 6 users to be find out if the new design we made was understood by the user.
In the first redesign, we choose to use outline buttons in order to show the user that was actionable. The gray buttons looked more like disable buttons.
Those A/B testing helped us learn that our user would better understand our button’s state : outline for clickable content (A/B test n°1) and filled when active.
Redesign element
We realize some iteration on small buttons (toggle map-camera) so that it fit better on our screen, and be more visible and clickable.
High-Fidelity Prototype
Micro interaction
We used Figma to realize the micro interaction, and create the loader on Principle. The meaning of the loader is that we are given access to highlight content personalized to the interest of the user.
For the logo we choose the ampule idea for the innovation part, transform it into a human face with the brain expressing the connection.
We choose to use the all space of the footer for the riddle so that the user could still use the map while he is answering the riddle.
Let’s see the prototype
Next step
As next step, we want to realize some desirability test so that we be aware of what feel the user when he come on our platform. We will also iterate on the animation time, that seem to be too quick, so that the app be smoother.
Thank you
Thank you for reading me. Please share it with your friends if you appreciated our work, clap or comment if you have some feedback to make so that we can iterate once again.
