The Foundry
Website Redesign

A responsive and scalable redesign that helps visitors learn more about a new community center and provides them a frictionless way to reserve space within the building.
Web
Mobile IOS
MacBook mockupiPhone mockup
Before
After
Overview

About The Foundry

The Foundry is a nonprofit community space and creative innovation center based in Cambridge, MA that was opening to the public for the first time in September 2022.

Project Summary

Ahead of their opening, stakeholders wanted to redesign and relaunch their website to allow community members to learn more about the space and create excitement around its opening.
Specifically, stakeholders wanted to prioritize the development of a room reservation feature on the site.

Client Goals

Inform

Introduce the organization before the opening and provide them opportunities to learn more about the organization and upcoming events.

Engage

Allow users to get involved with the organization online by reserving rooms, signing up to volunteer, and donating.

Connect

Showcase the organization's commitment to creating a diverse and inclusive space that community members can imagine themselves in.

Project Challenges

Working with limited photography

Because the building was still undergoing construction at the time of the site launch, the client had very few photos of the space, and the photos that did exist were low quality.

A wealth of information

The organization has a lot of ways it wanted to engage with the community, all of which needed to be represented on the website and clear enough for visitors to understand at a glance.

Limited time until launch

With only 4 weeks until the client wanted to debut a developed site, planning and prioritizing was crucial.
Dashboard mockup

Project Timeline in Clickup

Problem

How can the new website instill interest and trust in a space that cannot yet be visited?

Process

Research

Discovering what potential users expectations and needs are.

Strategize

Prioritizing and outlining the site’s content and features.

Design & Develop

Developing the look and visual design and translating that to Webflow.

Test & Revise

Testing a prototype of the site to find and revise issues before launch.
Research

Discovering needs and identifying trends

There was a lot of crucial information that I was unfamiliar with when starting this project, so I began researching in order to establish a solid foundation for the project. In addition to general research about best practices for websites of similar organizations, I wanted to prioritize research around space reservation to align with stakeholder priorities.
Dashboard mockup
Competitive Analysis

Understanding the market

I conducted a competitive analysis of the websites of community centers the same area as well as indirect competitors who offered some kind of space reservation.

Research Goals

Understand what our competitors websites offer and how they structure their content.
Understand how direct and indirect competitors handle room reservation.
Direct Competitors
Indirect Competitors

Analysis Summary

Overall Strengths

Clear main navigation and CTAs that direct users toward booking.
A wealth of information on spaces, including photos, descriptions, equipment, capacity, furniture, pricing, and availability.
Options to compare spaces and availability.
Illustrations, floor plans, and comprehensive descriptions when photos are not available.
Visual design with good hierarchy, modern aesthetics, and consistency throughout the site.

Overall Weaknesses

Few if any direct competitors allow users to reserve space online, most require users to correspond with a coordinator to book.
Complicated and confusing information architecture where there are too many items and confusing labels.
A lack of compelling and cohesive visual design.
Lack of descriptive details about the space, cost, or availability.
Dashboard mockup
Survey

Understanding the user

I conducted a survey with 20 participants who had prior experience reserving meeting and event spaces to understand what people expect when reserving space and what common frustrations they experience.

Research Goals

Determine what factors people consider when reserving a room.
Determine what information people need in order to feel confident reserving a room they cannot see in person.
Determine what pain points people experience when reserving spaces.

Survey Results

Mockup

55%

of respondents prefer to book online

This is followed by 20% who preferred to book over email, and 15% who preferred to book over the phone.
Mockup

Not all details are valued equally

Respondents indicated that capacity (85%), photos (50%) and available equipment (40%) where pieces of information that they considered very important.
Mockup

50%

of respondents would not book a room without photos

45% of respondents would book if they had information on capacity, 30% would book if they had a floor plan, and 15% would book if they had room dimensions.

User Likes

Access to a knowledgeable and responsive staff member, good customer service.
Clear and accessible information on the room, rental policies, availability, and expectations.
Ability to easily start the booking process online.

User Dislikes

Unresponsive staff, not having a point of contact
Incomplete or unclear information online
Filter, export, and drilldown on the data quickly
Dashboard mockup
Interviews

Understanding business needs

I conducted interviews with 3 subject matter experts who have professional experience running reservation systems.

Research Goals

Understand common frustrations people running reservation systems experience.
Discover what systems and best practices professionals find most helpful.
"People really want to be able to talk directly with someone who manages the space. It helps them feel more secure and taken care of."
Participant 1
Venue Owner
"There's already a lot of back and forth coordinating reservations, the more work the website does the more time staff members will get back."
Participant 2
Former Co-Working Space Employee

Interview Results

Participant Likes

When they can refer customers to the website for more information.
Having a system that saves them time.
Connecting with program providers who align with the organization's mission.

Participant Dislikes

Having to answer the same question with each new inquiry.
Spending a lot of time communicating back and forth before a reservation is made.

Key insights

1

Users love information

Users expect to have a lot of information on the space before booking (capacity, amenities/equipment, cost what the span can/cannot be used for, etc.) and are frustrated when this information is missing, hard to find, or inconsistent.
Dashboard mockup
Dashboard mockup
2

Users know what they're looking for

When people are looking for a space to rent, they are usually booking for a specific reason and know the requirements the space needs to meet. They like when there are ways to narrow their search to spaces that meet these needs.
3

Nothing can replace a point of contact

Users expect to have a point of contact for the reservation even if they book online. They like when this contact is helpful and communicative, but not when they are hard to reach.
Dashboard mockup
Dashboard mockup
4

Let the website do the hard work

The more that the website is able to provide users, the less work a coordinator will have to do to provide a similar service.
Strategize

Translating research to structure

With a better understanding of user needs and project challenges, I began to strategize about how users would move through the website and what information architecture made the most sense for the client's content.
Personas

Defining our users

Based on insights gained from the research phase, I created two personas that represent two possible users of the reservation feature.
Joanne Wright
Teacher & Community Activist • Cambridge, MA
She's a time-strapped teacher who has been getting involved with local grass roots efforts during the pandemic. Her group has outgrown her living room and needs a meeting space that can fit everyone.

Goals/Needs

To find a space for her organization to meet
Save as much time as possible
Support the Cambridge community

Frustrations/Fears

Not being able to afford a meeting space
Not having enough time/energy to do everything
Not having enough room for everyone attending
RJ Stevenson
Operations Manager
They're a high-achieving Operations Manager at a local start-up. The company they work for went remote at the start of the pandemic but are looking for spaces to hold in-person meetings.

Goals/Needs

To be perceived as smart, reliable, and competent at work
To appease their boss
To find efficient solutions for their work assignments

Frustrations/Fears

Worried about looking incompitent at work
Making people at work upset or frustrated
Keeping up with their employer's changing needs
User Flow

Guiding users through the reservation process

The client planned on using the app CozyCal to handle reservations, so the task became integrating this software into the site and creating a path for the user to the "Book Now" button.
I wanted to create a flow that helped users make decisions about the rooms they were interested, so I began with a framework that first showed users general information that got more specific as they went deeper into the flow.

Reserve Space Page

Provides a broad overview of reserving space at the Foundry and the options available.

Room Category Page

Shows users a list of rooms that have similar use cases and gives brief details on each

Room Detail Page

Gives an in depth description of a specific room.

Reservation user flow

Dashboard mockup
Site map

Prioritizing & organizing

Because I knew I wouldn't be able to design, develop, and launch the site with all of the client's desired content in the allotted timeframe, I developed a prioritization system to help guide decisions about content.
This allowed me to focus on the most essential content for launch, create a plan for integrating the remaining content in future updates, and design information architecture with those future updates in mind.

Prioritization system

!

Phase 1

MVP Launch

Absolutely necessary to launch the first version of the site.

Phase 2

High-Priority Updates

Important but not essential for launch. Should be added within a month after launch.

Phase 3

Mid-Priority Updates

Elements that could be added within the next year after launch.

Phase 4

Wishlist

Content that would be nice to have on the site but didn't need to be added urgently.

Site Map V1

Created during prior to the initial design phase
Dashboard mockup

Site Map V2

Revised post-launch to address stakeholder and user feedback
Dashboard mockup
Lo-fi Wireframes

Letting research insights guide design decisions

As I began wireframe development, my focus was on presenting the information users indicated was important to them in a clear and accessible manner.
I also built these with layouts and components that could be repeated throughout the site, which would make developing these designs that much easier.

Reserve Space Page

Dashboard mockup

Room Category PAge

Dashboard mockup

Room detail page

Dashboard mockup

Home PAge

Dashboard mockup

Visit Us Page

Dashboard mockup
Design & Develop

Bringing plans to life

After approving the wireframes with the client, I began tackling the visual design of the website. This stage involved two key challenges: making a site that aligned with the client's goals while keeping to it's brand guidelines and developing an MVP in a short time frame before launch
Brand Guidelines

Finding new opportunities in existing branding

The Foundry came with some minimal brand guidelines that needed to be incorporated into the visual design of the new site, but the industrial feel and harsh color scheme of these felt incompatible with the client's desired friendly look.
Dashboard mockup

Client Goals

Friendly Tone

The client wanted the site to have a friendly, welcoming appearance so that visitors would feel comfortable navigating it.

Modern Aesthetic

The client wanted a modern, contemporary look for the site to reflect the innovativeness of the organization's programs.

Community Representation

The client wanted the visual design of the site to accurately represent and appeal to the diverse community it serves.
Visual Design

Transforming Existing Assets

This project came with two huge challenges: existing brand guidelines that didn't match the client's vision and a lack of photos of the space.
To solve this, I had to find new ways to use those guidelines to better align with the client's vision, as well as develop compelling assets from open source images.

Visual Design Solutions

Mockup

Impactful Red Accents

The Foundry's signature red color is used sparingly to highlight titles, links, and CTAs without becoming overpowering.
Mockup

Collage Graphics

I created collages made from open source images and geometric shapes to add playfulness to the overall design.
Mockup

Black & White Images

To compensate for low image quality and improve visual choesion, I chose to display most images on the site in black and white.
Mockup

Diverse Representation

The client wanted to make sure everyone could see themselves at the Foundry, so I choose photos that represented a range of people.

Home PAge

Dashboard mockup

room detail page

Dashboard mockup
development

Translating Designs to Webflow

After designs were approved by the client, I began translating my Figma files to Webflow to prepare for launch. My plan to build the design around repeating components made the development process more efficient and allowed me to incorporate any priority edits from user testing directly into the developed site before launch.
Dashboard mockup

Designer view of the new site in Webflow

Test & Revise

Iterating Based on User Feedback

Due to time constraints user testing was conducted shortly after launch to discover and quickly remedy any pain points.
Dashboard mockup

View of the MAze test results dashboard

User Testing

Confirming Viability

I conducted an unmoderated usability test with 7 participants using Maze that focused on the room reservation process and overall impression of the site.

Test objectives

First Impressions

Determine if users get an accurate impression of the Foundry from the homepage.

Finding a Room

See if users can find a specific room to reserve based on given criteria.

Making a Reservation

See if the reservation CTA on each room page is intuitive and easy to find.
Dashboard mockup

Affinity map of participant feedback and observations

Successes

100%

of testers were able to complete the assigned tasks with minimal misclicks in a short amount of time

"Overall, I thought the IA was great and easy to navigate. I also really liked your style choices, spacing, and typography :) I felt confident using the site.”
Tester 2

86%

of testers were able to identify core functions of the Foundry based on the home page.

"I thought the page was divided up really well! It was super easy to scan information and find what I needed.”
Tester 7

8.1 & 10

was the average rating the testers gave their experiences of finding their desired (8.1) room and reserving it (10).

"This was very easy. And the transparent pricing is very helpful & respectful of my time/efforts researching venues for this meeting."
Tester 3

Priority Revisions

Quick Fix

Room category cards

Pain Point

Users were unsure what kind of rooms were in each of the 3 room categories.

Solution

Adding a more robust description to each category card.
Dashboard mockup

Before

Dashboard mockup

After

Feature Development

Room sorting

Pain Point

Users were confused that rooms weren’t ordered based on capacity and wanted similar capacity rooms grouped together so they could compare them.

Solution

Ordering rooms based on capacity to immediately solve the problem, but possibly develop sorting/filtering functionality.
Dashboard mockup

Before

Dashboard mockup

after

Quick Fix

Room pricing clarity

Pain Point

Users didn’t understand the term NPO on the room information page.

Solution

Replacing NPO with the full phrase (Nonprofit) to increase clarity.
Dashboard mockup

Before

Dashboard mockup

After

Cost Section V2

Provided more information about the types of reservations and sliding scale.
Dashboard mockup

Cost Section V3

After getting more complaints from users about information on sliding scale, a more comprehensive redesign was required
Dashboard mockup
Dashboard mockup

New Sliding Scale PAge

This version was created prior to launch
Dashboard mockup
Design Update

Room Cost Section Update

As I began wireframe development, my focus was on presenting the information users indicated was important to them in a clear and accessible manner.
Dashboard mockup
Conclusion

The Final Product

Testimonials

Untitled has saved us thousands of hours of work. We’re able to spin up projects and features faster.

Participant 1
Venue Owner
"People really want to be able to talk directly with someone who manages the space. It helps them feel more secure and taken care of."
Participant 1
Venue Owner
"There's already a lot of back and forth coordinating reservations, the more work the website does the more time staff members will get back."
Participant 2
Former Co-Working Space Employee