Boston New Technology - Non Profit Startup Community

Designed and developed the new BNT website using Framer (A no-code tool)

Final Design (Homepage)

OVERVIEW

Boston New Technology (BNT) is a not-for-profit, community-supported startup, with a mission is to help local business launch and grow, especially early-stage startups!

Problem

BNT faced several challenges with its website, including poor navigation, an overwhelming amount of content, and a lack of visual appeal. The site struggled to effectively communicate BNT's mission and values, leading to difficulties in attracting new members and retaining existing ones.

Outcome

The redesign of the BNT website led to significant improvements in user engagement and site traffic. Key outcomes included:

  • Increased Traffic: A 144% increase in unique visitors each month, from 326 to 798.

  • Better Navigation and Content: Simplified navigation and improved content discoverability reduced member queries by 70%, empowering users to independently find key content such as events, perks, and blogs.

Timeline

8 weeks

Tools

Figma, FigJam and Framer

Contributors

3 Project Advisors, 1 Product Manager, 3 [Designers + Site Architects (including me)]

DESIGN APPROACH

Research → Design → Prototype → Iterate → Launch

I am proud of this project because we conducted user research, designed mockups in Figma, created prototype using Framer and did usability testing, incorporated feedback – all within 8 weeks of volunteering as a Site Architect.

Here is how the work was broken down:

Week 1 -> Research

My team and I ran a quick survey to understand current experiences with a total of 20 BNT community members.

Week 2 and 3 -> Design

I designed the first few set of screens to define the information architecture and set a base for visual style in Figma.

Week 4, 5 and 6 -> Prototyping

Once the overall basic designs were set, we prototyped all the pages in Framer, collaborating all the time.

Week 7 and 8 -> Feedback and Launch

We received feedback on our prototype directly from our users (community members) on Framer, and we iterated on the pages accordingly. Finally we were ready for launch post incorporating feedback.

USER INSIGHTS

Voices from the Community

Through our quick survey with 20 community members, we heard firsthand about the frustrations and aspirations of BNT's users. By listening to their stories, we gained a deeper understanding of what they needed from the website—what worked for them and what didn't.

Here are the results:

78%

of users struggled with navigation and felt the website was disorganized.

Users reported difficulty finding relevant resources and information quickly due to unclear menus and an overwhelming amount of options.

95%

of users found the content overwhelming and preferred more visuals.

The abundance of text made it hard to identify vital information, and users suggested simplifying copy and introducing visual elements to improve usability.

72%

of users felt the website didn’t clearly communicate BNT’s mission.

Users noted that outdated videos, articles, and poorly structured pages made it difficult to understand BNT’s purpose and value.

Click arrows for next page

Launched version

Final Designs

With that, here is the prototype hosted on Framer. We also got 50+ comments on Framer as feedback which we took into consideration and iterated accordingly.

  • Page #1 About

    The "About" page was designed to establish BNT’s identity as one of New England’s first tech and innovation hubs while highlighting its mission, vision, and values. User research revealed that visitors wanted a clear understanding of BNT’s purpose and its impact on the community. To address this, we focused on showcasing BNT’s history, achievements, and the team behind its success.

  • Page #2 Events and Programs

    The "Events & Programs" page was created to showcase BNT's vibrant ecosystem of activities and opportunities. User research revealed that users struggled to find event details and understand the scope of BNT’s offerings. To address this, we prominently highlighted signature programs like Startup Showcases, Precision Pitch Practice, and Fireside Chats. Testimonials were added to build trust and credibility, while curated sections ensured users could easily explore upcoming events

  • Page #3 Resources

    The "Resources" page serves as a knowledge hub for users seeking articles, blogs, and educational content. Research showed that users valued free resources but often overlooked them due to poor organization on the previous website. To resolve this, we structured the page with clear categories, making it easy to discover valuable content.

  • Page #4 Contact Us

    The "Contact" page was designed to provide a straightforward way for users to connect with BNT. User feedback emphasized the importance of easy access to contact details for inquiries. We included a simple contact form alongside essential information like email, phone number, and FAQs to ensure users could quickly get the help they needed.

PROJECT TAKEAWAYS

Reflections on Growth and Impact

This project was such a rewarding experience for all of us. It really pushed us to listen closely to the users, understand the problems they were facing, and work together as a team to brainstorm and exchange ideas.

Lastly, I am truly grateful for the opportunity to collaborate with such an amazing team. The picture below takes me back to our "Community Contributions" page from the earlier version of the website. A reminder of the dedication, creativity, and unique journeys that each of us brought to this project.