Three Squares Main Street JP Website Redesign

Project Summary

Photo of the Old Site Design

Old HJSMS Site Design

The goal of the project was to develop the Hyde Jackson Square Main Street website through the exploration of user and stakeholder requirements, summation of research, collaborative mapping, and validation through testing.

Project Goals:

    1. To support the initiative to revive the local economy, bring the community together, and create a structure that supports those efforts.

    2. Develop a website for the organization that is communicative and informative.

      • Showcase the local community and businesses.

      • Provide the public with a business directory and an events calendar

    3. Guidance on how to align and manage the content long-term.

    4. Reach out to Target Audience

      • Local business owners/storefront business owners

      • Visitors to the area, tourists

      • Business owners looking to relocate

      • Prospective volunteers

      • Community organizations

    5. Launch in FY18 - flexible

Competitive Analysis

Analysis on how similar organizations clearly promoted their mission and their leaders

Analysis on how similar organizations promoted their service and highlighted their impact in their respective community

Analysis on how similar organizations promoted their support for current and prospective business owners in their communities


I evaluated several Main Street Organizations on the north eastern part of the United States on how well they each addressed their audience's content needs.


I consolidated tasks into three areas of focus (Organization, Community, Economy) and scored each organization (0-5) for each content heuristic. (Heuristic: broad rules of thumb but not specific usability guidelines.)


The majority of the sites reviewed had very basic information, but was not updated frequently. The information that was provided was also not framed in a way that would be interesting to users. To effectively engage its users, HJSMS needs to focus on the need of its service and show the impact through powerful storytelling and visuals.

Content Strategy

Through a series of design thinking sessions with a group of volunteers, we came up with some ways to group the different types of content that would be included onto the site. We had several researchers working remotely so we used Miro and Google Drawing to organize the data. The goal for these exercises was to discover relationships with different types of content and creating a simple structure for the information to be easily accessibly by the user.

Content modeling

Affinity Map

Site Map

Content Management

Airtable was used to consolidate all the photographic content to be uploaded onto the new website. While collaborating with the client, we selected the photographs that were best suitable for each page. The client also used this space to keep track of which images they needed to clear before they get published. This involved reaching out to some of the people featured in the images and asking for their permission to use their likeness for the site. The images were then optimized for the web using Photoshop and then imported into the WordPress platform.


Interviews were conducted early on with the stakeholders. The people involved in the organization are primarily volunteers and had valuable information on what they wish to see for the new website. Each individual was responsible for a particular area in the organization and discussions were had about what requirements were needed for the site. We used Zoom conferencing to communicate, for our kickoff meeting, design thinking sessions, and our ongoing weekly brief meetings to update them on our progress.

Design Thinking


I led design studios with colleagues and volunteers to sketch out potential designs for different pages for the site. We then presented our sketches and assessed which design choices worked the best.

The design studio sessions were done online via Zoom and presentations were displayed over Real Time Board.


Working collaboratively during the sketching process has always been my favorite part of the design process. Each volunteer had time to discuss their designs to justify the design decisions they took during the exercise. From the feedback we gathered from the exercises I created a low fidelity wireframe of the site homepage (Homepage v.2). My design reflects the stakeholders' wishes to prioritize information about the organization, the community, and the local economy.

Wireframe created by Grace Lau after our first design studio

Wireframe designed by me using Adobe Xd

This is an iteration of the previous wireframe after more discussions were had with the client about what requirements should be prioritized.


Credit to Grace Lau for building the prototype with Webflow. I will soon use this prototype for usability testing.


Currently the organization is rebranding. More updates to this project will follow.