I am Ariel Cotton.  I'm an artist, product designer, & maker of interactive things.

I craft beautiful, human-centered interfaces for web and mobile applications. I draw and write comics about life in Berlin and New York City. I even tinker with electronics and make interactive art from time to time.


UNICEF

I was hired to collaborate with UNICEF on a language-learning app for refugees in Greece. They already had a web version of the app in place, and were now implementing a mobile version. As a person with an interest in learning languages, especially if it involves helping immigrants or refugees, I dove zealously into the project. However, there were many areas of the product that needed considerable amounts of improvement, as well as numerous restrictions from the stakeholders on what we were permitted to do.

Categories
UI/UX design, language learning, native app

Ariel Cotton UI UX Design UNICEF language school app learning

Initial release: user flow, welcome screen, login & signup, error messages

When I was brought onto the project, the product was only a few weeks away from its MVP deadline. The team handed over the mockups from the previous designer. With so many designs, and no user flows, it was unclear how the screens were supposed to interact with each other. Thus, my first act was to put all the screens together in a massive user flow diagram. Next to each screen I also wrote any questions, feedback, or notes that I had about that specific screen.

Ariel Cotton UI UX Design UNICEF language school app learning

Doing this helped me see which areas of the app still required some screens to be designed. The signup and login section ended up being one of my main focuses before the MVP release. My first step here was also to design a user flow just for this section.

Ariel Cotton UI UX Design UNICEF language school app learning

The app may be used without logging in or creating an account, but the stakeholders wanted to push the login feature. In order to do this, we decided that every time the users opened the app, they would be greeted with a welcome message that explained the benefits of creating an account. One of the biggest ones is being able to save and track your progress as you learn Greek.

On this notification box, the user has the option either to dismiss the message, or to visit a screen that allows them to log in or sign up. Initially the screen included some more information regarding what signing in would allow the user to do, but we deleted it because it was too much text. The majority of this app’s users are children, some of whom don’t know how to read or speak the language in the app. Thus, we tried to communicate using visuals in place of words, as often as we could.

Ariel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learning

On the login and signup screens, we also mitigated this issue by including icons in addition to text. Finding the correct icons was a nuanced task. The majority of this app’s users come from non-Western countries, especially the middle east. Having icons that carried universal, non-localized meanings was essential. It was also important to consider the direction in which each icon would be read, since Arabic is read from right to left. Therefore, arrow icons were not ideal. The icons had to be easily understood in any given direction.

Ariel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learning

Another overlooked area of the app that needed to be dealt with was error messages. I spent a considerable amount of time writing copy that was user-friendly and informative, and considering whether the error messages were better delivered inline or in a toast.

Ariel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learning

Additional features: lesson downloads

One of the features that we needed to implement as soon as possible after the MVP release was the ability to download entire lessons and use them offline. I created a user flow for how this should work, and tried to research other language-learning apps, such as DuoLingo, to see if they had similar features in place.

Ariel Cotton UI UX Design UNICEF language school app learning

There were many questions regarding implementation. One of the biggest ones was on which to include the downloads feature—from where to make it accessible. The lessons of the app are grouped into chapters, and from there, the user can visit individual lesson screens. We considered several approaches where the user would be able to download only through the lesson screen:

Ariel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learning

We tried it with the chapter screens:

Ariel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learning

In the end, due to technical considerations, we designed the download option to be made available only on the chapter screens. We also discarded the initial download concepts and went with an online/offline switch for the lessons, similar to Spotify. The final iteration looked like this:

Ariel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learning
Ariel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learning

General improvement: user testing, look & feel

One challenge our team faced was trying to convince the stakeholders that many aspects of the app’s UI/UX left a lot of room for improvement. The product owner and I designed and conducted user tests, in order to demonstrate proof that the app’s usability could be optimized.

I wrote a user testing script. With that script, the product owner and I held individual testing sessions. We gave the test users pointed tasks, and watched to see how quickly they completed them. Some of the tasks were also a bit open-ended; our opening was to ask the user what the initial thing was that they felt like doing when they first loaded the app. We recorded videos of the test users’ screen activity, as well as everything they said.

We prioritized quantitative data over quantitative——namely, watching how the users navigated through the application took higher priority over hearing their responses to our questions. However, we tried to strike a balance between both, and generally gather as much information as possible.

With these testing sessions, we were able to confirm many of our concerns about the app’s usability.

Another aspect of my job included reenvisioning how the app could possibly look and feel, because no one was happy with the design. I tried to clean up the design and make it more legible:

Ariel Cotton UI UX Design UNICEF language school app learning

My team liked it, but also all felt that since the app’s primary audience is children, it should look more childlike and playful. I experimented with some hand-drawn cartoons and icons for a more child-friendly feel.

Ariel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learning
Ariel Cotton UI UX Design UNICEF language school app learningAriel Cotton UI UX Design UNICEF language school app learning

Top