Redesign of Oi’s Wap VAS portal, in 3 versions: HTML5, XHTML e WML.

This portal is mainly a storefront to Bemobi’s VAS products in partnership with Oi (such as music, apps etc) but also includes some institutional services and links. In this project, I:

  • helped stakeholders to define strategies and priorities;
  • reorganized contents to better showcase our new products;
  • redefined the website’s pages and content structure around themes;
  • worked together with the development team to define strategies for a lighter and faster portal;
  • designed a modular interface structure that can be easily managed;
  • designed interfaces that were more visually appealing and according to Oi’s new identity guidelines.

Bemobi, 2014

Information architecture, UX and UI Design:

Erica Zambrano

Front-end development:

Fernando Figueroa

wap.oi.com.br

Defining the problem

in order to help stakeholders achieve consensus on the project strategy, I asked them to collectively discuss and answer previously prepared questions about all the “why, what and how”s. I also used a method called Performance Continuums, in which we map, between totally opposite directions, where we think the project is (square) and where our goal is (star).

Note: the ones shown here are already edited. The actual process involves paper, colored pens and a lot of talking!

Personas

First, I searched for data regarding the states where each mobile carrier was more representative, trying to find a pattern. Then, with my team’s help, I built 5 personas to validate the layouts, one from each of the top 5 states with Oi users. In the end, they didn’t help much when designing the page, but were useful after the page was done, to check if any of them would quickly lose interest in the page.

Organizing Content

I hosted a card-sorting workshop with stakeholders and coworkers to organize all our contents and products around themes. Then, I divided the content in pages, estimating how much each element would weight in kb and respecting what was our defined page limit for better performance.

Final product

Final product: you can see the final product at wap.oi.com.br on your smartphone or on the layouts below.