"iLearn: English" (http://www.ilearnenglishapp.com/) is an iOS application to help people learn English. This app was developed through a partnership with my husband Elvio Vicosa (http://elviovicosa.com), who is a developer.

I designed the second version of the app (more details about the release: http://elviovicosa.com/blog/2014/03/06/new-version-of-ilearn-english.html). At that time, I was starting my studies about design and UX, and I used the lessons I learned during this period to bring the second version of iLearn to life.

On this post, I would like to share how the process of redesign the application took place and also give a bit of information about what motivated each change.

Challenges

I had a few challenges in the course of its development, like:

  • Best practices when designing for iOS
  • What's the best screen flow
  • How to deal with different screen sizes
  • Where to find great work I could study

Despite all the challenges, everything that I designed was based on two constants: simplicity and usefulness. I've done many different versions of the same screen, over and over, but all of them were focusing on simplicity and usefulness.

Branding

Left: first version. Right: second version.

In the first version of "iLearn English", the branding had four different icons: Vocabulary, Writing, Listening and Create word. During the planning of the second version, we discussed the possibility of adding new features beyond the four already existents. Therefore it was necessary to replace the existing branding, supporting the new features. In the new version, I developed a cleaner and intuitive logo that resembles a lamp bulb. Its meaning refers to many things:

  • Idea
  • Light
  • Clarity
  • Knowledge

That's completely aligned with what the app was built for. The light bulb logo extracts the idea of: "if you click this light bulb icon, you will learn something new".

Left: first version. Right: second version.

The orange color was used as the main color. It is vibrant, symbolizes change, movement, vitality and interactivity. In design, the orange color commands attention without becoming aggressive as the red color, thus it's considered friendly and inviting.

Typography

The typography used for both branding and the application was Helvetica, because it is a neutral font. It's clear and without intrinsic meaning in its form. In order to create hierarchy distinction, I used different styles and sizes when designing the app.

The font size has varied according to different uses, but its size was always larger than 11 points, as recommended by iOS Human Interface Guidelines - http://bit.ly/1v8ZU9q.

Colors

Color palete

The color palette is composed of simple colors, which allows the user to focus on the content without distraction. The predominant colors are: orange, white, blank and dark gray. They are used in a way that promotes the content understanding, as well as text readability.

User Experience

Menu

Left: first version. Right: second version.

The first version of iLearn, the menu had too many things, being polluted and confuse. Beyond the needed buttons to access the application tools, it also included bar charts about the user progress. Those charts were progress bars without any information regarding its meaning, so it was more confusing than useful.

I decided to clean this screen up, removing all the unnecessary elements, showing only the items that were extremelly important for the user. Cuting the extra fat of it helped to reduce the cognitive complexity of using the app's menu, making simpler to understand and use.

Vocabulary

Left: first version. Right: second version.

I designed the screen "vocabulary" using a white background, which allow a better view of content and hierarchy of events. The screen is extremelly clean, showing only the title of the tool (on this case "Vocabulary"), the word the user is being tested on and the positive and negative buttons. The "Vocabulary" tool allows the user to check if she/he knows a word already. In case she/he doesn't, then the a full screen image is shown together with the word spelling sound.

Listening

Left: first version. Right: second version.

This screen was reviwed to put the entire focus on the images being presented. The entire screen is filled with the four images the user will have to select after listening the word. In order to present the word together with the image, I used a white/translucent white strip on top of it. When the user is playing with this tool, the most important thing is the image, for that reason I treated the word as an auxiliary element.

Writting

Left: first version. Right: second version.

This tool was redesigned to be more aligned with the iOS look and feel. The first thing I designed was a more appealing keyboard, similar to the one that's part of iOS. The second thing was to give the real importance to the content, on this case the image. The image covers the entire screen, it can be seen even behind the keyboard. One key improvement of the user experience was the addition to the screen that shows what the user has typed wrong, in case the user makes a typo.

Featured by Abduzeedo

I was quite happy to discover that iLearn was featured by Abduzeedo, a well-known and respected blog about design: http://abduzeedo.com/weekly-apps-yplan-flink-ilearn-and-more.