sachacks background.png
 

How might we improve the SacHacks site to be more professional and user-friendly for stakeholders, sponsors, and students?

 
 

Problem:

The current site as it stands is visually interesting but could improve on a couple fronts. The navigation is difficult to use, much of the text loses some of its readability from the overpowering background, it is challenging to discover the schedule's interactivity, and the site as a whole follows no design trends.

My role: 

I worked on the project over a few weeks.

•       •       •

The Process

BACKGROUND:

 

SacHacks is the first major intercollegiate hackathon in the Sacramento, California area.  This is their current site.

sachacks.gif

Although very cool, I immediately noticed some very glaring UX inconsistencies with the site.  Although I wasn't explicitly tasked with redesigning the website, I wanted to make sure SacHacks put its best foot forward for its first launch.

schedule.gif
sponsors.gif

The schedule section was the biggest concern I had.  After weeks of looking over the site, I found that the schedule was actually interactive.  Unfortunately, it holds no room for any actual information beyond the name for each time slot.  For hackers and visitors alike, the schedule should be also be visible and upfront to view quickly.  

Beyond that, the sponsors section has some sponsors that are cut off (only discovered by zooming out), which can't be good for stakeholders and users alike.

 

USER INTERVIEWS:

IMG_6465.JPG

I did a few user interviews to see if my site concerns were valid.  I interviewed four different users - all ages 18-22 with high technical backgrounds.  I had them talk me through their thoughts while navigating the site, complete some usability tests, and concerns for the site.

Several recurring points stood out to me.

 

The current site is too difficult to read.

Although a cute idea, the schedule is hard to navigate and provides little information

What exactly does the space theme represent?

Why are the sponsors cut off?

The site looks kind of untrustworthy.

 

One user pointed out that although they enjoyed that the site looked like it was quickly hacked together, the site lost a lot of functionality by trying to overcompensate.  

 

USABILITY TESTING:

Task 4: Who do you contact if you have more questions?

Task 5: How many sponsors do you see?

Task 6: Please navigate to the mentorship form.

Task 1: Please navigate to the About section.

Task 2: Please find the schedule.

Task 3: Please tell us what happens on Saturday at 2 PM.

 

sachacks usability test.png

Because the format of the site was so unique, users found it difficult to complete every task.  Many became confused towards the end of the usability tests, becoming more and more frustrated with the limited functionality and difficult navigation.  None of the users who tested were able to correctly answer how many sponsors were on the screen at a time.  This is valuable and reflects poorly on SacHacks for stakeholders, sponsors, and users alike.  Students look to the sponsors for credibility, and sponsors and stakeholders look to sponsors for trustworthiness.

 

IDEATION:

new+doc+2018-07-30+13.21.41_1+edit.png

 

WIREFRAMES:

Desktop HD Copy 2.png

 

HIGH-FIDELITY MOCKUPS:

Desktop HD Copy.png

 

FEATURES:

1. STICKY BAR

Because this site is a parallax page, the sticky bar makes navigation easier to jump from section to section.

2. INTERACTIVE CARDS

Whether this section is reserved for getting involved, core values, or different tracks, the cards provide some fun interaction on hover.

3. ACCESSIBLE SCHEDULE

Allowing for a simple column view of the schedule makes day-of information very easily accessible.

sachacks animation.gif
sachacks portfolio-01.png

 

DATA INSIGHTS AND LIMITATIONS:

It was super awesome getting to own and complete this project.  I had never done a full-scale overhaul or redesign of an existing site, so figuring out what user's pain points and designing consciously for them was a great experience.  I wish I had spent a little more time exploring other wireframing layouts (the one I went with was inspired by existing design trends within hackathon sites), but think that the layout I went with addresses most concerns that users had.

 

•       •       •