Bolt’s site introduces prospective students and sponsors to their unique combination of hackathon and case competition style events.
A case study that illustrates my knowledge of user experience design.
As Bolt began to scale its operations, planning more events across multiple universities, the marketing overhead became difficult to manage for the team. The club needed a way to align its messaging and branding so as to provide a seamless and consistent flow of information between all channels.
Communication
Announcements scattered across social media accounts, difficult for participants to keep track.
Presence
Limited ability to show professional and technological capabilities to sponsors without site.
Consistency
Constantly changing branding, no clear guidelines or predefined colour/orientation variants.
Working with our marketing team, I led the development of this site to address these pain points, designed with both of our stakeholders in mind — participants and sponsors. Easy to access information and clear value proposition, its impact works to entice students to participate, and corporations to partner with us. Additional rebranding and creation of a basic design system for a more consistent look and feel.
A fresh logo and set of brand colours would guide some of the design choices and general identity for the website, so it was an ideal starting point. It was important to avoid completely reinventing ourselves and confusing people as we had already gained traction. On the other hand, we were still a relatively new club and need to be confident in what we chose to do as it would have a long-lasting effect.
Balancing these factors led me to the following: We must build on our existing identity while focusing on improving a number of specific areas:
Key updates
- Logo versatility — Multiple variations as opposed to resizing elements each time.
- More contrast — Introduce colour backgrounds and patterns.
- Consistent system — Translatable to all mediums and touchpoints.
To code or not to code?
Based on my experience, I recommended we use Webflow, as custom code was not required for the functionality we needed.
Webflow’s low learning curve, simplicity and built in CMS meant we could launch in time for our next event and allow multiple people to make quick edits if needed. As students with crazy busy schedules, this level of efficiency was a big help.
Deciding on content
Looking into our current communications, as well as breaking down stakeholders into what would be most important to them or what additional information they need allowed us to come up with the initial set of pages. We also knew that we had the flexibility of Webflow to make edits and add more content easily at a later point in time.
With the content decided, it was time to explore concepts and layouts. Rough wireframes first, then jump into Figma to recreate them as high-fidelity mockups.
Pixel-perfect
After reviewing the final concept for the landing page, I completed the rest of the design in Webflow itself.
Transferring most of my UI creation inside Webflow allowed me to view it on different devices and breakpoints, making tweaking it even easier. Using their drag and drop interface and styling panel meant I could quickly iterate through design options as well.
I also took advantage of the CMS and actually designed with real data and copywriting, this helped a ton! It's important to make sure the layout is right for the content and not the other way around.
Best part about Webflow is that what I saw was what I got. The final result was responsive, made up of real code, and identical to the initial Figma version.
Past events — In addition to a general information of how our events work, we have a collection of past events. Photos, sponsors list, topics, and more. Prospective students can see the quality we provide for themselves.
Past events — In addition to a general information of how our events work, we have a collection of past events. Photos, sponsors list, topics, and more. Prospective students can see the quality we provide for themselves.
Sponsor info — Clear outline of what benefits sponsors can expect to receive from our events, as well as the different ways in which they can get involved.
Sponsor info — Clear outline of what benefits sponsors can expect to receive from our events, as well as the different ways in which they can get involved.
Instagram showcase — Real time data updates thanks to a Zapier automation between the site's CMS and our Instagram account. Full control over the styling including the custom hover transition.
Instagram showcase — Real time data updates thanks to a Zapier automation between the site's CMS and our Instagram account. Full control over the styling including the custom hover transition.
