In December, I had the privilege to attend my first hackathon for Nano Giants and loved every minute of it! Throughout the event, I felt excited, nervous, rushed, motivated, tired, passionate and enlightened. This event was a blissful experience. I have never been around so many passionate and dedicated people.
For anyone hesitating to join because you don't feel prepared: I encourage you to find one that you are passionate about and sign up! I promise you won't' regret it.
Challenge
Due to COVID restrictions, everything was virtual. When it came time to choose a team after organizer's introductory remarks, the process was straightforward. Most teams had the maximum number of members. We five decided to partner up and head up to our own virtual session to begin brainstorming. Our team was made up of five members two front-end programmers of varying experience and three UX designer, including myself.
​
Everyone had the same prompt created by the organizers, whose main objective was to measure UX using AI. "To measure how good the user experience is, businesses and company always have to rely on actual human beings and have huge bloated process. This is often not always effective and most certainly not efficient."
​
In an ideal world we would have spend more time in defining the problem we hope to address instead of jumping to solutions, but the nature of the hackathon does not allow for this. Instead, we were defining our problem along with defining out solutions, well aware of the time passing, even though, it just started.
Nevertheless, our possible solutions to our problem statement is as follows:
Problem Solution
Using AI, analyze website/mobile application heuristic based on UI/UX metrics by replacing human participants using AI technology.
​
Problem Statement
​
To measure how good the user experience is, businesses and companies always have to rely on actual humans beings to conduct usability evaluations and testing. This is often not effective and most certainly not efficient.
Design Process
​
The process of creating a project from scratch with little time can be daunting. We could have applied our efforts in so many different directions, and it's often challenging to have everyone on the same page. For this reason, we decided to use Figma for collaboration and divide the work among us. We spent half our time researching the solutions while prototyping and iterating as we went. We wanted to give enough time to our developers on their part. For this reason, we tackled our work by dividing and using Airbnb as our example in our prototype. We focused on what a user would do before, during, and after their trip.
​
My task was researching the UX metrics and possible paths that users might take on the Airbnb website. I looked at the filters, icons, and any little details that AI could process when scanning for UX metrics. To determine which UX metrics are useful, I looked at what AI could be capable of detecting. I asked our developers for help in identifying UX metrics that AI could identify and quantify. I researched other data like the number of downloads, number of active daily users, etc. We were also thinking about the business goals and the user goals to ensure the MVP is realistic as possible.
In the next 36 hours, we agreed to focus on creating the following features:
-
Evaluating the entire website.
-
Evaluating a particular task on a website.
-
Having options on which reports they want to see (UI or UX elements).
-
An ability to download the reports for further use.
The next morning, we came up with a name for our project: Check UX. As our developers worked on coding our project, the three of us decided to sketch our homepage. To better familiarize ourselves with the design conventions users would expect from our service, we spent several hours conducting competitive analysis.
​
We studied the UI components of successful AI and product management dashboards, including the Google AI blog. They All have a particular way of presenting dynamic information clearly and concisely. The goal of the visual design is to have complicated information be simple as possible through visual content.
Once the user clicks on Efficiency, Engagingness, or User Data, they can see more details by clicking on the metric. The user can understand how all the measurements are calculated.
I wanted to have the users have the option to download the report or go back to the overall summary. We chose black, white, and grey for our concept because AI is exciting and complex, we wanted to have a professional feel to it as it will be used internally by employees of a company.
​
Additionally, we created our design with website-first mentally because users who will be extracting this data will be internal employees for their business decisions. While producing wireframes, we were constantly in conversation with the developers on our team as they prototyped in real-time. Toward the end of the second day, told us that they might not have time to develop the full features of the prototype, unfortunately.
​
Next, we focused on our wireframe and making clickable prototyping (here for our clickable prototype). We made a quick logo check UX. We wanted to make something approachable but represents the function of the application. Furthermore, we wanted to convey professionalism and possibility through these designs, while creating a sense of continuity with the personality of the rest of the site.
​
The next day, it was both exciting and stressful to share our final project with the rest of the hackathon. As expected, we had a fair share of last-minute complications, but I am happy with how everything turned out. I am so grateful for every single member of my team. I could not have asked for a better, smart, patient, and hardworking team than this.
Next Steps
​
If we were to pursue this project further, it would be essential to do user research and iterate on the results before moving forward. Given our limited timeframe, we were forced to work on our collective knowledge and improvised research. This would have been great if Check UX was a long-time endeavor.
It would have been great to study AI components and understand their limitations. Conduct interviews and really extract employee's needs and behaviors toward AI replacing human participants.
It would be crucial for us to learn more about how the users conceive themselves in something as abstract as "the artificial intelligence" and how the project might affect CheckUX. This additional research might lead us to shift the direction of the project entirely.
​
In conclusion, I like to thank NanoGiants again for putting this hackathon together. I am looking forward to more!
