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.

Door Visions

About the Project

A responsive web app that allows customers to build their own garage door, place it on a photo and request a quote from a dealer.

Client

C.H.I. Overhead Doors

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


Business requirements and my role in the project

C.H.I. Overhead Doors is one of the biggest garage doors manufacturing companies in the USA,  and they were looking for a way to increase conversions from their website. The client had an internal app that allowed their dealers to build a virtual garage door, so he thought it could be a good idea to port it to a web app that was available to their potential customers.

My role in this project was as a UX Lead, conducting meetings and interviews with the client, their IT department and some of their dealers and customers. At the same time, I managed the design tasks, delivery quality and a team integrated by 3 designers.


 

Documentation

I conducted some interviews with the client, the IT department and some dealers which had a lot of experience with customers. There was no documentation for their internal app, so I decided to generate the following deliverables that would be useful for the design, development and QA phases:

  • User Stories
  • Information Architecture Map
  • Swimlane Flow
  • Wireframes
  • InVision Prototype for Desktop
  • InVision Prototype for Tablet
  • InVision Prototype for Mobile

This was very useful for mapping the scope of this product, some technical details and even for the client to show progress to the stakeholders.


Usability Challenge

Since this was a responsive project, we had to take into account that it was going to be used with both touch and pointer interfaces. So we had agile cycles between design and development to iterate our ideas and be sure that they were feasible.

We were able as a team to implement a feature that worked in all major browsers, across desktop, tablet and mobile devices, no matter how the user input was.  The user was able to build their door, and then to resize and/or distort their creation to place it in their own home picture.

This was not easy to achieve, but it generated a big wow factor with the client and his customers. But above all, it was a useful experience not only for their customers, but for their own dealers.


 

Added value and results

The original app in which this project was based on, had the ability to save the built door as a PDF so the dealer was able to generate a quote. In this case, and since this was going to be available to the public, we took advantage of the data provided by the client: the added value that we implemented was that, once the user built and placed the door in their picture, they were going to be able to send this information and request a quote from the nearest dealer according to his location. This way, the marketing team of the client was able to track the sales funnel from there, and be sure that all the technical aspects of building and installing a garage door were accomplished.

The client saw an undisclosed increase of sales once this tool went live, according to the marketing team. But beyond that, it turned out that the app increased the onsite sales because dealers were delighted to use it on their stores, and build the doors with the clients sitting next to them.

 

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.

 

 

Tiendatek

About the Project

Tiendatek is the main product of Frogtek, a startup located in Mexico City. They want to bring technology to small shops and their shopkeepers in populated zones, so they can increase their sales

Company

Frogtek

Client

Frogtek

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 Frogtek


The Context

Tiendatek is a custom app for Android tablets, developed by Frogtek. Its a POS and Fiancial mangement system focused on convenience stores inventory, and is used on different countries like Mexico, Colombia, India and Ghana.

The business model of the product was not to only offer the app, but also the hardware which included an android tablet, a barcode scanner, and a smal printer for receipts.


 

The Challenge

Tiendatek aims to bring technology to people that are not used to it, so they can have a better management of their shops and of course, get a better sales profit. It was an interesting challenge to tackle because a high percent of the users were people between 40 to 65 years old, and they had small to none experience using new technology form factors like tablets or smartphones.

This also created several UX challenges: the product had the same experience since the first android version, it has a lot of features and it should be easy enough for anyone to use it without even knowing how to use a tablet.


User Research

With the help of the Product Team, I did a User Research of the current product. We invited some shopkeepers so they let us know what they think about Tiendatek, what can be improved and how it would impact their day by day at work.

The feedback was that since it’s a tool that they use all day long, it could be more visually appealing. They also requested to have important information available without having to go deeper into the navigation, like when the next vendors are coming or how much they have sold at that moment.

We had many of this sessions at the same time that we were working on the redesign, so it was a lean process that we followed.


 

The proposed Redesign

I focused on bringing a new experience to the shopkeepers without making a giant leap from what they already know. I switched to a light theme for better readability, along bigger texts and clearer tappable actions. I also implemented a color code across the interface, so it can reinforce the context of the user.

But the most important thing, and the feature that users liked the most, was the new Home screen. I divided the Home into tabs, so the user can have access to relevant information depending on the action to perform: Sell, receive vendors and buy, See data and information about the shop, and something that was a requirement from the Product Owner: a «Coach» that would have some gamification features.

 



User Testing and Feedback

 

I had constant feedback from the users, so this was a Lean process. For the final user testing, I built an interactive prototype using Marvel App and I installed in on a testing tablet. Then I had around 8 user testing sessions.

The feedback from the users was great because they said that this new approach was really easy to understand. They found a lot of value on the new home screen because now they would be able to get the information that they needed by just swiping the screen.

The users were really excited about using this new version of Tiendatek. Unfortunately, the redesign had to be shelved for other reasons out of the Product Team control.

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.