STL Startup Week

Website redesign for annual entrepreneurship conference
March - August 2023
New design system, content management system, and responsive website build
Design a website that aligned with STLSW's rebranded visual identity, improved user experience for entrepreneurs who could benefit from the event's programming, and made it easy for organizers to update site content
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

Take it for a spin

Explore the live website (designed in Figma and built in Webflow) that I created for STL Startup Week, a nonprofit organization that organizes an annual weeklong conference for entrepreneurs.

Design Process


I started with an audit of Startup Week’s existing website, which they inherited from an organization that used to run the event. I documented the site’s current content and calls to action, then met with event organizers to discuss their pain points.

Screenshots from the original STL Startup Week website

The key challenges were:

  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

During this phase, we were also able to identify technical requirements (integrations with Mailchimp and Sched, for example) and prioritize goals for the new site.


The next step was to define the overall 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), it was easy to identify the types of content we needed and how they should be organized.

The sitemap created an organizational structure for the STLSWK site

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

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

After identifying the objects, I built a model to define the relationships between them, and attributes associated with each.

I used Notion’s database gallery view to map out the relationships between objects and the attributes that were needed to define them.

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.

Screenshot of the “Event” collection settings screen in Webflow


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 trashing ones that don’t.

Hand-drawn wireframes for key pages
Close-up view of some wireframes

As a very digital person, my favorite way to ideate is sketching in the Concepts app on my iPad. While the experience is the same (for me) as drawing on paper, I can move things around quickly and easily—and when it’s time to get into Figma, I’m able to export my final sketches as an SVG and drop them into their own Figma page for reference.

Designing in Figma

I use atomic design language to describe my work in this section. It’s an approach pioneered by Brad Frost in the early 2010s that breaks designs into smaller pieces that can be reused and combined for efficiency and scalability.

To create Startup Week’s design system, I began with the most basic elements (typescales, colors, icons, logos, etc.) before moving to atoms (buttons, dropdowns, etc.), molecules (form fields, list items, etc.), and finally organisms (cards, modals, etc.).

Basic pieces of STLSW’s design system in Figma

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

Overview of screen designs.
Some of the components, including a hero, conversion panel, news deck, switchback, and benefits deck

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 locations, events, people, and photo galleries

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.

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 use the Client-First method developed by Finsweet when building in Webflow. It's an approach to page structure and class naming/styling that helps projects stay organized, fluid, consistent, and responsive.

I'll keep this part of the case study brief, even though it was one of the more time-consuming phases. My process was essentially:

  1. Build all of the design system components and save them as symbols for re-use
  2. Build out each key page from the components + any unique elements that need to be created
  3. Build the detail pages for each published collection (events, people, locations, etc.)
  4. Make it all responsive (this involves lots of jumping back and forth between pages and breakpoints)
  5. Fill out SEO metadata and Open Graph content for all pages
  6. Finalize static copy across site (e.g., everything not tied to a collection)
  7. Populate the CMS with content for 2023, including speaker and committee members and event details
  8. Set up integrations with email marketing and event management platforms
  9. Test, test, and test some more
  10. Review by stakeholders + small revisions
  11. Go live!

CTA Collection

One final piece of the project I'll mention was the creation of a Webflow collection for Startup Week's main calls to action (CTAs). This required a little more setup work, but it will allow organizers in the future to update their most important CTAs (register, sponsor, become a speaker, sign up for emails) in one place and watch them update dynamically across the site.

I accomplished this by:

  1. Creating a Webflow collection with the basic fields name, URL, and button text
  2. Populating the collection with four main calls to action
  3. Creating buttons on the style sheet for each CTA, linking them to the collection, and turning them into symbols
  4. Adjusting button groups in key places on the site (global nav, footer, heroes, conversion panels, etc.) to use those symbols

Note: If you're a Webflow user, you'll know I'm simplifying this process. If you're curious about using it for one of your own projects, let me know and I'll give you the full rundown.


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 this year's event has in store.

Ready for more?

Check out additional case studies below!
More case studies