Case Study: Website Redesign
My role: Product Manager, UX Designer, UX Researcher
Tools Used: Figma, Miro, InVision, Photoshop
Impact:
This will impact the organization by making it easier for composers to access resources and for supporters to donate to organization.
Problem:
When people visit the website for Line Upon Line they are confused by what the organization does and not sure that they are a non profit. Composers aren't accessing resources and potential supporters aren't donating.
Solution:
We reorganized the information to provide a natural hierarchy, enhanced the copy to provide more context and solved accessibility issues.
Developing Personas: Composers & Supporters - Two paths
​When we first reviewed the site it was unclear to our team what the group does. The organization's mission is to champion living composers and pursue the musically unfamiliar.
We understood that they are a non profit arts organization that is a performance group. We were not sure how living composers are involved in the organization.
​
We were able to interview three stakeholders - one of the founding members of the group, an advisory board member and a member of the board of the directors. After these interviews we gained insight that the group is in the process of evolving from primarily a performance group to providing resources for composers.
It became clear that the site has two distinct groups of people in mind:
-
Composers looking for resources
-
Supporters looking to make a donation
​
We developed a persona for composers and a persona for supporters. We relied on these personas throughout the design process.
Defining our Problem - Analyzing Test Results
Initial testing provided overwhelmingly that people love the aesthetic - they made comments that they like look & feel of the site throughout the usability test.
It is not obvious what the group does or that they are a non profit.
​
We grouped similar test results together in an "affinity diagram" to gain these insights.
How might we clearly communicate LuL's mission while also enabling composers and supporters to easily find information about events, programs, and ways to get involved on LuL's website?
Ideating - Determining Features
To determine the best features we could possibly include in the site, our team performed the I Like, I Wish, What If exercise. We found a multitude of ideas that were viable, and voting took some time. Some of those that were ultimately selected are highlighted below.
Information Architecture - Navigation
Before starting on a wireframe or paper prototype we took a closer look at the navigation by conducting a card sort within our team to sort the pages in the orgs primary & secondary navigation.
This structure informed a navigation that streamlined paths for both composers and supporters.
Information Architecture - Page content
Page content is another area that we focussed our design efforts.
​
We referred to our heuristic evaluation calling out details of user centered design throughout the site.
Lo-Fi Prototype
With all of this in mind - we made and tested a lo-fi prototype with navigation from our card sort & redesigned page content.
​
-
Providing hierarchy
-
Making copy accessible
-
Reworking copy - chunking groups of information
We conducted seven usability tests and gained additional insights:
Telling Their Story with Design - Style Tile
Eager to incorporate the insights into the next iteration of our prototype - we paused and worked together to create a style.
We kept the original color pallet that did so well in testing - we inherited the accessibility challenge of yellow copy not being accessible on the white background - and found ways to use the yellow color without using it directly on the white background.
This is one of the items that we showed to a key stakeholder. Once we got their blessing on it - we got to work on the mid-fi prototype.
Information Architecture - Page Content Redesign
In our mid-fi prototype - information is chunked so that it is easily read and understood.
​
There are clear navigation paths for composers and for supporters.
​
​
Telling Their Story with Design - Homepage
Insight from one of the stakeholders: the homepage needs to tell more of a story of who they are.
​
The clean look with the black and white photo communicates part of who they are - it doesn't tell their whole story, though.
The group is playful, game to try anything and often pushes boundaries.
​
We added graphics to the hero image & gifs to the homepage to bring in this part of the groups' personality.
Bringing it all Together - Mid fi to Hi fi
Mid fi test results were overwhelmingly positive - users easily understood what the group does & navigate the user paths. Still there were updates from the test results:
-
Added breadcrumbs
-
Included a direct link to donate from the support page
​
We then concentrated on consistency in elements when moving to hi fi. We incorporated a uniform tone and size of images and replaced inconsistent graphics with icons.​
.png)
.png)
Lessons Learned
​
Testing two paths did not leave much room for testing other parts of the site. We relied some on AB testing - a good alternative.
​
I learned that location & hierarchy of information can make or break a site even if the navigation has a clear path. Incorporating hierarchy of page content and chunking information in a way that makes sense to people navigating the site makes a difference in someone understanding the information or passing over it. ​
​
Stakeholders were very generous with their time and open with their insightful answers this made communication with stakeholders was easy to navigate.
​
It was a challenge for me to communicate findings to group of designers in a practical way. For the most part insights were relayed through notes & brief summaries of the meetings. Some insights were lost - to manage this in the future we could brainstorm as a team to find a better way to communicate key findings.
