100+ Accelerator

Website for a global accelerator program

When
2019
What
Interface design, copywriting, branding, development

Summary

Over 4 weeks, I designed and built a website for a global accelerator program, integrating a content management system, and social media feed. The site has hundreds of monthly visitors, who can apply to the program on an accessible, mobile-friendly, and easy-to-navigate site.

View the site here.

100+ Accelerator screenshot of the home page.

Background

The 100+ Accelerator is an accelerator program launched by AB InBev in the Fall of 2018. The program is targeted towards startups that are addressing global sustainability issues and was launched in partnership with Highline Beta. The initial website was rushed into production, right before registration opened for the first cohort, which unfortunately resulted in a site that lacked quality in terms of accessibility, transparency of information, and the ability to scale. I sought to make the site more engaging, accessible and world-class through the means of a redesign.

I worked with several accelerator directors and operations managers that had oversight into the program, to update the site. My task was to design and build the new website, with the goal of increasing marketing reach and to drive conversion (cohort sign-ups). Given that I was the only designer/developer working on this project and my preference for lean and agile methodologies, I opted to use a feature-driven development process for this project.

Usability problems

There were a few issues that necessitated the need for this project:

  1. The site was not mobile-optimized.
  2. The site did not meet accessibility (WCAG Level A) requirements.
  3. The application process linked to an external page, that required you to send an email to an address.
  4. The site hierarchy hid several important links about the program, such as mentors, and news.
  5. There was no program timeline, nor mention of the cost (it was free).
  6. There was no way to subscribe to a mailing list to be alerted of updates.
A before (Aug 2018) and after (Jan 2019) screenshot of part of the landing page on mobile. The original implementation lacked color contrast, a nav-bar menu, and mobile optimization.

Requirements & constraints

I collected data, conducted a competitive analysis of other accelerator programs, and created a comparison matrix of features and site-map structures. From this, I produced a list of requirements that would bring the site "up to par"—and surpass—other accelerator program sites. I then presented this to the directors to refine the details and the scope.

The final feature requirements can be summarized in the following:

  • Make the site mobile responsive.
  • Make the site WCAG Level AA accessible.
  • Provide a clear call to action to sign up, if applications are open—if not, provide a message/timeline on when it will open, and offer the opportunity to sign up to a mailing list to be alerted of when applications are open.
  • Provide a clear mission statement on what kind of applicants the program is looking for, and the requirements that must be met. This saves both the applicant and company time.
  • Provide content in a clear information hierarchy, such that no information is hidden. By highlighting the content on a single page, and providing a single level nav-bar menu, information can be easily found and accessed.
  • Include a content management system (CMS) integration, so any user can go and edit copy, without needing developer assistance. It should also be able to set the registration window times and where the landing-page CTA links to (wait-list or application form).
  • Include a newsletter subscription form so people that may be interested, but are not yet ready to sign up, have an opportunity to join in at a later date.
  • Include the company Instagram feed to showcase cohort progress and the program's impact. The social feed was being updated by a separate team, so this provided significant value with a limited amount of work.
  • Add a blog section for extra news and media content.

There were some constraints set at the start as well, some of which helped form the above requirements:

  • I am the only designer/developer that will be working on the site.
  • There is no copywriter, so I would have to update and add additional copy.
  • There were no firm timelines set in place, so the copy needed to be vague, but not too broad to deter interested users.
A before (Aug 2018) and after (Jan 2019) screenshot of the Request for Information Form, and the new Wait-list Form, respectively.

Design & challenges

I created the initial designs and sitemaps in Figma, utilizing the card metaphor for several components. While I experimented with several designs of varying colors and complexity, I ultimately ended up with something very similar to what you see in the final product.

One design challenge that arose was in the layout of all the information presented: designs quickly became convoluted and confusing, which led me to use sections with larger spaces for dividers, more heavily investing in the Cards component, and introducing tags. The goal was to make the site colorful, but not overwhelming.

Some development challenges that arose from the process was the integration of the CMS software with some legacy code, which resulted in a bug that took the site offline. In response, I introduced automated integration testing to ensure that bugs are all caught before deployment, and no feature regressions are going forward.

100+ Accelerator screenshot of a supporting page.

Development

I worked on the development of the site using HTML, CSS, and React, with a Contentful CMS integration. Netlify was used for deployment, and Figma was used as the design tool.

Results & next steps

After the weekly development cycles of building and iterating the site was completed and launched. Overall there were significant improvements to the site, as all the feature requirements were built and integrated successfully into the site.

However, there are still improvements to be made in terms of SEO, page-size, and a few accessibility upgrades. The usefulness of the analytics data was limited since applications are not set to reopen until the Fall of 2019. Once registration opens I can compare cohort analysis trends to uncover further optimization opportunities, and truly bring the site to world-class prestige.