Redesign of Oi’s Mobile Learning platform, called Para Aprender.
The original product was about 1 year old, when the clients asked me to do a series of improvements regarding visual design, usability, and changes to adapt new content. Having participated of the original version during my internship, I felt that what the product really needed was a complete redesign. In this project, I:
- talked to the stakeholders, understanding what they thought the product needed;
- did an heuristic evaluation to find more problems;
- rebuilt the information architecture from scratch;
- worked with my design partners in the visual design of HTML5 (smartphone) and XHTML (feature phone) versions;
- documented the project for the developers, breaking it in smaller flows;
- presented it to our external client, defending even our bypassing of some of the carrier’s branding directives.
Reestructuring from scratch
In the beginning of the project, the marketing manager and I discussed a lot of improvements on the first version such as making room for celebrity-promoted courses (thus, with bigger photos), improving quizzes, offering audio and video to the user etc. We decided it was better to redesign the whole product from scratch to accomodate all of these.
The new structure is focused in receiving a "lesson of the day" and using it as a starting point for the other media available (video, audio, books, quizzes etc) and to previous or next lessons. The first version of the website had everything in one page, making it confusing to the user and creating very heavy pages for a small mobile bandwidth. The interactive media are also available through media galleries, a feature we created for this new version.
I consider that the decentralization of media and creation of media galleries were the biggest improvements in comparison to the the first version, because together they create a navigation without any dead ends.
The toughest challenge we faced in the visual design was convincing Oi to abandon their usual color palette and let us use a more sober, serious one. Our argument was that here, the colors don't have merely an aesthetic or branding purpose; instead, they act as an important wayfinding element. Since the user can be enrolled in more than one course at once, it is extremely important that the colors differentiate well, especially in contexts where they are seen together (the most critical one being the multi-course media gallery screen).
This is why we needed a much more flexible palette with a lot more colors than what the official palette could offer us. We also took the chance to give the product a more serious look, since it's a mobile learning product, focusing towards a more adult public.