Since August 2019, I have been actively working at Tecnológico de Monterrey, under the supervision of @GloriaNino and @LucyLopez, as the first User Experience (UX) Design Intern in the Transformation and Strategic Initiatives for International Relations, Philanthropy and Funding department. Our duty is to help other areas to implement emerging and cutting edge technologies that help to maintain a modern and updated catalogue of digital services from fundraising to offering financial aid to incoming students, my role in the team consists of creating the best UX design based on technical needs. 

Since I started, we particularly focused on the three most visited sites which are: Donar.Tec (http://donar.tec.mx), the main website for donations to Tec de Monterrey; Crowdfunding (http://crowdfunding.tec.mx), an institutional platform to fund projects of people from the Tec community; and Carrera Virtual (http://carreravirtual.tec.mx), an application to promote and invite people to finance the different programs of scholarships to new students.

Since these applications didn’t meet the business requirements, I had to do a complete redesign. I focused on the Donar.Tec as the first platform to achive the redesign. To achieve that, I followed an Exploration, Ideation, Evaluation and Development path to finally come up with the current version.

1.Exploration

For this stage, I had to implement reverse engineering to understand what were the functionalities offered in the platform, surf over the different views, identify the users who interact with these applications on a regular basis, and set the goals that I wanted to achieve in the final design.

Personas and profile simulation

Since we were doing a complete redesign, my first task was to create three personas to simulate the profile of potential users (donors), who we classified as EXATEC (Tec Alumni), Student and Public (people who want to donate but they are not students or TEC alumni). Once the profiles were established, I looked for people who could relate to these personas and made an user interview to understand more about their needs, behavior and other important information.

Data is the new science (…)

Pata Gelsinger

As part of my strategy to learn more about the users that frequently interact with the application, I used the Google Analytics history from the past version to obtain a full detailed report that helped me obtain quantitative data from their interaction such as session time, most visited pages, language, geographical location, etc. This gave me the opportunity to identify the users’ expectations and behavior.

2. Ideation

Views and UI Design

After identifying the people who are going to be interacting with our application, I started sketching the different views which are included in the site. I made my first sketches by hand and some others using web editors such as Adobe XD, Photoshop and Marvel App. The donation form process was left to redesign in a second phase.

After these first sketches, I applied an heuristics evaluation, along with other experts in technology and web development. The heuristics evaluation consists, as Jakob Nielsen states, of finding usability flaws in the design by judging it relative to known principles for what makes user interfaces easy to use (2019), those principles are also known as usability heuristics. For this step, I also designed a checklist based on the ten principles, taking into account what the new design was more likely to achieve.

Analyze the whole donation process

For the donation process, we studied the metrics that users usually took to fill all the forms and to complete the whole donation process, which ranged between 5.43 to 13.21 minutes. An additional goal: lower those metrics to an average of 4 to 8 minutes. 

Furthermore, while deciding which data was required from the user, including the federal prevention of money laundering, we had to choose and identify wisely which specific data was required with the minimum number of inputs.

While analyzing the inputs we could not exclude, such as the user’s name, last name, Tax ID and email address, not considering the payment fields, we identified that most of those fields were candidate keys that usually were repeated between our frequent users in the last version. We finally chased up the idea of having a dynamic form that could save our donors time while inputting previous provided information.

3. Evaluation

Once I had some sketches designed, I decided to look for the right people to conduct the users evaluations to gain feedback from real donors about front-end views and functionalities in their donation process. These sessions consisted in asking potential users to interact with the prototype in order to complete the process with specific notations, for example: donate to a specific Tec campaign.

As a result from the different testing, the deficiencies discovered were classified in two different categories: usability errors and enhancement areas for user experience. The first one, included front-end errors and the results from heuristics evaluations. For instance, in visibility of the system status principle, we detected errors such as lacking a site map and the system did not give enough feedback to the user during a process error, etc. 

Our goal? Let the user donate in three simple steps

At the same time, we tested the design for the complete donation experience, users’ feedback to redesign the whole donation experience in instruction following doesn’t become tedious. Having that target in mind, I even challenged myself to redesign the prototype to only be composed of three simple steps, no login or registration and with minimum user input.

After getting all the feedback and establishing the goal to achieve, a strategy was designed that finally led to the new design of DONAR.TEC, which was called DONAR.TEC 2.0. 

4. Development

Once the design achieved the goals set for the users testing and the heuristics evaluation, we delivered our discoveries, prototipes and sketches to the team in charge for the development of the site. The new site has been active since last May when the last version was released.

About the new Donation Experience

As a result, the current design involves 19 input fields of which 17 are required for the three steps – including the payment method form. However, for recurring users, TEC alumni, students, teachers and workers, the data will preload using the email address as the primary key, reducing the number of manually input fields to 13.

UI Design updates

Based on the heuristic on flexibility and efficiency of use, we wanted to, in someway, give to our recurring users the opportunity to complete the donation process with some shortcuts. Therefore, we decided to list all the funding programs on the home page. This way, recurring donors are able to select the program by clicking on it and skipping another field in the donation form. 

Another benefit of having the programs in the home page, is that new users are able to learn more about the range of choices they have, with testimonies and pictures of those who benefit from their donations, and finally select where to assign the donation and campus.

As a consequence from the redesign, our current metrics round from 5 to 7 minutes to complete the whole donation process.

What’s next? About future updates

The result of the design evidences the study and analysis of the different and each of the elements that compound the whole process to support the different TEC programs. On the current version, we focused on reflecting trust, security and commitment to the law by taking in consideration all the restrictions and policies, without leaving behind the best UX practices to bring innovation to the process itself. 

Overall, future updates will be done to enhance the experience of our users and their willingness to fund the academic life of future leaders in our organizations, country, and the world. At the moment, we are collecting feedback derived from the update, analyzing and comparing the metrics, and tracking trends on user interface design, in order to set our next goal out.

Acknowledgements

I would like to thank Ms. Moraima Campbell who persuaded me in User Experience designing, developing and prototyping ideas, but most importantly, encouraging me to be an innovative person. Lucy and Gloria, both for believing in me, since I was just a sophomore student with hunger of innovation and implementing emerging technologies. And to my school, for letting be part of its continuous development and disruptive change.