A seamless registration process for the Boston festival in 2018
4 UX Designers
Event Structure & Passes
Sketch, InVision, pen, paper
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.
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
IDENTIFY PROJECT STAKEHOLDERS
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.
Engaged clients early on in the process
Developed rapport and trust moving forward
Kept in mind HUBweek's vision, its founders and sponsors
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.
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.
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.
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.
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.
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.
Complex registration process
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.
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.
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.
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:
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
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.
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.
More usability testing & iterations
Continue to interview users and evolve personas
Recruit & test users with disability to improve accessibility for the website
Involve clients in the design process
Play to each other's strengths and weaknesses
Define the scope and constraints as early as possible