My latest position is at ECHO a web-tool developed by the Boston Housing Authority to assist low income families while searching for housing. I’ve had the opportunity to create a new brand for them, update the look of their desktop site, participate in user testing, and begin prototyping their mobile site.
I’m working closely with another designer on these designs as well as UX researchers, programmers and policy-makers.
Where We Started
This was how ECHO's logo and layout looked when we began the summer. The website
had extremely limited functionality on mobile devices, which the primary issue we wanted to solve.
Early sketches and different directions for the logo. We held focus groups with BHA employees to determine which logo worked the best after we came up with 5 final options, and used their feedback along with our own design sensibilities to determine which logo worked best.
User Journey Flowchart
We created these to map out how users would travel through the desktop and mobile versions, with a focus on the onboarding process.
Promotional Site Wireframes
Some rough wireframes of ECHO's promotional site. You can see it the final version at the bottom of this page.
The house in this logo is formed from lines that are reminiscent of transit lines, which ties into the ECHO tool's focus on public transit. It can also be read as a journey towards housing. We used a customized version of Euclid Circular A with rounded corners to it appear more friendly and approachable. This logo also performed the best out of 5 total options in focus groups.
We chose this typeface for its geometric but friendly character. The circular O's were important to us because of their use in the logo, and also because they give Euclid Circular A a round look.
We chose these colors to feel approachable and soft. Blues are common in corporate websites, but we didn't want to go all blue, so we went with soft shades of blue-green with bright yellow accent. The interactive color is a bright shade of blue since users are most likely to recognize blue buttons as being clickable.
These colors also tested best in our focus groups.
Map Assets and Buttons
These are assets and colors that appear on ECHO's website. They all have a subtly rounded style for maximum friendless.
These are some motifs that can be used in ECHO's materials. The lines and dots play off of public transit imagery, a callback to the logo and transit emphasis in the ECHO tool.
We created a printable branding guide for ECHO to advise future designers and programmers on how to implement the brand. It also serves as a summary of our contributions to the project.
Web and Interface Designs
This is the part of ECHO's site that's visible to the public, so it needs to create a good first impression! I created this prototype to guide the programmers in creating the site. Visit the site here at: https://echosearch.org/ (note that the site still needs to be connected with the ECHO tool site)
Mobile Prototype (Fully Interactive, Low Fidelity)
This is the mobile prototype we created for user testing. Some rough brand standards are applied, but the visuals are not complete. The most important thing for this prototype is that it's fully interactive, so users are able to click through it as if it's real. After user testing, we used what we learned to refine this prototype and work towards a finished website.
Mobile Prototype Screens
Here's a selection of screens, in order, from the prototype.
North Stars (Mobile and Desktop Site)
After running the tests on the mobile prototype, I created these to serve as more polished inspiration. "North stars" provide a visual guideline for how the final site should look. These are high fidelity, one-page mockups with the brand guidelines applied that represent the final styles.
All content was created for and belongs to the ECHO program of the Boston Housing Authority. Thanks to the ECHO team, our user testers, and our focus group participants for all their help!
Visual designs created by me and Janina Yutkins-Kennedy. UX/UI and programming input from Zachary Bennet-Engler, Juan Carlos Garcia, and Trinity Gao. Physical space renderings by Helena Briones. Copy for mobile prototype from Nick Kelly and Sietse Goffard.