Sarah Mansour

Hi! I’m Sarah. I want to create a better experience on the web. I’ve had the chance to take different roles through my experience at Capilano, from information architect, to designer, to project manager. I am interested in information architecture and usability, especially as it relates to different platforms and devices.

Every project has a story but the drive behind a website or interactive project is the users.

Here are some examples of my work:

Food District Responsive Design

For this project, I had to design a website that adapts to 4 different screen widths: 320, 768, 1024 and 1600. I remained the functionality of a recipes website inspired by my friend who would put her laptop on the dining room table to look at recipe websites. In such a situation, using a phone might be more practical because it fits in the pocket and she wouldn’t have rush back and forth from the kitchen to the table. For all the sizes, I focused on creating a clean design, emphasizing easy navigation. At 320px, the content is the most prominent, as a user will not want to keep touching the phone to resize or zoom in while she is cooking. With one touch, a user can switch between ingredients and instructions, making the content easier to access.

Capilano Courier IA and Redesign

The Capilano Courier is Capilano University’s student run newspaper, published weekly and funded through student fees. It is the official student voice of the university, however the website has the look and feel of a blog. The design is outdated and information layout overloaded and confusing.

As an occasional contributor to the writing, I approached the editors about issues surrounding the site and I was given full reign to restructure and redesign the website. I took a step-by-step process to uncover the issues and propose a cleaner, more logical way to lay out information and showcase the content.

User testing

I created a test on some of the pages with Usabilla, a user-testing web service, to uncover some of the main problems of the current site and get some insight from Capilano University students. Through their feedback, I was able to make suggestions for the updated design of the website. Most visitor’s initial reactions to the website is that it is “ugly” and difficult to navigate.

Flow Chart & Site Map

Following a discussion with the editors, I had a better idea of the direction to take with the redesign. I also looked at different university news websites such as the Ubyssey and the Runner to get some ideas.
By creating a flowchart, I got into the big picture of the website; it is not only a digital archive of stories but also a service to the community at Capilano University to be updated with news and events. Features such as social media and the calendar needed to be more relevant.

Wireframes

With all the ideas I had, I started sketching what the updated site would look like. I focused on creating a good hierarchy of information to help readers navigate through sections with ease. The Capilano Courier’s unique offering is in long article features, which I featured in a carousel. I also accommodated for expanded social media features and possible advertising space.