THE VAULT

The San Francisco Vault is located in Jackson Square. It is a co-working space that provides a vibrant networking community and full-service workspace. A place for key business resources and events center.

A place for collaboration, innovation, and presentation by hosting various events. By 2020 The Vault will have locations on 5 continents and more than 1000 startups in The Vault network.

The Challenge

Re-design their existing website to make it more vibrant and interesting visually and to showcase many exciting changes like the launch of 2 startup accelerators, new classes in fintech, blockchain, and blockchain programming, and kick off of a startup mentoring program. The current website is outdated and not attracting enough users.

Tasks

To redesign several key pages of the current website. Work closely with the CEO, two designers, one developer, and Head of Marketing to understand their pain points and design good user flow. Create and/or edit icons and other graphical elements as needed using Adobe Illustrator. Design, create and present wireframes, hi-fidelity mockups, style guide using Sketch.

Process

p

Discovery and Planning

Virtual meeting with the CEO, developers, and head of marketing for project introduction, goals definition and designing planning. The goal is to update the webpage and gain more visitors.

l

Research and Strategy

Conduct research to gain more knowledge of collaboration spaces. Send out an anonymous survey to startups and entrepreneurs groups to get their thoughts and needs for collaboration spaces.



Ideate

Based on the findings from the survey decide what the redesigns should focus on. Notes: Focus on the idea of creating an ecosystem, a collaborative space. More visuals, fewer words. Clear call to action buttons. Creating a modern feel.



Design and Test

Create wireframes, style guides and high fidelity prototypes based on the needs from their current designs. Perform user testing to gage the users’ experience with the new redesigns and follow up on iterations.

Wireframes

This graphical wireframing stage allowed for more refinement as ‘feature creep’ was identified and removed. We used Sketch for wireframing of all the web pages. Click the image to enlarge it.

Style Guide

The style guide was then created as a resource for designers, product managers, and developers, providing a common language around websites’ UI design patterns. We used Sketch to create a single page style guide whereas used Adobe Illustrator for icons. Click the image to enlarge it.