St. Louis Startup Week

Website redesign for annual entrepreneurship conference

Timeline

March - September 2023

Deliverables

New design system, content management system, and responsive website build

Impact

Increased unique registrations YoY by over 400% 🤯, new CMS allowed organizers to easily update the site, and improvements to site's overall UI/UX better align with Startup Week's innovative and entrepreneurial branding

Categories

Web Development

UX Design

Content Design

Background

I served as the technology chair for St. Louis Startup Week (an annual entrepreneurship conference) in 2023. As part of that role, I redesigned the website and built it from scratch in Webflow.

Challenges

During the discovery process, I uncovered the following key challenges with the existing site:

  1. Organizers weren’t able to easily edit the site’s content, which had to be updated every year
  2. The registration process needed to be streamlined to accommodate attendee engagement patterns (picking and choosing which sessions to drop in for throughout the week)
  3. The site needed more robust, compelling content to attract attendees

Screenshots from previous version of Startup Week websites

Design Process

Information Architecture

The next step was to define the site’s information architecture and sitemap.

Knowing the site’s primary goals (helping entrepreneurs feel confident and excited about the event + encouraging local companies to recognize the value of sponsorship), I was able to identify the types of content we needed and how they should be organized.

Startup Week sitemap

The new sitemap:

  • Added a “Get involved” section to highlight opportunities for speakers and volunteers, in addition to sponsors
  • Replaced the former “Press” page with a more robust Resources section that included a new blog and a place to share photo galleries and recordings from past events
  • Created a scalable structure for adding conference years, events, team members, and locations
  • Introduced landing pages to package and repurpose recordings from past years as lead generation tools

Building an Object Model

With the sitemap in place, I created an object model. An object model (inspired by Sophia Prater’s work in OOUX) helps you build a scalable structure around core content types and how they connect to one another. For Startup Week, the “objects” we found were:

  • People (presenters and event organizers)
  • Years (annual weeklong conferences composed of “Events”)
  • Events
  • Locations
  • Recordings
  • Sponsors
  • Photo galleries
  • News articles
  • Blog posts

Object model for Startup Week

Webflow Collections

Each of these objects eventually became a collection in Webflow so event organizers could easily add, edit, and remove collection items in the CMS (content management system) and watch them dynamically update across the site.

Webflow collection

Wireframes

With the new structure finalized, it was sketching time. By starting with low fidelity, hand-drawn wireframes, it’s easy to explore lots of ideas quickly—iterating on ones that work and abandoning ones that don’t.

Hand-drawn wireframes for Startup Week website

Design System

To create Startup Week’s design system, I began with the most basic elements (typescales, colors, icons, logos, etc.) before moving to additional components like buttons, dropdowns, input fields, and links.

From those pieces, I began creating more complex components (cards, modals, accordions, etc.).

Startup Week design system overview

Screens

Equipped with the wireframes and object model, I built out the rest of components and screen designs.

Startup Week desktop designs

Detail Page Templates

In addition to the main pages in the site’s structure, this included “detail” or template pages that would be autogenerated in Webflow every time an event organizer added an item to a collection.

Detail pages for Startup Week

Color-Coding for Events

To make it easier for users to find and choose sessions to attend, I created color-coded tags for each event category (educational, networking, partner, and keynote).

This allows users to quickly scan a list, referencing background colors and/or tag labels. I also added an accordion legend to describe what guests could expect from each type of event.

Startup Week modules

Thanks to Webflow’s collection model, each of these instances can be populated dynamically when new content is added to the CMS.

During this phase, I also designed all of the graphics you see on the site, including hero backgrounds and spot images. This work was done primarily in Adobe Illustrator.

Developing in Webflow

The final step was building the site in Webflow. I built the site from scratch, using the Client-First method developed by Finsweet. It's an approach to page structure and class naming/styling that helps projects stay organized, fluid, consistent, and responsive.

Conclusion

This project was a significant undertaking, but I loved seeing it all the way through from start to finish. My favorite part, as usual, was having the chance to learn and experiment with new tricks and approaches to solve problems along the way. The folks at Startup Week were wonderful to work with, and I can't wait to see what next year's event has in store.

Ready for more?

Check out additional case studies below!