HackSC interm page for now

HackSC Hibiscus

Project Summary and Role

Leading the design of Hibiscus, a multi-platform web portal, to improve functionality and scalability for 400+ users by tracking attendance and points, empowering sponsor recruitment, improving event logistics, and promoting greater interconnectivity at our hackathon.

I worked with the Engineering Team and project managers to solidify page requirements and identify user needs. Pages I designed: Sponsorship Portal, Identity Portal, Events Portal, and Judging Portal: Admin-facing side.

SKILLS

UI/UX Design Product Thinking Cross-Functional Collaboration

TOOLS

Figma
Notion
Slack

DURATION

7 months

TEAM

7 designers

What is HackSC?

A USC organization that plans hackathons in Southern California! In 2023, we executed a new tech-empowered experience with Hibiscus that involved the use of our newly-designed contactless wristband system, allowing for an interconnected event unlike ever before.

Hackers were able to seamlessly scan into events using our near-field scanners, and their Battlepass points were updated in realtime to track progress towards prizes on-the-go.

The Problems

Hackers have no way of tracking their points or their ranking on the leadership board, and feel blind during the event.
Hackers have trouble keeping track of the various subevents that are hosted during the hackathon.
HackSC organizers need a more efficient tools than Google Sheets or Google Docs to check-in and track hacker's data.
HackSC can support sponsors with tools to more efficiently connect with hackers and potential recruits.

The Impact

We empowered hackers and staff during a large-scale and chaotic event, and ushered in the next-generation hacker experience by experimenting with new technology and innovative solutions.

Results

Satisfying hacker experience where participants felt more included and informed during the event.
Checked participants into HackSC event as fast as ever, allowing staff to allocate their time to other event preparation duties. Staff also no longer needed to count up points towards prizes because they were updated in realtime via scanners.
Requests from other USC organizations to collaborate with HackSC and utilize Hibiscus during their own events.

Target Users

Internal stakeholders

• HackSC administrators and staff that scan
participants into the hackathon and subevents

External stakeholders

• College hacker participants
• Sponsors at the event
• Judges who score projects

Using Colors To Differentiate Hibiscus Users

Because Hibiscus is used by multiple stakeholders, it was crucial to distinguish the product based on the user type. I assigned different colors and tags to each interface: red for sponsors, blue for admin/volunteers (HackSC staff) and judges, and yellow for hackers. These distinctions are reflected in the color of the navigation bar and the label at the top right corner, indicating the user type.

All of this was influenced by our design system, of which I helped out with the initial phase but was created by other members of my team.

How Hibiscus Works

Sections marked with ★ are ones I designed fully or in part. However, I led the critique and iteration of the overall design of Hibiscus.

Hibiscus for Hackers

★ Events

★ Desktop View

Hackers can access a list of every event they can attend during the hackathon, and also create a calendar and schedule of their own. They can see how many points they’ll earn for every event they attend.

Hackers can easily see updates from the HackSC staff about events that have been rescheduled or changes in locations. Furthermore, they can edit their calendars to display today’s events or the entire week’s events.

Mobile View

Leaderboard and Profile

Desktop View Only

Hackers have quick access to information like their ranking on the leaderboard, opportunities to win bonus points, and a slider that shows what prizes they’ll be competing for! This is available in both desktop and mobile because hackers tend to be on both devices.

Mobile View

Hibiscus for HackSC Staff

★ Identity Portal

Desktop View Only

Attendee Details

HackSC staff can check hackers into the hackathon and assign them a wristband. These wristbands are used to scan into events and collect points. Participant management is only done by staff who use Chromebooks, so only desktop view was needed.

Event Check-in

HackSC staff can check hackers into events by scanning their wristbands. Their points will be updated in real time.

★ Judge Portal: Admin-Facing Side

Desktop View Only

Judges

HackSC staff can onboard judges onto the judging platform via email invitation and assign them to a specific vertical (a theme that participants focus on when creating their projects).

Projects

HackSC staff can onboard judges onto the judging platform via email invitation and assign them to a specific vertical (a theme that participants focus on when creating their projects).

Rankings

HackSC staff can view the current overall ranking (decided by judges) of projects for every vertical.

Hibiscus for Sponsors

★ Sponsorship Portal

★ Desktop View Only

HackSC sponsors can access a list of all participants/hackers (and their resumes) and reach out to them with recruitment opportunities. They can filter their search and save the names of standouts.

Hibiscus for Judges

Judge Portal

Mobile View Only

Judges are assigned to a vertical and can access all projects created for that category. Hackers/participants present their projects in person but there is also a description of the project provided for the judge’s reference. They can rank projects by dragging them up and down on the board.

Judges can put projects that they need to further evaluate in the “On Hold" section.

View other playground projects