HUBS aims to provide a digital tool to manage technology transfer processes and a framework of operation for two technology transfer hubs and their 20+ associated universities and research centers across Chile.
Design a digital platform to allow Technology Transfer Hubs and their 20+ associates to standardize their tech transfer processes and centralize their information with standard data models.
Product - UX/UI Designer
I was lead designer of HUBS, worked with a team of three R&D engineers and managed the project design timeline running several sprints that went from UX research to pixel perfect UI designs for handoff on each iteration (later implemented by engineering).
KnowHub and Hubtec, two of the three technology transfer hubs in Chile, managed by the top two universities in the country (Universidad de Chile and Universidad Católica de Chile respectively) needed to develop a nationally unified technology transfer digital platform for their 20+ associated universities and research centers in a 12 month period. Our team was tasked with designing a web app that allowed them to standardize their processes, data models and centralize information.
We faced challenges with short timelines, designing and deploying new features in several one-month sprints and challenging research processes due to the fact that the hubs were defining their operational model in parallel and that had to be reflected on the web app.
This is a teaser!
This is how the final product looked like but don’t miss the process down below 😉
Before starting the design of a solution we wanted to make sure that our stakeholders understood the problems they were facing as hubs and we also wanted to delve into the technology transfer process to detect critical pain points.
1. Project Map
We ran a problem discovery session with stakeholders from both hubs in order to explore the problem going from the motivations to the solutions. With post-its, our stakeholders declared their problems/objectives and the people affected by those problems. On the other hand, our team added other post-its that suggested potential solutions to solve them.
The goal is to end up with several one sentence statements that reveal our stakeholders goals with the product but also their pain points.
2. Solution Diagram
With the information collected during the project map session, we ran a separate brainstorming session with the team in order to recognize the main entity of the technology transfer process and define possible functionalities bases on main entity’s user flow.
To validate some of our assumptions regarding the purposed functionalities and prioritize what problems we were gonna solve first, we ran another session with our stakeholders and we used three different tools to discuss different aspects of the solution:
4. Solution Proposal
Since we work with agile methodologies, specifically scrum, we didn’t propose a solution with details about every functionality of the web app, instead, we delivered a general solution structure in which we defined components and functionalities. Later during development, we ran several 4-week sprints in which we delivered each one of those modules or components according to our backlog prioritization.
After the initial discovery process and later prioritization with our stakeholders we presented a business proposal that defined the modules we were going to work on for the next 12 months but the functionality for each those modules would be discovered during our agile development process.
We had monthly releases in which we delivered incremental MPV’s of the final product, we focused our work on developing the modules that delivered more value first according to the initial prioritization with our stakeholders.
I decided to apply a simple design cycle that allowed us to research, test and implement as fast as possible, mainly because I needed to be 1 month ahead of the developers to assure a constant stream of deliverables to be on-track at all times with our 1-year deadline.
1. identify and validate problems/objectives
I developed two personas based on real end users I initially interviewed and came up with two identifiable ones:
We worked very closely with end users from the two technology transfer hubs, so the discovery process for each module of the software started with 6 one-hour interviews with different users that had a different level of knowledge of the technology transfer process, usually, by the third interview, clear patterns started to appear.
The questions of each interview were designed to:
1. Find pain points
2. Prioritize problems
3. Find possible solutions
2. Team Brainstorming
After the interview process, my team and I ran brainstorming sessions to discuss findings and sketch possible solutions both in terms of front-end and back-end. These sessions were crucial to have the whole team on board with the problems we were solving.
3. Ideation and design
Having discussed ideas with the team I drew sketches of possible solutions that later lead to wireframes that I used in meetings with stakeholders to make initial validations and make sure that our vision was the same as theirs. Later I designed a hi-fidelty mockup that was used in short usability testing sessions to validate user flows. This process was done for every new module we wanted to implement.
4. External Feedback
I set up different ways of getting feedback for different purposes and stages of the solution:
A. Short usability tests on hi-fidelty mockups to validate user flows (before development)
Before making pixel perfect deliverables I first ran short usability tests using marvel interactive mockups to validate if the user was able to achieve it’s goals and to fix any UI problems.
B. Full usability tests of implemented solutions (before software release)
Before releasing a new version of the software I first ran several 1-hour usability testing sessions on a live instance of HUBS running on our development server, this allowed us to detect usability problems and other bugs before releasing a new version of the web app to the production servers. The gifs down below are extracts of real sessions (with blurred participants due to privacy concerns).
C. Hotjar feedback widget on the deployed version of the software (after software release)
We wanted to get real-world feedback as early as possible so the team engineers set up one instance of HUBS for each one of the technology transfer hubs (KnowHub and Hubtec) so they could use the software on a daily basis and send us constant feedback of every new implementation through a hotjar widget.
5. MOCKUP ITERATION AND FINALIZATION OF DESIGN
After validating the purposed solution idea and made changes in order to improve the feasibility of the main user flows, I started working on pixel-perfect mockups as a deliverable for the team engineers.
To deliver design and assets faster I used Sketch’s integration with Marvel so that everyone had the prototype of the new features of HUBS with the interactions and css specifications at hand.
Here’s a zoomed view of the 82+ screens I designed for the different modules of hubs and screens of some the modules down below (click to enlarge):
Creating a software from scratch especially one that will be used by the main universities in the country was definitely a challenge but a very rewarding experience. I learned so much about making my team part of the design process which helped to gain the trust of our clients who have never worked with agile development cycles in the past.
Like in every project things didn’t always go as planned but this gave me the chance to make fast changes that allowed us to meet our goals and be proud of the results. What’s more exciting is the fact that our client was happy with the results and they are currently using the software on a daily basis.