“How Might We Help a Friend or Family Member Find Care?”

On the first evening, the sponsors from Wellstar kicked off the hackathon in a meeting to go over the challenge we would be solving in greater detail. Prior to this meeting, my team and I met for the first time to introduce ourselves as we were randomly placed on teams. We briefly spent some time clicking through the Wellstar home page to formulate some questions to ask during the kickoff meeting. During the meeting, we were given the following problem statements: 

• How might we help a friend or family member find care? 

• How might we reorganize the material to make it easier for consumer to move around?

The sponsors also defined a few pain points and constraints:

Rethinking the Information Architecture

Considering that we were required to simplify the layout of the navigation bar links to make it easier for users to find information, I determined that we should focus on and rethink the information architecture of the home page. In order to do this, we first needed to understand the current layout. I started off by placing all 90 elements in the navigation area onto individual stickies in Miro to recreate the current navigation. Then, I highlighted our 7 most important links (tier 1 links) in blue stickies to make them stand out from the rest and clearly see where they are located relative to the other links. By doing this, we uncovered some key things that would help us moving forward: 

• Several links with differing titles take you to the same page (denoted by the wavy lines), meaning one can be deleted

• 4 of 7 of the tier 1 links (blue stickies) are placed under the Patients and Families tab

• All of the tier 1 links are relevant to the patients user group, implying that we should meet their needs first

Examining Competitive Navigation Menus

The next day, I suggested that we search for good examples of website navigation menus to gain inspiration and compare them to each other. I figured the best place to start was other healthcare websites since they would likely have similar navigational content to Wellstar. I also looked at some retail websites since their navigation menus tend to have numerous categories that are organized in a way that is easy to look through. One thing we noticed is that all of these complex navigation menus are organized in double navigation bars with the top bar consisting of the most important information. 

Brainstorming Alternative Layouts

With the competitive navigation menus fresh in our minds, we started coming up with alternative low-fidelity layouts for Wellstar’s navigation using Miro’s wireframe library. Although my teammates were from non-design backgrounds, I wanted them to be involved in this process since they bring unique perspectives to the table. Looking back at our information architecture stickies and considering that two of our key notes had to do with patients, we decided that our main objective was to find a way to make the tier 1 links easy to access. We came up with two solutions that we liked best.

Designing the High-Fidelity Prototype

On our last day before presentations, Shubhani and Ode continued coding the foundation of our website, and I designed a high-fidelity prototype based on our wireframes in Figma. While designing, I made sure to adhere to Wellstar’s style guide.

Serving Providers & The Broader Community

The current Providers category lists all of the links as text links. After asking our sponsors the most common/important actions providers need to take, we were told that they need to access the login links to the healthcare systems. To draw more attention to these links, I placed them in buttons.

The current Community category has five groups of links, which is a lot of information to take in at once. We cut it down to three groups by placing volunteering information in the Careers category and making COVID-19 Support its own category since it has pertinent information that users may want to access without looking through multiple categories.

Presenting Our Design to the Wellstar Judges

The next day, it was both exciting and stressful to pitch our final design to the judges. We ended up presenting the prototype for the majority of the presentation and showed a small amount of the coded progress since my teammates were not too familiar with HTML/CSS. Despite this, the judges were pleased with our solution and liked that we noted we still had room for improvement coding-wise.

Our team ended up placing first out of seventeen teams!

Takeaways

This was my first hackathon that I decided to participate in on a whim (it was also a first-time experience for both of my team members!), but I learned so much from this experience and could not be more happy with the outcome.

• Always explain your decisions and make sure everyone is aligned

  Working on a cross-functional team alongside two students who had not worked with UX before pushed me to explain my decisions and keep them well-involved with the design decisions. The fact that we had not met before and needed to work together quickly was another obstacle.

• It's necessary to ask questions early, especially when given a limited time frame

  Many of the design decisions we made came from the questions we asked our sponsors early on.

• Planning is important

  Due to time constraints, there were times where it felt like we were planning as we went. If we took more time to plan at the beginning, it would have saved some of the uncertainties we faced.