homepagemockup.png

Everyday Boston

Everday Boston

brand & web design . Scout labs

 

Giving Everyday Boston a website and brand that fit its mission as well as promoted the incredible work it does within Boston, was my team of five's mission while on Scout Labs. Meeting multiple times a week, our interdisciplinary team collaborated to redesign Everyday Boston's site. As the teams main designer, I was responsible for updating the branding and creating high fidelity mockups from new wireframes other members created. 

Artboard 9.png
 
interview-2.jpg
 
 

A large portion of our time while working with Everyday Boston was spent conducting research to gain a better understanding of the audiences we were targeting and the communities we were engaging with. We conducted in person interviews as well as sent out surveys to inform our designs.

Who would be using the site? Where did they feel comfortable? Which communities did they associate with? What does community mean to them? How can the site be a tool for them?

barriers.png
 
 

This research also helped us gain a deeper understanding of what this organization is about and how we can create a site that really expresses those qualities fully. By bringing the interviews back to Everyday Boston’s founder and hearing her perspective on the responses solidified her own ideas about the organization which made her communication to us even clearer.

 
 
 
sitemap.png

After interviewing, our next phase was to start wire framing the new site. We created a sitemap that would keep our designs concise and relevant. With each wireframe two members of our team would create their own versions and then we would come together and take pieces from each person’s designs which lead to a more creative and open process of collaboration.

 
 
notes_wireframe-2.jpg
 
 

With a set of wireframes that covered the site, we then used user testing to see if the wireframes we created would translate to multiple different users. The information we gained from the testing then pushed us to our next phase of creating mockups. By experimenting with color and type, I was able to help Everyday Boston find its true voice and an identity that presented itself as genuinely possible.

 
 
Home.png
Story Article.png
 
:wireframe mockup option1

:wireframe mockup option1

:wireframe mockup option2

:wireframe mockup option2

:wireframe mockup option2

:wireframe mockup option2

 
 

As another way of bringing out the human side of the organization, I illustrated actual interactions that were photographed at some of the events hosted by Everyday Boston. Just as we needed to find typefaces and colors that represented the brand, the illustrations also went through a round of edits to find the best style. These small drawings add another layer of connection that bring the true meaning of the organization to life.

 
:exploring how much detail works best with the brand

:exploring how much detail works best with the brand

 

To keep the whole brand consistent, my team and I relooked at the existing logo and reworked it to match and flow with the new website. From early sketches for a total redesign, to more edited down versions of the original, we decided on something that felt had strong ties to the old logo while also moving forward with the more contemporary feeling of the new site.

 
logo_notes-2.jpg
 
:original logo

:original logo

:logo sketches

:logo sketches

:final logo

:final logo

:original landing page

:original landing page

:original about page

:original about page

 
 

Once we had found a font pairing and color scheme that we believed represented Everyday Boston, I was able to put the new brand all together into more high fidelity mockups. Check out the full site at everydayboston.org

 
homepagemockup.png
anothermockup.png