HUBWEEK

A seamless registration process for the Boston festival in 2018

 
Visual presentation of high fidelity mockup screens of the HUBweek project
 

SUMMARY

TEAM

4 UX Designers

PROJECT OWNER

HUBweek

ROLE

  • Project Management

  • Visual Design

  • Heuristic Evaluation

  • Research Synthesis

  • Event Structure & Passes

  • User Interviews

  • Usability Testing

DURATION

3-week sprint

TOOLS

Sketch, InVision, pen, paper

 

PROBLEM

HUBweek is an annual innovation festival that celebrates art, science, and technology. It was founded by The Boston Globe, Harvard University, MIT and Mass. General Hospital. Users attended HUBweek in 2017 expressed frustration of the experience due to a complex registration process, confusing web navigation, and lack of cohesion between the website and the physical festival. 

SOLUTION

A redesign of HUBweek website and the registration process that makes it easier for users to obtain information, purchase passes, and foster connections among attendees. Main features include:

  • Pass comparison and pricing tiers

  • Ability to purchase & assign passes to others

  • Public/Private account for networking

  • Filterable festival schedule


PROCESS

IDENTIFY PROJECT STAKEHOLDERS

One of the goals at the beginning was to familiarize with HUBweek's operations and verbiage along with understanding how the festival was structured in 2017.

One of the goals at the beginning was to familiarize with HUBweek's operations and verbiage along with understanding how the festival was structured in 2017.

As the project charter was created, I encouraged my team to define team values, what we wanted to achieve, the skills we wanted to practice at the beginning. Our team then communicated with HUBweek to set up clear expectations, come up with a communication plan, and identify deliverables via the Statement of Work.

TAKEAWAYS:

  • Engaged clients early on in the process

  • Developed rapport and trust moving forward

  • Kept in mind HUBweek's vision, its founders and sponsors

This is the beginning phase of the project where my team and I communicated with clients to understand their goals, what success looked like to them, identified all the potential challenges to come up with a team strategy to deliver results in 3 weeks.

EVALUATE CURRENT WEBSITE

The very first step of the research process was to understand what we were working with. To gain a better idea of the current stage, I evaluated HUBweek's website using heuristic metrics. 

There are 9 criteria in total: Visibility of system status, Use of language, Control & Freedom, Consistency & Standards, Error Prevention, Recognition vs. Recall, Flexibility & Efficiency, Simple Design, Recover from errors, Help & Documentation. For each criteria, I ranked from the scale of 0 to 4, 0 meant it was a severe issue and 0 meant it wasn't an issue.

HUBweek branded itself very well via the website by using colors and photos. Just by a quick glance, users would be able to associate HUBweek personality as an Art + Science + Technology conference. 

However, through out the website, there were many abrupt and sudden interactions. For example, as the video showed: when clicking "Be a part of it", users expected the website to take to another screen yet it scrolled all to the footer unexpectedly.

TAKEAWAYS:

The severe problem with HUBweek website was Consistency & Standards. HUBweek wasn't follow system conventions closely, in return, confused users with a variety of interactions. Users found it hard to predict that was going to happen next when clicking on some certain buttons.

Another challenge was Language, HUBweek's goal was to develop its own brand and verbiage for the festival. However, there wasn't enough education for new users to understand what the terms meant as they were confused of the differences and offerings.


ASSESS HUBWEEK AGAINST THE INDUSTRY

HUBweek has only been around for 3 years so it was relatively new to the conference/festival industry. At this phase, my teammates conducted a competitive analysis on relevant conferences/festivals, we found out the main players were: Slush, South by Southwest, TechCrunch, and AdobeMax.

Since HUBweek only took place in Boston, it didn't compete directly with these 4 main players.

TAKEAWAY:

AdobeMAX was the winner in this space. MAX took full advantage of the well-established brand and positioned itself as the "Creativity Conference", integrating itself to the overall Adobe strategy and product cohesively. In addition, MAX also provided users a companion app that was functional for both getting conference information and registering for events.  

A comparison table displaying the Strengths, Weaknesses, and Good Features of HUBweek's competitors in the conference, festival industry

Working off each other, with the insights from my team, I then mapped HUBweek against the competitors using the Magic Quadrant methodology. This process allowed our team to pinpoint where HUBweek stood vs. industry standards.

I mapped HUBweek against the competitors on a Magic Quadrant, a Gartner's research methodology. HUBweek had a great vision but a weak ability to execute

LISTEN TO USERS

Our goal for user research was to identify specific pain points that pertained to the website and the registration process. We did it by conducting 7 user interviews and analyzed 250+ survey responses from HUBweek 2017. We then did an Affinity Mapping exercise to synthesize insights; we found that the Registration process was the biggest pain point for users.

Pain Points:

  • Complex registration process

  • Unclear navigation

  • Unorganized scheduling

  • Accessibility problem

What We Should Do:

  • Simplify the register process

  • Simplify Passes options

  • Give users detailed calendar/schedule

  • Enable users to Edit/Remove events

  • Enable users to waitlist events

  • Enable users to purchase as a group

  • Enable users to assign passes

  • Make the website more accessible


CONNECT THE DOTS

With all the research insights at hand, our team synthesized one more time and segmented them into 3 different personas that represented the user pool of HUBweek. We found out that there were 3 types of users: The Knowledge Seeker, The Social Networker, and The Passerby. 

Identified user persona's goals and the features that would help them accomplish them

BRAINSTORM THE POSSIBILITIES

We started to whiteboard and sketch all the possibilities for a new registration flow. During this process, we continued to keep users' goals in mind, challenge each other, discuss priority and make sure that our designs encompass all scenarios where pain points could occur. 

When we finished ideating, I transferred the all the whiteboard sketches onto papers to arrive at a paper prototype that was ready to be tested by users. 


ENGAGE CLIENTS IN THE PROCESS

Through out the process, especially during the creation process, we tried to engage clients by brainstorming together and listening to their ideas. Our goal was to make sure HUBweek client feel included, valued, and that they also contributed to the end-result of the project.

As soon as we finished our paper sketches, we created a clickable prototype with Marvel App, sent to HUBweek for feedback. By doing this, our team successfully aligned our goals with the clients' goals and prevented problems from arising later on. 

Paper Prototype


REFINE THE STRUCTURE

The next step is Iteration. Whether our prototype is low-fi, mid-fi, or hi-fi, at each phase of the development, we tested our designs with users to gather feedback constantly. Overall, all members of the team contributed to this process, we built on each other's ideas and tested our designs over 10+ times before arriving at the final product. 

Main Iterations

Sitemap

User Flows


CONSIDER WEB ACCESSIBILITY

One of the main goals for the project was to make sure the website is accessible. To achieve this, our team kept accessibility in mind while working on the user interface. For example, some of the initiatives were: 

Tested Areas

  • Color blind test

  • Clear content formatting

  • No text is smaller than 16px

  • Forms have clear labels & borders

  • Links are content-based and avoid "Click Here"

Further areas to explore: 

  • Voice command control

  • Keyboard shortcuts

 

Color blind test on HUBweek prototype

Color blind test on HUBweek prototype

So that individuals using screen reader can navigate HUBweek site better, we defined the formatting clearly for Headline 1, Headline 2, Headline 3 and Body Text. Colors were also being used in a consistent manner.  All color hex codes, typefaces, and fonts were taken from HUBweek's brand guidelines -- we optimized the sizes and the use of colors to make sure the website is accessible and consistent.

So that individuals using screen reader can navigate HUBweek site better, we defined the formatting clearly for Headline 1, Headline 2, Headline 3 and Body Text. Colors were also being used in a consistent manner.

All color hex codes, typefaces, and fonts were taken from HUBweek's brand guidelines -- we optimized the sizes and the use of colors to make sure the website is accessible and consistent.


GIVE IT A FINAL TOUCH

Once all of the problems were sorted out, we all worked on the digital wireframes for HUBweek in Sketch. Once the structure was finalized, I took the lead in integrating all files and building visual elements & make sure all wireframes are consistent and aligned with format guidelines. 

Mockup screens
Digital wireframes & visual elements were built in Sketch

Digital wireframes & visual elements were built in Sketch


PROTOTYPE

 

Scenario:

Tiffany wants to purchase 4 Single Day passes to HUBweek for herself and her friends. During the process, she assigns a pass to Amy. She then completes her purchase, edits her profile, and assigns the remaining passes. After that, she waitlists for an event and see the update in her profile. 

 

REFLECTIONS

Photo of HUBweek team members

NEXT STEPS

  • More usability testing & iterations

  • Continue to interview users and evolve personas

  • Recruit & test users with disability to improve accessibility for the website

LESSON LEARNED

  • Involve clients in the design process

  • Play to each other's strengths and weaknesses

  • Define the scope and constraints as early as possible