Hackathons for Designers — Nerves & Saas
Are hackathons nerve racking?
Registering for a hackathon is welcoming a ton of uncertainty. Depending on your experience and relationship to uncertainty, it can be nerve racking. When signing up for NanoGiants’s hackathon, I didn’t have a team, nor did I know how I would find one. I didn’t know how time zones, cultural or linguistic differences might pose challenges. And, I didn’t know what role I would end up playing or the experience level of my teammates.
Outcomes
I’m so happy I took the plunge! My team and I had to problem solve so much in a short period of time, leading to a great deal of learning. First, we had to learn how to work together remotely and asynchronously across vastly different time zones, all accustomed to different tools. We created an atmosphere of ‘Yes and…’, building on each other’s ideas, volunteering leadership over different phases, and committing to document our work clearly so that teammates across the world could pick up where we left off before going to sleep.
Let’s dive into the hackathon challenge and our process for solving it.
NanoGiants Hackathon, June 2021
UX/UI Design Stream
Context & Problem Space
NanoGiants — and many other companies — have access to overwhelming amounts of unstructured customer feedback — app store reviews, surveys, testing, etc. It’s difficult for researchers to know how to coordinate all of that data, what data is relevant, and when to stop collecting and start designing/developing.
The Hackathon Goal: use AI driven insights to deliver a user-centered experience for feedback data.
As designers, we were asked to consider:
- Which evaluations does the user need, to determine conclusions for an improved user experience?
- How could a dashboard help the user easily capture information and generate added value from it?
- Which features does the user need for further processing and sharing insights with colleagues?
Designers were prompted to…
Use UX Design processes to design a SaaS product that displays AI driven insights from unstructured customer feedback in a visual, easy to understand way, and provides a dashboard that is enjoyable to use.
We had 60 hours and a team of 5 intercontinental designers, meeting for the first time, to go through the design process and produce a clickable prototype.
PHASE 1: Initial Design Workshop
Having never met before, extreme time constraints, and an 8 hour range in time zones, my team’s first need was to get on the same page with both the challenge, our process, and our tools. We made a google Jamboard, defining the problem statement in our own words, identifying the target user, and creating ‘how might we’ statements.
One teammate setup a kanban board and filled the “To Do” column with cards outlining the design process. Individuals added missing items, and we volunteered our leadership over phases of the process we felt strong in.
I volunteered to lead research. That included:
- Defining research goals for competitor analysis and user interviews
- Writing interview scripts based on the goals, to ensure consistency across interviews and mitigating bias.
- Delegating researchers to analyze competitors, or recruit and interviewing target users.
- Deciding the time block for research
- Facilitating a findings debrief and organizing the documentation
After research tasks were divided, I hustled to find and interview two people from my network who represented our user and were available for an interview asap. I landed interviews with a Head of Experience Design and a Data Scientist within two hours.
I created slides on our jamboard to organize interview data — including: pains, needs, attitudes and behaviors, and quotes — and slides for competitor screenshots and notes. Once our time ended for generative research, we met and discussed the findings. I facilitated the discussion with the goal of having the data guide our next steps in designing solutions.
Our findings helped us complete our 5W’s
Who (are we designing for): product designers, ux researchers, product managers, business stakeholders
What (are we designing): An app that pulls the best of many data apps, using AI to parse qualitative feedback data, and provides a variety of data visualizations for easier and faster analysis.
Why: Currently, no one app can do it all. Designers are resorting to multiple (sometimes 5) apps to organize and understand different forms of user feedback data.
Where & When: at work, primarily on desktop computers
Persona
Based on our interview data, I crafted a persona in our shared Figma file, so that all teammates could easily see and reference our target user’s needs and context.
Phase 2: Architecture & Flows
The competitor analysis gave us some common patterns and working solutions to pull from, while the interviews helped us dig into what was missing and how we could add value to our app. To maximize our limited time, some teammates began creating a simple UI style guide and wireframes based on existing patterns, while I worked on developing our architecture and flows based on needs and insights discovered in the interviews.
First, I combed our interview data for clear user goals/stories. Then, I completed a task analysis on each story.
Next, I developed those task analyses into user flows. These helped our team visualize the actual screens our app would need, as well as what key content was needed on each screen to complete a specific task. Additionally, the user flows helped us visualize when a user would need to make a decision or input data to continue the task. Again, these user flows were created on our shared Figma screen for easy and quick reference.
Now, teammates working on UI elements and wireframes were cross-referencing their wireframes with the user flows to make sure they were aligned. At the same time, I began creating a sitemap with a complex navigational structure to visualize the prototype.
Phase 3: Prototyping & Final UI
Now we were down to our last hours. I took responsibility for turning the wireframes into a clickable interactive prototype. All my teammates had gone to sleep in their later time zones, so on my own I was prototyping and running into discrepancies between the wireframes and user flows. I made revisions as I connected the prototype and tested the flows myself.
In the last hours of the hackathon, my teammates dialed in the final UI and tested the prototype themselves to try and see if they could break it. Another teammate created a video pitch presentation of the product. And then, we were done!
Takeaways
This hackathon taught me where my strengths lie, by seeing where in the process I naturally took leadership and responsibility. It also gave me confidence in my strengths seeing my teammates focus on other aspects, leaving research, information architecture, and prototyping open for me to lead. Seeing how other Product Designers go through the design process and what tools they use was also very insightful and gave me new tools to add to my toolbox. Lastly, the challenge of collaborating remotely and across the world is now a common context in the tech industry, so that experience introduced me to valuable collaboration tools and techniques. I recommend all designers participate in hackathons to grow their skills, affirm their strengths, learn new tools and approaches, and make friends.
