ROLE: UX/UI DESIGNER

DURATION: 6 WEEKS

CLIENT: Department of Near & Middle Eastern Civilizations at the University of Toronto

PROCESS: COMPETITIVE ANALYSIS, CONTENT AUDIT & SITEMAP, USER SURVEY & PROTOTYPE

TOOLS: FIGMA, GOOGLE JAMBOARD, PHOTOSHOP, SURVEY MONKEY



NMC-CESI WEBSITE REDESIGN



For this project, I took on the challenge of redesigning and relaunching the website for a non-profit initiative. The organization recently expanded their support to Dari speaking newcomers and decided it was time to update their their blog style website to a more professional website. The organization operates out of the Department of Near & Middle Eastern Civilizations at the University of Toronto so the goal was to compliment the department's existing website.


This organization is a small non-profit and did not have the resources to hire a developer, so its website uses a free template from WordPress. It was decided that CESI's website would move to WIX where donations could be accepted in the future.


This case study will be focusing on UX research and on reorganizing the visual hierarchy, navigation, and content on the website’s homepage.



Background:



NMC-CESI is a student-led, non-profit, educational and humanitarian initiative created by students and faculty at the Department of Near & Middle Eastern Civilizations at the University of Toronto. Since April 2016, this initiative has supported Arabic speaking newcomers who need help with language acquisition, are interested in continuing their studies, and are looking for support in their settlement process



The Problem:



First, I identified the problems with the current website. Here are some of the leading questions and focus areas:

  1. Is it clear what this organization does? (Are higher-level priorities such as donating, volunteering, etc. clear?
  2. Is the hero image a good representation of the organization? Do the colors match the organization’s goals?) Can users find what they need easily? (Are there different users?)
  3. Is the navigation easy to use and intuitive?


To answer these questions, I completed the following steps:

  1. Competitive Analysis
  2. Website Audit & Sitemap
  3. User Surveys
  4. Prototype & UI Design


Design Research



COMPETITIVE ANALYSIS



Before starting the redesign, I conducted a competitive analysis and compared the websites of other newcomers' support-related nonprofits to CESI’s current website.


CESI’s current website:





Snapshots of other non-profit and newcomer support websites:





Immediately, I noticed a couple of evident differences:


1. Donate Button — all of the other non-profit websites have a bright donate button while CESI's did not.


2. Clear Visual Hierarchy — all of the other non-profit websites have a clear visual hierarchy that shows the action that the organization wants the user to take on their site. For example, this could be either to make a donation, to volunteer, or to call and inquire about a service. Meanwhile, there is no evident hierarchy on CESI’s website.


Problem: This makes it unclear what action is most important for this organization and may not effectively target the right users.


3. Clear Hero Image — all of the other non-profit websites use one large hero image on their homepage. CESI uses a great picture taken at one of their first workshops however, the image was taken on a phone and not high quality.



WEBSITE AUDIT & SITEMAP





I then conducted a sitemap of the entire website to visualize the information architecture of the site and to get an idea of the amount of content and how the content is grouped. The red boxes below are redundant links/pages or ones that don’t work.



Next, I conducted a full website audit. To ensure that I was creating a holistic experience for users across the website, I examined technical aspects, content, user experience (UX) and SEO.


Technical aspects:

- Examine Indexing Problems

- Confirm the Security Website

- Look for Broken Links and Images


Content:

- Relevance and Quality

- Readability

- Language


User Experience:

- Design, heuristic evaluation

- Check the Responsiveness of the Website


SEO:

- Track the Keywords

- Check Backlinks and Metadata



Some notable recommendations I would like to share after conducting a full website audit are:


- the website could benefit from language options for their international viewers such as Arabic or Chinese

- after Facebook, most traffic comes from nmc.utoronto.ca. Re-designing the current website UI to reflect the main department page will offer a seamless user experience

- make pdf resources for the community more accessible for download


Stats and Insights from Wordpress:





Next, I moved on to the content displayed on the homepage. I wanted to see how well the website represented the values and goals of the non-profit. I tested the website’s hero image, and other UI elements using user surveys that I created with SurveyMonkey.



SURVEYS





JAMBOARD



Jamboard is a digital whiteboard that lets you collaborate in real time. What I like about using Jamboard is that participants can participate anonomously. Anonymous feedback allows users to express views honestly, without any fear, or worry that they are hurting their colleagues. Moreover, when people know that in a review process their anonymity is assured, they are more inclined to participate in the process.





UI Design



This organization currently uses the WordPress template Twenty Seventeen and does not have a developer on their team. Creating a whole new template for the website redesign is not useful for the organization if they do not have the expertise and resources to apply it. Therefore, my redesign will utilize the features, characteristics, typography, etc. that are built-in with the WIX template so that the team will not need to exert a significant amount of additional time and energy into learning how to update/edit the website.


I created the prototype on Figma and did two rounds of user testing. If you're interested in hearing about this process, please reach out :)



Style Guide



COLOUR: All colours used in the redesign were taken from the original logo created by Omran Narmo.


LOGO: The logo was updated with Montserrat font and the inclusion of the Department of Near & Middle Eastern Civilizations at the University of Toronto.


BUTTONS: There were no existing button styles so I had fun creating my own using the logo colours.





PROTOTYPE



After analyzing all my UX research, I created a prototype of the main page while keeping in mind the limitations of the Wix template.


Issues Addressed:

  1. Redesign the main navigation bar
  2. Establish a clear hierarchy for CTA (call-to-action) buttons
  3. Improve the content on the landing page
  4. Overall colour scheme of the website


navigation bar



Some of the notable changes I made were:


- Reordered the main categories in the navigation bar so that the categories are ordered from most important to least important (left to right)


- Removed “Home” from the navigation bar (clicking on the logo also takes you to the homepage)





This was the original navigation bar:





The updated navigation bar:





Next steps



The next step would be to conduct another card sort to test the new navigation. Following that, I would conduct an interview with the organization to learn who the main targets of their website are — volunteers, new clients, or donations. With the permission of the organization, I would run analytics on the website to see which pages are not being visited as much as others and to figure out what the reason is behind the page’s poor performance. I would also like to perform eye-tracking tests and usability testing on both new volunteers/clients and previous users of this site to gain insights into where users are looking on each page.



The original navigation got simplified with the addition of drop down sub categories.

Approved Login community members can login with their email or Facebook to view the calendar of events. This is to keep specific details private from the public.



Key take-aways from this project:



_Keep creating clean and simple UI. Clearness and lightness keep on dominating the trend trail paved by UNHR, CCR, and alike.


_Enjoyed the challenge of using original logo as inspiration for UI, graphics, and wireframe components.



Visit the redesigned NMC-CESI website here.



prototype:



Interested in learning the details of my ux process or want to collaborate on something fun? Feel free to reach out.