Bolt Bootcamps

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.

Bolt Bootcamps Mockup
Role
Data structure, site development, rebranding.
Technologies
Figma, Webflow, Zapier.
Purpose
Extracurricular project.
Leveraging no-code tools like Webflow to develop a unique, custom and fully responsive site for Bolt.
Challenge

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.

Solution

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.

process
New branding

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.
Slack Screenshot Collaboration, feedback and keeping the team in the loop is key.
Platforms and content

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.

Design and develop

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.

Slack Screenshot Early wireframes.

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.

features
takeaways
This was my first time publicly launching a site. It was a relatively big project and required a lot of back and forth with club executives to make sure we were presenting all the right info in a compelling way.
Don't overdo it
The first few versions of the prototype had way too many animations. The content and copy should be the priority, not making everything look fancy. In the end I feel that I was able to achieve a balance where it's still engaging and not overpowering or distracting.
Start with content
As mentioned earlier, it's important to design with the actual copywriting in mind. Try to avoid using Lorem Ipsum and fake text if possible! It certainly helped me this time around. It's also easier to get feedback when your team and potential users can see the layout in context.
Establish a system
As I added more pages, the list of styles was growing just as quickly. At a certain point it became hard to manage and I couldn't truly take advantage of reusing components or classes. For a more efficient workflow and consistent design I'd define aspects like spacing, colours and font sizes at the very beginning.
See more projects
Property Analyzer
Shop Unknown