The Friendly Neighbor

For this project, we were meant to design a responsive online platform for a magazine, newspaper, or blog to meet the goals of one of the User Personas provided. My partner, Eric and I, had to deliver a consistent, branded, and engaging experience. We had three weeks to work mainly on the UI of this editorial project since we would choose one of the provided User Personas. We worked on Figma and Figma Jam throughout this project.

 

Our selected user was Elaine, the Eco-Friendly researcher;

  • She reads National Geographic, The New Yorker, Broadly.

  • She wants to invest more in self-care and self-love while being good to others, seeding a more empathic society.

  • She volunteers for the community.

  • She reads during work breaks. She often works at home when she’s not at university or the library.

  • Goals: be more rational, Discover new passions, achieve an excellent work-life balance.

Being able to help your community is a fantastic achievement because, to some extent, you can shape the community you are a part of. It improves morale and creates a healthy neighborhood. Apart from the benefits for the community, it also boosts self-confidence, helps widen one’s circle, and allows discovering new interests. 

We first started by properly viewing and filling in some missing information about the User Persona, like her location, occupation, and highlighting her pains. We were also already given our competitors: The National Geographic, The New Yorker, and Broadly.

We started with the Feature Comparison chart to analyze what features our users expected and what features we could use to distinguish ourselves. 

We saw that navigation bars, spotlights, and newsletters were expected from our users but they did not expect an ad-free experience, a search bar, and a volunteer opportunity search page.

With that in mind, we did a brand comparison to compare each attribute of our competitors.

With this information, we made out that the target audience for the companies were educated people in their passion, whether it is environmental, political, or societal, they are educated. Which meant we had appealed to that demographic.

 

Following both the Feature Comparison and the Brand Attributes, we came up with the Market Positioning Map. We placed each company in its respective place when lined up with adjectives that best describe the company. We saw where our company was due to it not existing yet, but once we designed it, where we wanted it to stand.

From there, Eric and I came up with some how-might-we’s to help establish the user’s needs to ideate features for our editorial. We stuck with the central three, which read:

We then began ideating what features our website must, should, could, and won't have using the Moscow Method. 

The one highlighted in orange was, what we decided, would be our main feature. By creating a community outreach/volunteer opportunity page, we stood out from our competitors.

With the Moscow Method done, stating the must-haves of our editorial, we created our MVP, Minimal Viable Product.

The next few steps were the basic setup of the website, starting with the Site Map and the User Flow. Both were very self-explanatory; they helped a lot when it came to the organization for the sketching.

Once we had the basic anatomy of the editorial, we began sketching. We both sketched separately and then came together to show each other our work. That way, we had two different perspectives on what each page should look like and then talked about it and concluded what works best for this editorial.

Mid-Fidelity wireframing was the next step for our duo. Working with Eric was extremely easy, we would bounce ideas off each other. We didn’t take too long because it was straightforward what we needed to correct from the sketches. We mainly struggled on the Navigation bar.

We tested on 4 people and received some amazing feedback:

  • “Everything should have a bit more space.

  • “Where can I search for a topic?”

  • “Is there supposed to be more articles in community?”

Based on the insights, We made some changes that will be seen in mockup.

We began with our mood board. We chose those words as our brand attributes because they are a big representation of what the editorial is trying to achieve and they are also things the user persona, Elaine, is looking for.

 

On that note, we began with the UI. Honestly, both Eric and I had no previous knowledge on anything regarding color, mood boards, brand attributes, or any UI, to be brief. And we struggled in the first few days. The color palette was straightforward once we figured out how to work the mood board, but if we are going to talk about struggle… 4 days on typography alone. Once we decided we liked the typography, we would implement it and go back to change it. With the colors, everything worked out perfectly except the white. We originally had a much more cream color that, once we implemented it, we just didn’t like how it matched. Finally, we came up with this Style Tile.

 
 
 

The process of the logo went through various changes. We changed the first one because we simply didn’t like it. Eric and I changed the second logo because we wanted it to because it was way too simple, we also wanted it to look like a house, but when we showed it to a few people, they didn’t see the house or understand the connection house to neighborhood. For the 3rd logo, we loved the detail of the bench and the flowers, so we wanted to incorporate it into the website a little more. From there, our final logo!

The Friendly Neighbor aims to give users news and information regarding mental and physical health, the environment, and their community. It will also allow for users to look at volunteering opportunities in their neighborhood and local areas, that way the users can be more involved in their communities.

This project was a huge stepping stone for us two. I learned a lot more about the combination of colors and fonts than I had before. It was a really fun project and it was really nice and easy working with Eric. Of course I will be coming back