Personas

Using data collected throughout the project, I put together a set of 4 illustrated personas to represent some of our key users’ needs, goals, and state of mind.

According to the book Design for Real Life it is important to take into account the ‘stress case’ (or worst case scenario) that users may encounter. For our stress case, we created Ibrahim, coming from Morocco with limited language skills he is trying to adjust to the new lifestyle and be part of the community.

These  personas followed us on every Zoom or in person meeting. Our personas were very central to this project and were an important part of staying focused on our users’ needs. 

Test, Feedback, Reflect, Repeat

Since the deadline and the budget were very tight, we collaborated with journalists, the founder of the newspaper and users – our own relatives without sharing any insights. We designed part of the navigation and asked them to complete tasks. It was mind-blowing how many things we did right and wrong.

For example, 6 out of 10 readers preferred Recent News section at the bottom of the article where they would find other topics to continue reading rather than at the top right side of the article. We eventually decided to put it in both places.

Another helpful insight was the navigation bar. When a user clicks to read an article, the navigation bar changes to a hamburger icon. Although, it was familiar for a designer and developer to recognize its function, 9/10 users did not know what it was about. So, we wrote the name menu next to it.

Sketching, prototyping, design system planning

All the research and testing took us half of the time of the project. Eventhough we were in a tight deadline, by doing all these steps we trusted the process and felt more confident.

With one and half week left, I was in charge to design the interface of each page but specifically details such as what would happen if a user were to click the + icons in the community news page – how the page would look like. Or also, what size the ads needed to be on in order to maximize the white space. This way when I collaborated with the developer he understood what different design elements meant.

I designed the website in Sketch and then send the developer the files in a shared group Sketch folder.

Key elements I kept in mind while doing the design of this website:

• Consistency matters – followed branding id guidelines throughout the website.
• Easy to navigate designs – I read the book Don’t Make Me Think during this project and was struck by the importance of simple explanatory designs – naming the navigation bar menu made a big difference in the readers experience.
• Hirerachy is IMPORTANT! -(upper case cause thats how I had written it on my notes.) I sketched out and designed the homepage putting pieces together like a puzzle. The main story needed a big space, then there were secondary articles on the left upper corner where the eye of the reader goes secondly after seeing the main story.
• Positioned the ads to the right side of the page consistenly throughout the site user is used to finding them in one place rather than popping up in different directions while reading.
• Designed responsive designs – how would it look in phone screens and iPads. A lot of the readers preferred reading on different platforms.
• As accessible as possible – helped the developer turn the site into an accessible site for all readers by Include alt-text for content, use proper headings and HTML tags, name/describe the images as best as we could etc.

Published 

We published the website in April of 2021 within 4 weeks of the deadline. After publishing it, we encouraged everyone to give us all the feedback they could and we got back to the site and made changes accordingly. The community was very happy and grateful. Getting such wonderful feedback, my team and I felt grateful to have made this possible!