Pick version to read!
Overview
The UCSD Makerspace is a prototyping laboratory with a check-in system with confusing interactions, glitchy functions, and outdated UI. This system's faults led to people taking longer time checking in, and creating a line. I took the initiative to redesign the check-in system and implement it along the back-end developers who made the first iteration to improve the user interactions and make the overall process less confusing and faster.
The realization of this project was made possible through the collaborative endeavors of the development team and the design team.
Goals
During the initial months of introducing the check-in system at the Makerspace, we observed a tendency for individuals to overlook sign-in procedures owing to confusion, glitches, and sluggishness. This issue is of critical concern as the check-in process is integral in validating safety compliance and providing privileged access to secure equipment. Ensuring a consistent number of monthly users is imperative to maintain funding from the school, and the check-in system is our primary tool for accurately tracking user engagement.
Inspired by these insights, I proactively undertook the initiative to revamp the system, aiming to address these pressing usability issues.
User Research
Commencing as a maintenance intern at the Makerspace, I assumed responsibility for front desk operations and the check-in system for an initial six-month period. During this tenure, I keenly observed diverse users grappling with challenges such as perplexing instructions, system glitches, and an antiquated user interface.
The check-in system at the makerspace caters to three distinct user groups: UCSD students, Academia, and 3rd Party Companies from partnering companies collaborating with UCSD.
How it works
As people come into the space they are welcomed by the check-in desk with a big monitor prompting the user to make an account and sign the safety waiver.
The user has to tap their ID into the black box, and once the system scans it, if they have an account, it will receive them, if they don't have an account they have to make one. Once done, the user then has to scan a QR code which takes them to the safety waiver.
The system interface needed a redesign due to its old design, lacking personality, misleading indications, etc.
User Flow
I met up with the developers to establish the user flow of the system. The first thing the user does is tap their ID, and there are 4 possible scenarios.
First scenario is they have an account set up and signed the waiver, and they get the welcome screen. Second scenario would be they have neither, so they make an account, once done the system takes them into the third scenario, which is they have an account but not the waiver, and once finished they get the welcome screen. The last scenario is they signed the waiver but don't have an account, they make one and they are done.
Lofi Prototype & User Testing
Once I established the user flow, I used it as a guideline for the wireframes. I made the first iteration as simple as possible without too many screens while showing the user status throughout the process.
After doing the first prototype, I performed user testing on Makerspace staff and users by taking them across the flow and noting where they would get stuck or confused. I repeated these steps multiple times, and after multiple iterations, I ended up with this final lofi prototype.
As you can see the home and welcome screen are pretty simple, and read easily to facilitate the entry and exit point of the system. As for the screens on the right, we have the account and waiver screen. I divided these screens in two sections, user status and process. The left is the "Status" section, which tells the user the current process instructions, and what steps they are missing in the process overall. The "Process" section on the right shows the interactive step for the user, thus I gave it the majority of the screen section to make it easier to interact with.
Design System
After I finished the last lofi iteration, I started to work on the first high fidelity prototype. My first step was to develop a design system, since the Makerspace is part of UC San Diego, I wanted it to have the triton spirit, as well as being its own thing.
For this I went with some of the official UCSD colors. Used Montserrat as the font since we already use it for the main website, and can be found online easily. Developing the design system at the beginning of the Hifi prototypes makes the process easier, but is also important to consider it doesn't have to be final and can leave some room for change depending on how the design process goes.
Hifi Prototype and More User Testing
Once done with the lofi prototype, and defining the design guide, I started working on the first hifi prototype. You will notice how the first hifi prototype is very similar to the last lofi prototype with some color, different font sizes and types.
Then I performed user testing on some more Makerspace staff and users to gather intel on legibility, usability, and overall feel. Testing provided me with some very insightful information about the feel of the system, some users explained it felt too dry, and some colors didn't match the UCSD spirit. I took this intel and I went back and changed some of the original design system colors and added some novel features to make the system feel smoother and cleaner.
The most noticeable change I made was the colorful gradient pattern in the middle with the white frame around the screen.
I added a status screen that tell's the user what components they are missing for their account creation to ensure the user stays informed about ongoing processes.
Removed all the white backgrounds and with the new pattern in the back, it makes the system more pleasant to the eye.
Final Prototype
After I finished the second hifi prototype, it was time for the first evaluation point with the primary stakeholder of the project, my manager. I showcase my user flow to show my initial groundwork and took him along the process of how I ended with this final prototype.
After my presentation, he gave me great insight about how I should restructure the account and waiver screens. My manager pointed out how people's eyes will go immediately to the right side of the screen because it is bigger and might skip the instructions section.
Thus I increased the instructions section to about 2/3 of the screen and moved the process status checkmarks to the top, this made the process clearer overall and increased the process pace.
As for the account creation screen, we implemented a swipe component to the system where we can get all the user's information from the swipe, and asked me to make the manual boxes a secondary option.
Along these changes, I made some small aesthetic changes like adding a transparent white infill to the frames as to make the text more legible and uncluttered.
Hand-off
Once I was cleared on the final design with my manager, it was time to do hand-off to the project developers.
Throughout the project, I collaborated closely with the code developers, ensuring a seamless transition from design to implementation using Tkinter, the code plugin that bridged the gap between Figma and Python. Recognizing the constraints posed by Tkinter, I proactively devised effective techniques to facilitate the development process.
One such approach involved meticulously naming the components in a specific manner, guaranteeing their smooth conversion into GUIs. Additionally, I encountered various graphical challenges along the way, which demanded innovative solutions to maintain the fidelity of the original designs.
My continuous communication and problem-solving efforts with the development team enabled us to overcome these obstacles efficiently, resulting in a successful implementation that aligned with the project's vision.
Implementation and Product Testing
Upon the development team's completion of translating the prototype and integrating it into the system's procedural code, we proceeded to incorporate the new prototype and conducted product testing with incoming users.
The process of user testing supplied us with valuable insights encompassing various aspects, ranging from the language employed in the instructions to the presentation of user status.
Reflection
This is the first project I have worked on where I am the main system designer and where I've worked with the developing team to bring the project to life. Some of the takeaways I had were
When redesigning an existing product, it can be easy to feel stuck in the original design in the beginning, but the project will take its own shape with time.
Trust the design process, every step is important, as small as it may look, in the end, tenths of a second can get you pole position.