Three Squares Main Street JP Website Redesign
Project Summary
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:
To support the initiative to revive the local economy, bring the community together, and create a structure that supports those efforts.
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
Guidance on how to align and manage the content long-term.
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
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
Methodology:
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.
Process:
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.)
Results
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
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
Sketches
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.
Wireframes
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.
Prototype
Credit to Grace Lau for building the prototype with Webflow. I will soon use this prototype for usability testing.
Rebranding
Currently the organization is rebranding. More updates to this project will follow.