Context
Overview
Working on ETM's website was one of the most rewarding experiences, as I was able to contribute to a non-profit organization and create a better experience for their users. I collaborated closely with the organization to define, develop, and deliver visual design. The task was to redesign ETM's website to create a more seamless browsing experience through web and mobile.
My Role
As their UI/UX designer, I was responsible for designing the UI, UX, rendering layouts, and selecting photography. I worked closely with the non-profit's coordinator to identify the pain points, organize their site map, identify the user target, and overall improving the site's user flow. I created frameworks and prototypes to share the vision, design principles, and content strategy. This helped to conceptualize ideas, gain alignment, and drive decision making.
Timeline
Over the 3 month timeline, I had multiple reviews & feedback from the organization through their coordinator. Due to these months being their busy season, receiving feedback from the members of the organization took time which led to multiple delays on the timeline.
Project Brief
The organization noticed their users having a difficult time navigating through their website. Users relied heavily on the support team for assistance to get the information they needed.
ETM hopes with its new revamped website that it will help the users get involve with the organization seamlessly and gain more users.
ETM hopes with its new revamped website that it will help the users get involve with the organization seamlessly and gain more users.
The challenge: Balancing information with a seamless user experience
Information in the revamped website must be easy to find and each page must contain enough information without becoming too overwhelming. The user flow must be seamless. The website must use the current style guide and responsive.
Solution
The organization and I have created a new site map. We have decided to organize the website with 4 key experiences in mind to build rapport with current and new users:
• Leading users to the resources the organization have
• Easily accessible resources to empower and educate
• Establishing trust and confidence
• Getting involved by volunteering
• Leading users to the resources the organization have
• Easily accessible resources to empower and educate
• Establishing trust and confidence
• Getting involved by volunteering
Design Process
I conducted some stakeholder interviews to gain insight on business requirements. Some things I wanted to gain insight on was: what is ETM and what is their website's main goal, who are their target users, any technical constraints, any existing style guides, etc. I discussed further with the organization's coordinator to gain insight on what paint points our users were experiencing and what were their typical feedback.
To truly pinpoint the website's issues, I started with some usability testing sessions with ETM's current website. I conducted a moderated test with 3 users separately via zoom while they shared their screen completing 3 tasks. I compared their pain points, how long it took, and any suggestions they may have. From the testing, I now know that the website:
Poor layout
Users had difficulty finding information and reading text.
No user target
An information overload made the users feel overwhelmed and not want to use the site.
With Miro, I started mapping out the current user journey map to visualize potential scenarios the user might encounter while using the website. I kept in mind the insights from the usability testing while going through the process of applying to a program/service and the process of getting involved. I can also find opportunities based on user pain points that are useful for design improvements.
Then I filtered down the results into four main problems faced by our users. With that in mind, I did some competitor analysis. I looked into similar non-profits with similar mission/user target, such as Feed Nova Scotia, Anova future, CFSarasota. I compared their features, layout, and what made them successful.
Afterwards, I created a list of actions that will be added to the redesign such as add description for each of the services at the service section, setting a primary and secondary user, etc.
From my research, I knew that the website had a big layout problem including the site map. I reorganized the site map, and after multiple iterations and feedback, eventually we had the finalized design.
Testing & Iteration
After completing and getting the sketches and mid-fi approved, I wanted to conduct a rapid usability test which consisted of 5-second test, first-click, and navigation test via zoom. This helped us understand if this solved the identified problems, if it was confusing or not, and any areas of improvement. From the usability tests, I refined our screens and added notes for the organization for hand off.
The prototype was created using Figma. Most of the components are clickable, but a few are not because it leads to an external file or page. There are limitations in prototyping in Figma including keeping a window open as the arrow leaves the item while hovering and so here are the keys to open the dropdown navigation groups: program & services (L-arrow), get involved (up arrow), about (R-arrow). You can click outside of the frame to close the dropdown navigation groups.
