Christian Diaz

Christian Diaz

Rever Score

About the Project

Rever Score is an app that lets people on the front lines of manufacturing companies to improve processes by applying the scientific methodoloy, .

Client

Rever

Company

iTexico

Available

App Store | Play Store

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 iTexico or Rever


The beginning

Rever started as a client of iTexico and I was assigned to conduct the Design phase for the first version, along with another designer. We started by creating documentation based on the requirements from the client.

My role in this project was as a UX Lead. We had the chance to conduct User Testing sessions with potential users in their workplace, so we built prototypes and took them to their hands to validate and iterate our hypothesis.


 

User Testings

The client had a clear idea of what to do with the app, since he had a lot of experience working on the frontlines of some companies. The thing was that he wanted this app to follow some particular UX patterns that I thought that would be a pain for the users. We built an InVision prototype, and we were able to conduct user testing sessions for three different iterations of the app that we were proposing.

As we found out in the collected data, users felt confused with the first approach, so we transformed the interface using more standard components. When we took that prototype with other potential users, the learning curve almost disappeared compared to the first iteration, so we followed that path.


Documentation

After we validated our prototype, we started documenting all of our work:

  • Findings from User Testings
  • User Stories
  • Information Architecture Map
  • IxD Flows
  • Wireframes
  • InVision Prototype for Mobile

We worked on this project with a Waterfall process, so the Design phase was finished before moving into development.


 

Implementation and results

We finished the design phase of the project, and then it was implemented using the Titanium platform. It was published to both app stores (iPhone and Android) and had a great success with the market that it was aiming at.

The app was very successful among potential investors too, so right now they have their own startup company, with their own design and delivery teams. I’m very proud of being an important part for this to be what it is now.

First Responders

About the Project

A mobile app for first responders, so they can see what’s going on in an emergency call 

Company

iTexico 

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 iTexico


The idea

The idea was to create a product that would be used by first reponders, so they know what’s happening in an emergency call. This included the ability to respond to a call, set statuses depending on their location, and see the map and information of the emergency situation.


 

The User Experience

It was very important to define a very quick and easy User Experience for the responders, so I proposed a custom UI for both platforms (iOS and Android). The most important CTA is the «Respond» button, which is useful for the user to set their status and to know in which status he currently is. The information of the call was divided into 4 different tabs for quick access:

  • Info
  • Map
  • Activity
  • Chat

This four tabs keep the information organized and the user can acces quickly, by just swiping or tapping on it.


Night mode for night calls

One of the features that I implemented for this product was the Night Mode. This was proposed for night calls, but has something different from the «night modes» of other apps: this only shows the content in a monochrome theme, using black and red colors to avoid hurting the eyes of the responders.

According to our client, this color palette was something that they are used to see in other equipment, so it was going to be a really helpful feature for them.


 

Pixel Perfect Design

The final UI design was as clean as possible, because I used color code and iconography that varies depending on the nature of the emergency call an its status.

As an added value, I proposed to the client to use a dark theme and let the responders decide which one they like the most, and he loved the idea, so they’re able to select between light and dark themes for better readability.

 

 

Video Editing App

About the Project

This is a project that I’ve made for a client, working for iTexico. Their idea was to create a mobile app that could edit, merge and publish videoclips 

Company

iTexico 

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 iTexico


Proof of concept

The product was planned to be released only for iOS so I made a first approach with different layouts and color palettes. I considered that this was going to be developed on native iOS, so I used native components so the developers could bring this to reality more easily.


 

Iterations and final look

The client requested for a more clean look & feel, so I started doing iterations to the UI. He opted for a white theme with a purple accent color. This brings a really clean look to the app, and makes it really easy to understand for the user.

Los Coscorrones

About the Project

Originally planned as an unlockable mini-game inside the Chavo-Album app, Los Coscorrones was a whack-a-mole inspired game for the iPad based on the El Chavo characters.

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 idea

The Chavo-Album iPad app was about to be released on the AppStore, and we were planning the Phase 2 of the app. Aside from adding more pages and more stickers, we decided to develop an unlockable mini-game that would appear when someone completed a certain sticker page.

I was commissioned to come up with a good gameplay mechanic that would be fun, challenging, and flexible enough to be implemented also on the iPhone version of the sticker album.


 

The Planning Stage

 

The Phase Two planning was a team effort, so we decided to have a couple of brainstorming sessions. Someone from the team suggested that the gameplay should be addictive (Angry Birds was the example we wanted to follow), and then we noticed that El Chavo, the main character of the franchise, used to live inside a barrel so we agreed that a «whack-a-mole» game style with barrels should be a good starting point.

We pitched the idea to the stakeholders and they agreed that it was very good, so I proceeded to detail the gameplay mechanics and features.


The Gameplay

I started to detail the gameplay from the most simple concept: the user had to tap on the characters as soon as they appear on the screen, and before they went back into the barrel. Depending on the timing, the user would earn different amount of points based on their reflexes and precision. To unlock a new stage, they should get a high-score on the current stage.

We tried to implement a timer, but we felt that it was not challenging enough so I came up with another idea: to give them unlimited time to earn more points, but implement «lives». So this brought another mechanic into the mix: to have characters that the user shouldn’t tap, or he will lose a «life».

Finally, we thought that the difficulty level should be increased as the player unlocked new levels, so we added more barrels and we increased the speed on each one.


Lives, Power-ups and Business Model

The gameplay was defined, but I still had to refine the business model. I knew that we will let the user to continue playing by buying more lives, but we wanted to add more microtransactions that were useful and attractive to the user.

Then I had the idea of adding power-ups that the user could use when he needed:

  • The «Amplifier» would allow the user to tap on a barrel, and make it count like if he tapped all the barrels on the same row at the same time
  • The «Lifesaver» would allow the user to tap an «enemy» and not lose a life
  • The «Mutipler» would allow the user to multiply the points earned for a certain amount of time
  • The «Snail» would cut the game speed by half for a ceratin amount of time
  • The «Precision» would always grant the user the maximum points that he can earn when tapping a character

But here was another thing: the user should be able to use one power up on each stage, so we implemented more «power up spaces» to buy, up to 5.



Testing and Development

 

The game was completed on a 70% before the company had to close, but there were a couple of demos that we shown to some potential users. The feedback that I had from them was that this game was really addictive and fun, and that it could have a lot of success as a standalone app on the AppStore.

Unfortunately, this game was never implemented neither inside the Chavo-Album or as a standalone game. It’s a shame because we knew that it was really funny and challenging to play, and that it would add a lot of value to the sticker album.

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.