Hacktober 1 & 2

Gamified Cybersecurity Education and Training

Hacktober is a web-based and mobile-responsive platform filled with virtual events and interactive activities surrounding the topic of cybersecurity that goes live annually for the whole month of October. Its intent is to further educate and inform participants on the latest cybersecurity developments and best practices in a safe and engaging way. 

smartmockups_kz99ei5w.jpg

Role & Responsibilities

As the design lead, I was tasked to...

  • Act as the key enforcer of UX Design governance and best practices with technology and business teams alike  

  • Create and evolve the design system to be used as the new standard  

  • Escort a proposed solution through to deployment and beyond to ensure that the vision became a reality  

  • Own the real-time allocation and workload of all direct team resources, across the entirety of the design process, from inception to delivery  

  • Collaborate with engineers in developing rich usable and functional experiences, such as have discussions regarding trade-offs to ensure delivery and impact  

  • Manage the day-to-day Design team activities; help team of designers and developers stay on track to commitments, prioritize tasks, and remove obstacles  

  • Track KPIs and milestones to ensure they are met, document project process, and update stakeholders on project status regularly; produce reports as appropriate/requested 

Goals

  • Establish and continue to evolve design system while being consistent with company’s general brand guidelines 

  • Reduce user drop-off rates and inquiries pertaining to user experience such as site navigation and content 

  • Motivate cybersecurity novices to experts to continue to grow their skills 

  • Inspire cybersecurity enthusiasts to host activities and events throughout the month of October 

  • Incentivize users to interact with the platform and its activities daily 

Versions of Hacktober

I designed and led 2 versions of Hacktober.

Version 1

Haunted Mansion

Note: content have been replaced with placeholder text due to privacy.

Version 2

Futuristic Invasion

Note: content have been replaced with placeholder text due to privacy.

Version 1.0's Process Summary

 

01

Understand Painpoints

I conducted user research and analyses on the website to build empathy. 

View More

04

Enhance Platform's Aesthetics

I established a design system to ensure consistency on the website and with company’s brand guidelines. 

07

Review Goals & KPIs

I worked with the Data & Analytics team to analyze and present the data to Hacktober leaders and sponsors. 

02

Define & Track KPIs

I guided leaders to define what success could look like through design.

Contact

05

Collaborate with Development

I worked closely with the front- and backend developers to review designs and discuss any limitations/trade-offs. 

08

Listen to Feedback

I listened to users’ feedback to understand the impact of my design and note areas for improvement. 

03

Improve User Journeys

I devised new user journeys based on user research and platform analyses. 

06

Deliver Full, Newly Designed Experience

I shaped the new design, and led its implementation based business requirements and user research. 

09

Iterate for Version 2.0

With the success of my new design, I was asked to lead the next design iteration of Hacktober. 

 

01 Understand Painpoints

I conducted user research and analyses on the website to build empathy. 

  • It was hard to tell which event had been added to your calendar.

  • The time zone was confusion - is it displaying the time based on the timezone of the event’s market or your timezone?

Admin Painpoints

  • It was difficult to modify date/time of events. The details can be updated on the powerapp, but this will not update calendar invites for those who have already added the event.

  • I could not track attendance to award points appropriately. The points were simply awarded once users add the event to their calendars.

Hacktober Events Page

Consumer Painpoints

Events.png

  • I wasn’t able to see how many points each event was worth.

  • The app did not allow for restrictions or warnings notifying users that certain events are local only (ex. not virtual), causing confusion and frustration.

  • It was unclear whether the total amount of points will be based on minutes/hours of the event or on difficulty level.

Admin Painpoints

  • The app did not allow for restrictions or warnings notifying users that certain events are local only (ex. not virtual), causing confusion and frustration.

  • It was unclear whether the total amount of points will be based on minutes/hours of the event or on difficulty level.

Hacktober Events' Details Pages

Consumer Painpoints

Event_Details.png

  • It wasn't clear how many points this activity was worth.

Admin Painpoints

 

  • N/A

'Quiz of the Day'

Consumer Painpoints

Quiz of the Day.png

  • I wasn’t able to see the dashboard due to powerBI permissions.

Admin Painpoints

  • Some data could be displayed differently depending on time of access (aka data refresh is not in real time).

Leaderboard

Consumer Painpoints

Dashboard.png
 

03 Improve User Journeys

I conducted user research and analyses on the website to build empathy. 

Sitemapping

A theme I identified while reviewing the feedback was that the site's navigation was hard to understand and follow. For the new version, I created a sitemap which gave the business a layout of the website, and helped them align on desired flow and content to make a better user experience.

Image by Brands&People
Content Refresh

Another theme found in the users' feedback was that the content can be misleading due to the different timezones and locations of users. I worked with the global marketing team to examine and update the site's content for a more user-friendly experience.

Image by Lauren Mancke
 

04 Enhance Platform's Aesthetics

I established a design system to ensure consistency on the website and with company’s brand guidelines. 

I created Hacktober’s first design system which established best practices and guidelines for future iterations of the platform. This also helped the scrum team align on standards when building and remain consistent with company's branding guidelines.

Establish Design System
Image by Balázs Kétyi

To make for a more visually appealing and fun experience, I defined the theme for this iteration of Hacktober; which influenced the content, visuals, and features of the platform.

Identify Site Theme
Image by Ján Jakub Naništa
 

06 Deliver Full, Newly Designed Experience

I shaped the new design, and led its implementation based business requirements and user research. 

Pre-Launch Page

Several weeks before the official launch of the website, I designed a countdown page with animations and visuals as a preview of what's to come and to get the audience excited for the event.

Pre-Launch.png

Ways to Earn Points

Details how users can earn points toward rewards at a local and global level.

Leaderboard

Showcases local and global leads to encourage friendly competition.


Prizes

Information on what users can hope to win to incentives users to participate.


Survival Tips and Know the Code

Advice on how to stay vigilant to protect company and client data.

Home Page

Claim Points

Users can claim points based on their attendance to events and participation in activities.

Filters

Filters offer users the flexibility to view only events that fit their schedules.


Event Description Details

Brief descriptions (aka previews) and full event details are accessible for users to learn more about the event before deciding on their attendance.


Download Invite

Users can download the event invite to keep track and be reminded of the event when it happens.

Events Page
Hackathons Page

Hackathon Summaries

Brief descriptions on what the hackathons are about and what participants can expect if they join a hackathon.

How to Participate

Important details of the hackathons such as logistics specified based on the events' timezones to limit attendance confusion.


Example Schedule and Prizes

Example schedule to give participants an idea of what their hackathon day could be like and prizes to incentivize the audience to participate.

Tackle the Hunt

A fun, weekly challenge that tests users' knowledge on the 10 OWASP security vulnerabilities in code.

About

Brief definitions of the 10 OWASP security vulnerabilities to aid users in tackling the hunt.

'Weekly Code Hunt' Page

ERG Shoutouts

Highlight the employee groups that support the website.

Market Lead Search

Connect users with the employee groups' leads to learn more about the group and Hacktober.


Leaders

Shoutout to our Hacktober leaders.


Development (Scrum) Team

Shoutout to our Hacktober team.

About Page

About Hacktober

Brief history about Hacktober for new users and as a refresher for returning users.

Why Hacktober

Explanation of the importance of cybersecurity safety in protecting our users, company, and clients.


How to Participate

Details regarding the different ways users can experience Hacktober via the platform.


Frequently Asked Questions

Questions users may have regarding the website such as how to troubleshoot technical issues.

FAQs Page
404 Page

I designed a simple yet fun 404 page for any issues the website may experience while the user interacts with it.

404 Error.png
Wrap-Up Pages

End of Hacktober

I crafted an 'End of Hacktober' page to close out the official website and to notify participants of next steps as the Hacktober team work on producing the results of activities.

Results Page (Not Pictured)

I produced a results page to announce to participants the results of Hacktober such as winners, prizes, and next steps.

End of Hacktober 20.png
 

07 Review Goals & KPIs

I worked with the Data & Analytics team to analyze and present the website’s numbers to Hacktober leaders and sponsors. 

I worked closely with the Data & Analytics team to gather the numbers of the platform's KPIs I defined with the business in the beginning of design to report the final results to the Hacktober leaders and sponsors.

Platform's Stats
Hacktober_Stats.png

08 Listen to Feedback

I listened to users’ feedback to understand the impact of my design and note areas for improvement. 

 

Can I just say.....I absolutely LOVE LOVE LOVE this site. The visuals are stunning (holy amazing graphics), the navigation is super easy (I know where to go and click!!) - everything is AWESOME!! Fantasitc job! Well done!

AJ D.

I worked with Zhi-Mei on the Hacktober 2020 team to build a cyber-security platform that had a global reach and high impact internally at [company]. Zhi-Mei volunteered her time to design the UI/UX of the platform and we cannot stop giving her enough praise for her work that she consistently delivered. The Solution Owner and I (solution analyst) had an initial 30 minute conversation about the requirements of the platform, and Zhi-Mei blew us away with how quickly she delivered, her attention to details, and her amazing custom designs. With every follow-up meeting, she delivered all requirements that we would briefly discuss, and really took the creative liberty to bring it to life in a way that far surpassed our verbal ideas. She also went above and beyond by including and suggesting new functionality or valuable features that the team hadn't even considered.

Zhi-Mei is extremely detail oriented, ridiculously quick and reliable, and most importantly, she had fun with the project. Zhi-Mei would take product requirements we gave her and somehow have wires available in 24 hours OR LESS. Zhi-Mei's communication and leadership was always appreciated as she would often take ownership in scheduling time with the solution owners or the front end developers to work through details of the application. She truly shaped the user experience and this led to ~8000 [company] employees accessing and interacting with her UI. This was a significant jump from last year and speaks volumes to the work that she accomplished. All of these efforts led to the success of our developers creating the product and all of Slalom getting a chance to participate in Hacktober - we LITERALLY could NOT have done it without her.

We all saw Zhi-Mei's personality and creativity come through in the work she presented to the team with her witty Halloween story lines, her continuity of characters throughout the app, and the whimsicality she brought to something "spooky". The solution owners on the project would throw vague ideas and requirements to Zhi-Mei and (I am not overexaggerating when I say this - ) she would over deliver and blow away our expectations every. single. time. She would often offer solutions to possible scenarios that we hadn't even thought of yet. This was due to her meticulosity in details and understanding the impact of the application.

Throughout her diligent work with the team, Zhi-Mei would always remain humble and curious, as she continued to grow and learn as a designer. Thank you Zhi-Mei for all of your hard work. I cannot wait to continue working together in the future :)

Thanks Zhi-Mei - I look forward to continuing this project with you and really appreciate all your hard work so far :)

Shivani R.

Congratulations on the site Hacktober team! It’s an incredible experience that’s unlike anything I’ve experienced in a Slalom program. A remarkable labor love that will elevate the infosec capabilitiy of the entire company.

Brett S.

Thank you for all the extra time you've dedicated for months to help create, build, and launch the new and innovative Hacktober development platform for our global audience. The creative and innovative problem solving to develop this has undoubtedly reset the bar even higher for future teams. The teamwork, support and collaboration across required to do this at lightning speed was no small accomplishment. Thank you so much for building a better future undoubtedly here at Slalom. Slalom globally is grateful for all your tireless effort to go above and beyond to build something Slalom will use for years to come.

Ali M.

Awesome job!!!!!!! I can't get over how freaking amazing that site looks! Holy shit!

Kevin A.

Zhi-Mei continues to impress me with her organizational skills, the expedited delivery of her work, incredible communication, and design skills. She was key in creating and organizing the design work of Hacktober this year. Not only did she delegated work accordingly, but she took on many design development stories as well, characteristics of a great leader. This is something that stands out when working with Zhi-Mei, she is a leader that leads by example and is always open to feedback, collaboration, and mentoring others. Her ability to organize all the design development components of Hacktober in Figma, made it easy for developers to get all the resources we needed for our development stories. I personally collaborated closely with Zhi-Mei in the creation of the Digital Code Hunt feature and her input, both helped shaped the feature the way it looks now and made for a realistic creation of the most popular feature of Hacktober. 

Zhi-Mei is a representation of the leader I strive to be, she leads with action and contribution, not only with words. She makes herself available for any questions, provides feedback on our FE development work, and contributes immensely to the success of Hacktober each year. She is always a pleasure to work with and I learn a lot each time I work with her. She challenges us to bring our best and deliver the best work possible. I cannot stress enough how she delivers quality work incredibly fast and her design organization setup always makes FE development easier for developers. I hope to continue to work with Zhi-Mei in the future.

Phaulo E.

I’m blown away by all the amazing design and build work the entire Hacktober team has done. This has been a labor of love and it’s light years ahead of where we were last year. Congratulations and thank you for all your incredible work!

Natasha P.

Where do I even start with Zhi-Mei. Zhi-Mei helped develop the Hacktober platform, building every inch of the UI and UX for this internal initiative...I am constantly in awe of her brilliance at being able to produce incredible UI designs in real-time. Her intuition for user experience is unmatched, and something that is incredibly rare and should be highly valued. Zhi-Mei had free reign on Hacktober, and managed to produce something so heartwarming, brilliant, and exciting that it captivates every audience that takes a look at the platform. She managed to somehow capture the essence of what it feels like to be a [company employee], despite being a new hire before joining this project. Zhi-Mei constantly amazes me with her ability to capture these moments and somehow emulate them through her UI designs. Beyond just her design skills, her intuition for what makes people, people, is entirely admirable and wholesome. Some of her ideas, such as cute quotes for the development team on the about page, or captivating stories for our code hunt, are charming and heartwarming and really bring personality to something that is hard to evoke those feelings for (cybersecutity). Zhi-Mei is wonderful because she also adds this heart-warming element to everything she does, meaning she naturally makes the team feel at ease and brings them together in small, effective ways – for example, suggesting to send and designing a cute card for one of our developers who had just had a baby. She cares about people, and in a time when caring about others is hard, this stands out. Zhi-Mei has had a huge impact on not just me, but everyone on the team.

All this, on top of her many [other] projects and also [a hackathon]… I don’t know how Zhi-Mei does it all. All I know is that Hacktober wouldn’t even be a fraction of what it is now without her. All this, during a global pandemic, and being new to [company]! The impact of her work is that it will be seen by all 8,000 employees every year for years to come. Her designs have captured the attention of many executive leaders, including [the President of the company]. Her work on this global cybersecurity initiative has had a huge impact on [company]. I hope I have the privilege of working on another project with Zhi-Mei in the future. Thank you for all that you do!

Reedhima M.

Zhi-Mei, you have been instrumental at leading the development of a great Hacktober 2.0 design (and style resources) for the team. Your quick turnaround to help us integrate the team members feedback and suggestions has been also very helpful. You’ve been very effective at presenting and communicating your design changes and suggestions during our team meetings. Your design contributions and hard work has made a great impact in our project and team members. Your creativity and ability to visualize the program’s key activities (and functionality) has helped us get the team more motivated and willing to begin working (sooner than expected) with its configuration, development and implementation. I’m so glad you’re part of the team, keep up the good work. I look forward to continue working with you in the near future, either with a client or on another internal initiative.

Erasmo V.

I was on the phone with a guy helping him....at the end of the call, he was like “Hey, this is random, but do you have anything to do with that hacktober thing? Because I heard about it last year and wasn’t into it, but I saw the email today and looked at this site and this looks REALLY COOL”. He was all into it asking me all kinds of stuff about it and is really excited for the code hunts.

Brooke D.

I worked with Zhi-Mei on the Hacktober platform... As a developer, Zhi-Mei's designs were very detailed and easy to follow. I was extremely impressed by the designs created by Zhi-Mei. I enjoyed seeing how she was able to bring the designs together. There were some times where changes were needed to the designs and Zhi-Mei always completed them within a timely manner. I enjoyed working with Zhi-Mei and I'll be looking forward to working with her in the future.

Alexis C.

Zhi-Mei not only acted as an individual contributor but also as a team lead for the XD side of Hacktober. Zhi-Mei managed a team of four...to kick off Hacktober development with a responsive front-end, new re-skin and general design upgrade. Zhi-Mei's responsiveness, sense of urgency, ability to prioritize, follow up consistency, triaging of ambiguity, patience and willing to make things clear are things that the norm when you're on her team! Zhi-Mei was able to keep the XD team consistent in their delivery and engagement throughout Hacktober's development overall. I will be taking a note out of her practice when it comes to managing a team. She held XD stand-ups to keep the overall team up to speed when scheduling became a challenge with Hacktober's volunteer resource capacity became a reality too soon.

Azhar A.

 

09 Iterate for Version 2.0

With the success of my new design, I was asked to lead the next design iteration of Hacktober. 

Version 2.0's Process Summary

01

Establish Design Vision

I analyzed the existing version of the website to define areas for enhancement for new iteration. 

04

Establish Design Theme and Direction

I kicked off the process to establish a new design theme and system, and create a new logo and easter eggs. 

07

Deliver Version 2.0

My team and I designed the new end-to-end experience for Hacktober. 

02

Align on Requirements

I collaborated with other Hacktober leads to define enhancements and discuss trade-offs/limitations. 

05

Manage Experience Design Team

I supervised the design team to ensure timely and accurate execution of designs through mentorship. 

03

Build Design Team

I recruited and managed 3 designers based on design needs to help execute my vision. 

06

Collaborate with Development

I led the collaboration between design and development through management of scrum ceremonies. 

04 Establish Design Theme and Direction

I initiated the process to establish a design theme and design system, new evergreen logo, and easter eggs. 

 
New Evergreen Logo

The business wanted to rebrand Hacktober and wanted to have a new, evergreen logo that would be recognizable as Hacktober, follow company's brand guidelines, and encompass the spirit of Halloween. I led another designer on my vision and we jointly created iterations of various logo concepts before finalizing on one.

Logos.png
New Design System

A new theme came with a new skin so I led the creation of the new design system. I created all the foundational elements and layout of the new design system, and taught my design team how to use Figma as some were not familiar with its features.

2021_DesignSystem.png
Easter Eggs Ideation

To energize the entire Hacktober team, I included everyone in parts of the design process, such as the Easter eggs ideation virtual workshop. I supervised a junior member to lead the workshop as part of the ongoing mentorship I provided for my Hacktober design team.

Easter Eggs Ideation.png
 

07 Deliver Version 2.0

My team and I designed the new end-to-end experience for Hacktober. 

Sign Up Page

With the success of version 1, the team received many requests to get involved with managing version 2 of the website so I supervised one of the designers on my team to create a sign-up page as part of the pre-launch marketing strategy to streamline all interests and communication.

Sign Up- Web.png
Pre-Launch Page

Several weeks before the official launch of the website, I guided one of the designers on my team to create a new countdown page with animations and visuals as a preview of what's to come and to get the audience excited for the event.

Pre-Launch - Web RC - Updated Text.png
Hacktober 2.0

My design team and I delivered the final designs for development with new themed visuals and content, and organization. 

404 Page

I oversaw one of the designers on my team to create a 404 page with animations and visuals as a preview of what's to come and to get the audience excited for the event.

404 Error - Desktop.png
Wrap-Up Pages
End of Hactober 21.png

End of Hacktober

I guided one of the designers on my team to design an 'End of Hacktober' page to close out the official website and to notify participants of next steps as the Hacktober team work on producing the results of activities.

Results Page (Not Pictured)

I produced a results page to announce to participants the results of Hacktober such as winners, prizes, and next steps.