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.

 

 

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.

Tiendatek Control

About the Project

Tiendatek Control is a complementary tool for Tiendatek, a Point Of Sale system for small shopkeepers in Mexico City. This app pivoted from Compratek, and lets the owners see remotely how things are going in their shops.

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


How we got there

 

When we were researching for Compratek, we found out that there were other priorities for the owners of the shops. Most of them were entrepreneurs who manage 2 or 3 shops at the same time, and they found really difficult to keep track of everything that was going on. Since the owners are the clients of the product, we also learned that the real value was for them and not really for the users (their employees).


 

First proof of concept and validation

 

We built a quick prototype which showed some of the most important information that the owners needed to see:

  • Earnings of the day, so far
  • Live activity feed
  • Products sold
  • Purchases
  • Reports

We took this prototype to the users, and they liked it a lot. They said that there was a lot of potential to this tool because they often live ignoring what happened trough the day in their shops, and they only find out when they come to close for the day.


Pixel Perfect Design and Implementation

The first version of Tiendatek Control was an MVP with the most necessary info that the owners requested. Once we validated that with them, I was in charge of giving this a clear and gorgeous overhaul.

I gave the real-time earnings counter the most important part of the design since it’s the first thing that the owners wanted to know. Then, I divided the rest of the information on four different tabs: «Live feed», «Sales», «Purchases» and «Reports». This was flexible enough to keep adding more features and keeping them organized.

This was successfully implemented as a web app for iOS and browsers, and as a standalone app on Google Play Store for Android.


 

More features implemented

After the successful launch of the app, we kept adding more features based on the feedback of the owners. Some of them were:

  • The ability to print reports from web or the Android App
  • Reports divided by employees work shift
  • Total value of the inventory, earnings, and investment
  • Reports divided by Daily, Weekly, and Monthly

Compratek

About the Project

Compratek was a design concept for a complementary app that would work with Tiendatek. It would allow the users to manage their vendors and purchases.

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 Idea

 

Tiendatek was a very robust product that thousands of shopkeepers in Mexico, India, Colombia, and Ghana used for managing their shops. Since everything was on the same app, there was a need for some features to exist as standalone apps, so the users could be able to perform some tasks at the same time on two different devices.

The most requested feature to have a spin-off was the ability to register purchases and manage visits from the vendors. So I started to sketch some solutions and took them to the shopkeepers.


 

Proof of Concept and Features

 

The feedback from the potential users was positive, so I designed some Pixel Perfect screens and built an interactive prototype.

The features included were:

  • A list of the purchases to be made today
  • A «Promo» section where they can know where to buy cheaper
  • A Ticket Scanner functionality
  • A «Rewards» screen

 


Feedback from Users

 

Users gave positive feedback for the interactive prototype, but there was a problem: most of them were owners of the shops, so the ones that had to use this product were going to be their employees. So from this idea, the product pivoted to another called Dueñotek.

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.