Christian Diaz

Christian Diaz

El Chavo Álbum

About the Project

In 2013, Digimedia Shop released an iPad Sticker Album App based on the popular mexican franchise of El Chavo. The opportunity was to take advantage of the growing smartphone market by releasing an iPhone version.

Company

Digimedia Shop 

Client

Grupo Chespirito 

Disclaimer

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. The information in this case study is my own and does not necessarily reflect the views of Digimedia Shop or Grupo Chespirito


The Challenge

When I arrived at Digimedia Shop, they were developing an iPad App based on El Chavo, a very popular franchise in Mexico. The User Experience was already defined: it should feel like a real sticker album for kids, but taking advantage of the added value than an iPad can offer, by allowing the users to unlock sounds, videos and games by completing certain pages.

So the real challenge was: how can we implement the same experience that a big screen offers, in a smaller form factor like the iPhone 5?


 

The Mission

I had the mission of fitting all of this sticker album experience onto a mobile screen. This was my first UX assignment in the real world, so it was quite a challenge. And because we were a really small company at the time, I had to do all of this on my own, from sketching to Pixel Perfect screens, to assets delivery.

But apart from maintaining the core experience, there were more precise requirements:

  • Maintain the same pages that exist in the iPad version
  • Maintain the same layout for each one of those pages
  • The stickers should look visually stunning, like in the iPad version
  • Each feature available on the Pad should be available on the iPhone: friends, messages, sharing, trade stickers and of course, the store.

Quite a challenge, indeed.


 

The First Approach

I started by sketching some potential solutions that didn’t take me anywhere. How can I integrate an app that makes a lot of sense in an iPad form factor to a smaller screen?

Then I tried a different focus: What if we offered a complementary app instead of a fully functional sticker album? you know, and app where the user can buy, trade and manage all of his stickers. That sounded good but it didn’t resolve the main issue, which was to take advantage of the fast-growing mobile market.

In a good case scenario, this approach would be useful as a marketing tool for the iPad app, so the goal was clear: I had to find a way to create a mobile sticker album, without compromising the core experience.


The inspiration and the solution

I had an iPhone 5 at the time, and the AppStore was growing bigger each day. Like most of the first time iPhone users, I was fascinated by discovering new apps, so one day (a free comic book day), I downloaded a Comic Book reader app. I was really surprised when I found out that they resolved the small screen issue by using zooms and motion, so I tried a similar approach for the album:

 

  • I proposed to use the landscape view, that way we will have all the space available
  • I defined that the best sticker layout would be 2×2 stickers, that way the stickers would look big enough
  • What about the pages with 6 stickers? I proposed to use a scroll for those pages, so the user can see 4 stickers at the same time, but scroll if he wants to see more
  • About the core experience (hold & drag a sticker to place it on the album), I proposed to use a right drawer menu, in which the user will have the stickers available only for that page that he is currently viewing.
  • The rest of the features would be available using a hamburger menu, so we can make the user to focus on one thing at a time

 



Focus group and implementation

We showed the screens in an iPhone device to a group of potential users, and their response was really favorable. They couldn’t believe that the full sticker album experience was successfully ported to a small device, without taking away the fun of dragging and placing the stickers on each page.

The stakeholders were really pleased with what we achieved, so they greenlighted the development of the iPhone (and Android) version of this product. Unfortunately, there some circumstances that forced the company to close before this was released.

I’m really proud of how I was able to resolve a big UX challenge, but I’m most proud of the feedback that the current and potential users gave to me: most of them couldn’t believe how easy and fun was to have a mobile sticker album, without taking away the fun of dragging and placing stickers in the pages.