SALLY LIU - Portfolio
Our Music Together
Non-Profit Website Redesign
Our Music Together is a non-profit organization based in Toronto Canada that is in need of a redesign for its official website. They currently operate their website on WordPress with a free subscription which was developed very early on by volunteers at the organization. Their current website does not serve the needs of attracting new volunteers, performers, and donors. The new website is currently launched at www.ourmusictogether.com.
Project Details:
Development:
3 Months (January - March 2023)
Project Team:
2 UX Researchers, 1 Content Designer, 1 UX - Visual Designer, 1 Copywriter
Tool Used:
Figma, Photoshop, Illustrator, Miro, Canva, Google Drive
My Project Role:
UX and Visual Designer
I was in charge of the UX and Visual designs of the website. This includes (but is not limited to) all wireframes and prototypes, graphic designs, layouts, buttons, etc.
Project Manager
I maintained communication between the client & and the team, ensured deadlines, and led meetings to set deliverables weekly.
1.1 Initial Research
We conducted initial research to understand the better organization. In order to prepare for the initial meeting with the client. We needed to understand the demographic and psychographic out make of the user of the website, the general user journey, and the organization as a whole. In this stage, we researched other similar music NPO websites such as the Chinese Musicians Association, Greater Boston Chinese Cultural Association, Chinese Cultural Centre of Greater Toronto, Canadian Multicultural Council, Asian Heritage Foundation and many more.
The main takeaway from our initial research:
-
Focus on visual data, such as pictures, videos
-
Clear how people can get involved with the non-profit organization
-
Display of organization's events and upcoming events
1.2 Client Interview
As a team, we came up with questions we wanted to ask our clients, to understand their needs better and wants. I took these questions and met over zoom with the client individually.
The main takeaway from the client interview
-
The theme of the website: the foundations of this organization are traditional Chinese cultural musical instruments
-
Integration with all kinds of music other cultures and other music, and art forms
-
The organization currently has musicians with Western and eastern instruments. (East Meet west collaboration!)
-
The current Logo is a good indication of design: the moon is a symbol in Asian culture meaning unity and completeness
-
Need of building a website that can attract new volunteers and expand the performance team
1.3 Heuristics Study
We conducted an internal heuristics review on the original website in order to evaluate the previous site based on UX standards. We conducted three different evaluations: Situation Awareness, Supporting Mental Model and Supporting User Goal. Based on different UX principles a score was given with additional explanation and supplementing screenshots indicating why the score was given.
Situation Awareness
This evaluation is to determine the cognitive ease of a user to naturally understand where to find things and how to do site tasks.
1.4 Problems Identified
Through our findings from research, client interview, and heuristics study we've concluded with the following problems we as a team want to keep in mind when developing the new website.
Menu and Information organization
The current menu, heading, and content are disorganized. There are multiple menu titles that are confusing, and pages that don't display relevant content. The menu does not indicate where the user is as the user go from page to page. There is lack of flow in the content of each page.
Lack of Visual Storytelling
There is a clear lack of visual content on the site. There is a need to have a clear design system. In particular, consistency in fonts colour palette which should visually tell the story of the organization. ​
CTA?
There is a lack of CTA on the site overall as well as specifically the homepage. There is no clear users journey for users. Some pages have buttons that link to nowhere.
Mobile UI
Currently, the mobile UI information for the website is formatted in a way that the user is unable to view all content. Theres a need to create a mobile-friendly UI layout that works for mobile.
2.1 User Persona
2.2 Card Sorting
We ran an online card sorting activity using Optimal Workshop - Open Card Sort: with 12 cards consisting of the main page headings, and page subheadings. One of the problems we were looking to tackle was the menu and information reorganization. We used the open card sort method because we wanted to understand if the current information structure made sense to group as the original menu, and page heading. The card sorting activity was completed by 30 users.
Card Sorting Note-worthy Results
-
80% of users put together "About Us", and "Board of Directors" based on the similarity matrix
-
Most users Identified the Category group as "About" and "Abour our Organization"​
-
-
66% of users put cards "Performers" and "Feature Performers" together
-
Events, Past Events, and Upcoming Events had a 100% agreement among all users
-
The confusion lies with the cards:
-
"Music Consultants" Many users completing the card sorting placed it on its own, and are confused about where it should go
-
"Our Team" some users were confused and thought it was the Organization's team, instead of the performers
-
"Feature" uncertain what this feature stands for, could be feature events, or performances?
-
2.3 Menu Layout
Based on the results from the card sorting activity, we've established a new menu with an information structure that made sense to the users. We changed the design of the menu to have a clearer indication of the separation of pages. As well, we changed confusing menu wording to more easily understood terms by the user.
Current OMT Menu
Updated OMT Menu
Changes
-
About Us -> About
-
Our Team -> Performers
-
Feature to be added in the Performer Page under the sub-heading "Feature Performers"
3.1 Information Structure
Based on results from our heuristic studies, and card sorting activity with consideration of different personas needs & pain points. I've established an information structure which shows the details of each page.
3.2 Design System
Through research, I found that there is no consistent design system for the previous site. There were different colour fonts and size combinations used throughout. I've established a formal colour, and font guide in order to ensure future consistency of the website design system.
4.1 Paper Prototype
Based on the information structure that was created, I drafted a low-fidelity paper prototype
4.2 High-Fidelity Prototype
Based on the paper's low-fidelity prototype, I created in Figma a clickable high-fidelity prototype. Here was where our team faced a challenge. We underestimated the time to conduct usability testing. As we wanted the user to have a holistic view of the website, before doing our usability testing, however, our time allocated to run over 20 tests was not enough. Our UX researchers wanted to run moderated usability testing, which takes on average an hour per participant. So I decided to make limited interactions, by eliminating all hover effects & animations. Instead focused my effort on linking interactions with buttons, and menus.
Make sure you use the toggle button by clicking and dragging left and right to show the before and after!
4.3 Design Changes
.png)
Homepage Banner
-
Banner Image: choose an image that reflects an Asian traditional painting, which is reflective of the organization's core artistic theme.
-
Copy: Impactful headlines font sizes & copy that draw the users to want to find out what the organization is about
​
Homepage Organization Mission Statement & Goal
-
Image: Collage showcasing the organization's performers to create the "togetherness" feel
-
Logo: added the organization's logo to be more purposeful to show users the organization's mission statement & goal
​
Homepage Events Section
-
Past events: added an overview of the past events, so when the organization doesn't have an upcoming event scheduled users are not left with an outdated message
-
Event images: images give the audience a realistic view of the past events that the organization hosted
Homepage Sponsorship Section
-
CTA: sponsorship is clear with button representation instead of a hyperlink
About Page
-
About the organization section: added images, which give the user visual cues that allow users to give a visually representation and experience the organization
About Page (New Sections)
-
Board of Directors: previously on the "Our Team" page, based card sorting results did not make sense to users. It was associated by users with "About the Organization".
-
Music Consultants: previously on the "Our Team" page, based on card sorting results, the music consultant created confusion about where it belonged. The music consultant here is also a partner of the organization, which aids the organization's performers in improving specific music techniques. Therefore, would make sense to be placed on the About page.
Performer Page
-
Performer Description: performers are also the volunteers of the organization, going with the user persona of prospective performers they would want to learn about what a performer means to the organization
-
Current Performer Display: it was previously displayed in threes and continued on which left a lot of empty space on the page. With the new design, it would be a catalogue which continuously moved in one direction
-
Current Performer Details: it used to be displayed right under the photo, but was unnecessarily created empty space, as well there was no clear order of performers. We want to display the performer's detail through a hover effect, where if you hover on the image then the performer's detail would show up, (name, instrument). As well, the performers are re-ordered to be alphabetized based on their names
Performer Page (New Section)
-
Feature Performer: the feature performer section was on its own page, which did not make sense for the users. Therefore, this page was moved to the performer page
-
Feature Performer Display: it was previously displayed in a format that would let the user feel disconnected through the content display, to display it in one section per performer with the option to switch between other feature performers gave the display more organized content design
Events Page (New Section)
-
Upcoming Events: added a section which is on the top of the Events Page, that would allow the user to find out about the upcoming event. When there is no upcoming event scheduled, we created a CTA which would allow the audience to subscribe to their email marketing. This would allow the audience to stay connected, and not miss out when the next event is announced
Support Page
-
Support Our Organization: added fundraising campaign CTA, and re-arranged content based on heuristics study
5.1 Usability Testing
With the usability testing script that our UX researchers created, we distributed the task to run in-person and online usability tests. A total of 25 users participated in the usability testing. Full results were shared with the client. The usability testing was conducted on our high-fidelity prototype, in order to test our changes to the website. Our tests included three sections:
Usability Testing Notes Sample
Interviewer - Sally Liu
Interviewee - Current performance member of OMT
​
Note: full results is NDA, I personally got permission to post this participant's interview notes as a sample of usability testing notes.
Test 1: Menu Content and Navigation
Criteria to track for goal: Time, accuracy, success rate, the satisfaction of menu and navigation system.
-
Discoverability of the menu
-
Does the content of each page make sense for the user
-
Are users able to accurately make sense of all the menu titles
-
Are the users using other ways to navigate between pages
Test 2: Homepage
Criteria to track for goal: Time, accuracy, success rate, and satisfaction of the homepage.
-
Find out what would the user change in terms of how content (visual and written) is displayed
-
Visibility of texts overlay through the hover effect
-
Images used match the content demonstrated
Test 3: Performer Page
Criteria to track for goal: Time, accuracy, success rate, and the satisfaction of performer page.
-
Homepage CTA to performer page effectiveness
-
Performer information visibility
-
Effect display of performer details
-
Feature Performer Section button effectiveness
Test 4: Homepage
Criteria to track for goal: Time, accuracy, success rate, and satisfaction with the events page.
-
Homepage CTA to events page effectiveness
-
Past event display
-
Past events button
Usability Test Participants
We focused our efforts on running usability testing with musicians and artists locally which is the primary user group that we wanted to capture. Along with a smaller sample size than the other two user groups. This allowed us to see if our new website is optimized for the audience groups intended. The overall audience approval was above 9 rating for the overall website.
15
7
2
5.2 Mobile UI Optimization
_gif.gif)
5.3 Next Steps
The project has been handed off to the organization to be further developed. As I am involved with the organization directly, I will become the website lead to launch the website prior to June 2023. This is in time for the recruitment of new volunteers and performers for the upcoming in-person concert. I will be working on this project alongside the website team at OMT, taking results from the usability testing to perform final fixes, and taking the prototypes made to transfer over to the website hosting platform.
