Christian Diaz

Christian Diaz

Access Control

About the Project

A user, roles & permissions management app for an internal suite of tools.

Company

Wizeline

Client

Fox CPE

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 Wizeline or Fox.


The Challenge

Fox CPE is the digital consumer products area of Fox, the global entertainment enterprise. They have been using many third party tools, technologies and services for the las ten years, which are not scalable for the long run. The challenged I faced was to design and implement the foundations for a Design System, at the same time that I designed a couple of internal tools that were urgent, and that will be used as references for more potential tools to be build.


 

Design Strategy

Technical requirements were set in place, but more things needed to be discovered before ideation and execution. I designed a strategy that consisted of the following workshops & artifacts:

  • Experience Canvas
  • User Story Mapping
  • Users, Roles and Permissions diagram
  • Ideation workshop
  • Wireframes
  • Concept testing
  • High fidelity mockups
  • Interactive Design Prototype

 


Discovery Phase

The first thing that I noticed was that stakeholders had a different ideas about how success would look like for this project, so I facilitated an Experience Canvas workshop. They were able to ideate, discuss and agree about the project vision, problems to be solved, minimum viable experience and success criteria.

Since technical requirements were already set in place, I facilitated a User Story Mapping workshop with the stakeholders to prioritize features and tasks that the user needed to do. Along with that process, we discovered that the logic of users, roles and permissions was not fully defined, so I created a first approach of a hierarchy diagram that I validated and iterated with stakeholders and technical people.

Finally, I facilitated an ideation workshop in which members of our team were able to sketch some potential solutions for this tool. Its worth noticing that the team was integrated by designers, stakeholders, engineers and Project managers so it was very insightful to learn what everyone was picturing as a solution for this tool.


 

Ideation & Execution

After the discovery phase, I created a first approach to a potential solution, based on all the technical, business and user information collected up to that point. It’s worth to mention that, prior to this tool, I helped to create a foundation of a Design System, to which I contributed with some research and designed some components. One of the requirements for this tool was to consider interactions, styles, layouts and paradigms that would be part of that Design System, so the first wireframes were designed also with that in mind.

The first round of testing was successful, with a lot of positive feedback about how this tool was making easier to manager users and permission across the full platform. There was some feedback about interactions and content, so I iterated & tested again a couple of times with both users and stakeholders (who were also going to be users).

After that, I moved onto creating high fidelity mockups and an interactive prototype that I was able to test with users. They were delighted and excited about how easy it was for them to do very complex tasks, mostly praising how easy it was to go from the most particular (set a permission) to the most general (assign a group of roles to a particular user).

I had the chance to do an online demo of the prototype to the full CPE department (70+ people) and more positive feedback came from other teams and areas.


Outcomes & Achievements

Access Control was a very important project for Fox CPE, since it was going to be the first tool that would not only set the foundations for developing many more in the future, but also to showcase the potential of the Design System that I contributed to build. For me, it was very challenging to understand and then, iterate the technical logic behind this, because it required a lot of communication between me, developers, users and stakeholders. Fortunately, I was able to design an experience that they found valuable, easy to use, and that above all, was very fun to use!

Most of the interactions that are showcased in this video were added to the Design System, and reused for many other tools. Over time, these components proved to be flexible enough for almost any scenario that might happen, and since the interaction paradigm is very similar, there’s a strong sense of familiarity and less to learn for new and existing users across different tools.

Drilling Company

About the Project

I had the chance to work with one of the biggest drilling companies in the world as a Delivery Owner for iTexico. My tasks included being Project Manager, Scrum Master, team manager, UX Lead and Design Lead.

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 Delivery Owner role

This company was a potential client when they visited the iTexico offices in Guadalajara. I had the chance to talk to them about our Design process and they decided to work with us, so the company sent me to close the deal onsite.

I used this opportunity to know better about their company, processes, products, users and what was what they were looking for. Turns out they never had a design person on their IT department, so all of their products lacked of good practices, branding and an optimal user experience.

When I came back, the company assigned me as a Delivery Owner for this client, which means that I was going to lead a multidisciplinary team to deliver the best quality for the client needs. My tasks included:

  • Project Management
  • Project Team Lead & Team Manager
  • Communication with Client
  • Scrum Master
  • Design Lead (for the client’s company)


 

Dashboard Redesign

We started the project as an extended team for the client, they assigned us to work in a new feature for the dashboard that was their main product. Inside their company, they had multiple projects running at the same time, each one with a different internal team. My job was to build the design guidelines, so all of their products had an optimal user experience and visual consistency.

I started by creating a ser of common components with similar visual style, but then I realized that it wasn’t going to be enough. So I took a look at the Dashboard, which was the main product for the company, and proposed a redesign that improved the user experience and the visual interface. The client thought that it was a good idea to start by implementing this redesign on their main product, so they went ahead with the implementation.

Once this was tested with the users, I decided to start building what turned out to be the first steps of a Design System.


The new «Reports» Feature

At the same time, I was managing the project that they give us to develop. It was a new section in the dashboard that was going to be used by internal people at the company, but it was very important for it to be validated with them, because it contained a lot of technical information.

We started by doing a research of the tools that they used. There were a couple of Windows apps from third party developers that got the job done, but it represented more work for the users. So we, as a design team, conducted a lot of interviews and detected the main features that should be present, but most important, the processes that we could improve for the users to save time.

I identified the user stories, the epics and we used the agile methodology along with the devs and QA. So we started building this new feature one epic at a time, designing and validating, then delivery to development, and then the QA in a two-week sprint basis.


 

The Design System

As we made progress with the Reports feature, I found more and more elements in common with other apps and projects from the client’s company. So what started as a Design Guidelines document, evolved into a Design System with the goal of having a single source of truth for identity, principles, best practices, components and patterns.

The rest of the teams inside the company slowly started to build the main components library for their frontend projects, and as we were making progress and finding new scenarios, we added them to the System.

This allowed for all of us to implement them seamlessly, even for the projects that were waiting on the pipeline. The fact that the components were mapped, helped the entire development team to find patterns across apps and the time spent developing the frontend was reduced and optimized.


My Experience as a Team Manager

Before this project, I had the chance to lead teams, mostly Design teams. But I took this opportunity to improve my people management skills, my effective communication with a multidisciplinary team and the client, my project management knowledge and of course, the Design skills.

It was very challenging at the beginning, but we eventually found our pace and adapted to what the client needed from us. We were able to influence their teams with our good practices, our experience developing digital products and to form a friendly business relationship with them. As far as I can tell, they are very happy with how things turned out.

On my side, I did the best that I could each day. I had some flaws along the way, but both the team and the clients were very happy with my work. They continued to work with iTexico and as far as I know, is one of the biggest and best clients that they have.

BizHub

About the Project

A B2B Web Dashboard that allows C.H.I. to get in touch with their dealers, and allows the dealers to build technically complex garage doors, generate a quote and send an order.

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, but the software they developed for their dealers to send orders was obsolete. The client saw an opportunity not just for update it, but also for transform it into a communication platform so they can increase sales and be closer to their dealers.

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. The existing app was obsolete, it was built for Windows 98 and was not suitable for any modern platform. For this project, I created the following documentation:

  • User Stories
  • Information Architecture Map
  • User Role Matrix
  • Swimlane Flows
  • Wireframes
  • InVision Prototype for Desktop (User)
  • Invision Prototype for Desktop (Admin)

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.


The challenge

There were some challenges on this project, mostly on the technical side. The original app was not ready for microservices, so the development team had to rebuild everything in the new backend. On the UX side, we had to be sure that the app was able to be displayed from Internet Explorer 9, so we had to use very standard components across all of the app.

On the other side, the client didn’t thought that they would require a CMS to generate all the content that they were planning, so we came up with a simple but effective solution for them: we built our own CMS inside the app and depending on the role, the user was able (or not) to access it.


 

How I handled a big, technical challenge

As we were making progress, we encountered a very big technical challenge that put the project at risk: for the dealers to effectively create an order, they needed to fill a form with almost a hundred inputs. The requirements were clear: the full form must be displayed, because dealers were used to fill them using keyboard shortcuts (which had also to be present). The form on the original app was ridiculously big, so we had to, somehow, port that to the web app.

I spent some weeks trying to understand the logic behind that form. It was so obsolete and technical that even the IT guys from the client didn’t fully understood how it worked. Then, I noticed some patterns as I was getting more familiar with the old app: some of those inputs were disabled, some other were activated and even new components were displayed depending on… something. I eventually found out that all of that behavior was triggered depending on a specific input that the user fills almost at the beginning.

So, the solution for it was to display only the first fields of the form until the user got to that specific input. Once there, depending on what they entered, the rest of the form would be displayed showing only the components needed for that specific input. This allowed the user to focus only on what they needed, and saved a lot of work to the backend server.

 


Final delivery and implementation

The app was deployed on the client’s server, tested on their side with some of their users and then fully implemented. The users loved the new interface which not only allowed them to build and send orders, but also to be in touch with the company. They found out that by being in constant communication with them, they were able to sell more and better.

On the client side, they needed to assemble a team that created the content but the investment was worth it: they increased their sales and the satisfaction rate from their dealers.

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.

 

Tadeo Jones

About the Project

I designed a Facebook App based on Tadeo Jones, an animated movie from Paramount Pictures. It contained information and mini-games.

Company

Digimedia Shop 

Client

Paramount Pictures

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 Paramount Pictures


The requirements

 

Tadeo Jones is an animated movie that premiered in Mexico in 2013, so Paramount Pictures Mexico reached out to Digimedia Shop to develop a mini-site inside Facebook Apps.

The client provided all the assets, videos and information for the characters and the movie, but they wanted us to come up with a good idea for adding gamification using only those resources.


 

My Role

 

I was in charge of designing the whole user experience, information structure, graphics and gamification. Since this was going to be a web app inside Facebook Apps, I made a research about how I could propose an optimal experience using that platform.


The Approach

 

I proposed an informative mini-site with the movie synopsis, character bios, videos, downloads and mini-games. Since this was going to be oriented to kids from 5 to 13 years old, I designed a fun UI with jungle and rockish visual elements, to give them the idea that they were «exploring» the site.

I also came up with three good ideas for mini-games:

  • A sliding puzzle, with difficult levels
  • A scene maker, where they could place characters on a background
  • A game in which the user had to drag the name of a character into his/her portrait


Publication and Feedback

The mini-site was successfully published on Facebook and got good feedback from both the client and the users:

The client said that it was a gorgeous product that would appeal to both kids and their parents, convincing them to go and see the movie.

From the user side, the feedback from them was mostly positive, reaching thousands of visits on its short time period.