Hackathon 2019.1 Web App

Role: UX Designer
Date: June 18-19 2019
Collaborators: Paul Fazio (developer) , Mckenna Poulos (developer) , Mathew Swenson (developer) , Komel Khan (UX designer)
Purpose: Imprivata Hackathon 2019.1 - 24 Hour Event

Goal: Create a web app to streamline the sign-up process for future company hackathons

The prompt for this hackathon event was to work on anything that would add value to Imprivata as a company, either internally or externally. Our idea sprouted from Paul and I working on the Hackathon planning committee and noticing several inefficiencies and confusions with the current sign-up process.

Research

Background | Pre-hackathon

In the months leading up to the event, the Hackathon committee, which included Paul and I, made multiple revisions of the sign-up page to try and make instructions clear for the user. At first, there were only three buttons that when clicked, opened up a blank email to ideas@imprivata.com for the user to fill in. The emails would then be transferred to a table on the Confluence page.

We found very low sign-up rates at this time due to confusion and lack of information about the event itself. For V2, we attempted to provide more information to the user, make it transparent what each of the CTAs actually did (what the “signing up” button actually meant compared to the submit an idea or join a team button), and make the process more accessible for users who didn’t know how to use Confluence (this was accomplished by adding an Sharepoint spreadsheet option).

With the intention of making the sign-up process more accessible and informative, the process became more confusing for the user and cluttered up the page.

And thus, spawned the idea for our own hackathon project! These original two versions were created by a mixed group of scrum masters, software engineers, HR coordinators, and myself on the Hackathon committee. Bringing in proper UX seemed to be the logical next step to clean up the page for next year’s hackathon.

Setting parameters

At first, we wanted to create a mobile app, but considered that creating an app using only one operating system (iOS or Android) would limit sign-up yet again. A web app would be more accessible for users, more feasible to create given our skillset and the timeframe, and provide more opportunities for stretch goals such as adding in project viewing and a voting feature.

Data Gathering

Since we technically weren’t supposed to do any work on our project before the start of the hackathon, we conducted some very informal interviews by asking previous hackathon participants about their experience with hackathon logistics and where they found frustrations.  

After asking multiple people who wanted to sign up for the hackathon in various departments, I was able to gather that after landing on the page, some people had no idea what to do. Some people wanted to participate in the hackathon, but didn’t have an idea in mind or a team they knew they wanted to work with. This was an important user persona that we did not consider with the original sign-up process.

Ideation and Wireframes

Prototype

Below are the two hi-fidelity workflows we created for our prototype: view projects and submit an idea.

• “View projects” allows users to browse and create an account if/when they decide to join a team. This CTA is for:

1. Users who don’t know if they want to join the hackathon yet, but would like to take a look at existing projects and see what the hackathon is about

2. Users who want to join an existing team

• “Submit an idea” is for users who know exactly what they are here to do and want to get straight to signing up. They are fed into the existing projects as soon as they finish submitting their idea.

The top banner is customizable and can be replaced for each year’s hackathon theme.

The Figma prototype can be viewed here.

Assessment

Six hours into the working period, it became clear that our original development goal was not going to be possible given the timeframe and level of experience with both Firebase and Javascript. 

The developers made a decision to scrap the database function and use the remaining time to create a finished frontend version with canned data to show proof of concept. The final deliverables for our presentation included a walkthrough of the Figma prototype with both user workflows, and a functioning static website.

Long-term goals for the project: 

• Live feed where users can upload images and text posts

• Status updates

  • Ex. “Komel joined Hackathon App” or “Hackathon Project #1 is looking for a Software Engineer”

• Search feature with filter for team hosts looking to recruit

  • This is where user profiles will come into play

  • Filters will include user roles (UX, QA, etc)

• Voting feature

Reflection

I learned a whole lot from the processes of this day. Most notably, I learned what it was like to work in an engineering environment as opposed to a marketing environment—for example, creating wireframes quickly so that development could begin. In marketing, there’s typically a pretty linear flow of work passed from department to department.

This project was completed in an agile environment with scrum processes and the entire day was spent passing work between the team over and over again, iterating as we went. I learned about the limitations of UX, and I learned about the importance of iterating and changing course when new challenges arise.

Komel is a recent graduate who now works as a User Experience Designer at Imprivata, and it was a great experience for me to learn from her how to approach a new project step-by-step from a UX standpoint. This was my first time building a workflow from scratch, from ideation and research to wireframing to prototyping, and I was lucky to be able to work with such great teammates on a project I was passionate about.