Our company had created a new design system and redesigned its website several years ago, however some of our associated websites never received the same treatment. This left a stark contrast between the fresh new site using a modern design system, and the older sites that were still using older color palettes, icons, dated photography and colored backgrounds.
The team that oversaw the Foundation for the company finally received the go ahead to create a new website and I was assigned to the design team to help make this happen. The product owner claimed to just want the site to look "fresh", but after an analysis of the site, we knew it would be a more complicated project than that and set to work.
The first thing we did was conduct an UX audit of the existing site and mapped out the information architecture. Quickly generating a sitemap from this allowed us to get our bearings and get a better idea of what we were working with. After getting the lay of the land, we conducted several stakeholder interviews with the product owner and various other team members to get a clear idea of their vision and why they thought a redesign was in order (it certainly was, but we wanted their take on it).
After completing the stakeholder interviews, we reviewed our notes and highlighted several key areas the stakeholders thought the old site was under-performing. This was crucial as their initial ask was simply to “refresh the site” and we could now see that were some cracks in the foundation that a fresh coat of paint could not repair.
With a longer list of concerns in hand, we then asked for a list of previous recipients that we could reach out to and see what our actual users thought of the website experience. The stakeholders provided us a list of roughly 30 recipients, from which we randomly selected 5 to conduct contextual interviews with. By reaching out to previous recipients we were looking to see what kind of information they are typically after, what is most vital to them, and any pain points they have had in their experiences in the past. During this time we also conducted competitive analysis to gain better insights into expectations and inspiration for new ideas.
Aiming to take a holistic approach, we also conducted contextual interviews with leaders of organizations that have not received funds from our foundation. This helped us to get a more unbiased point of view and help supplement the other forms of data we had gathered. To recruit these individuals, we relied on the user-pools provided by usertesting.com and applied applicable screeners to our tests to ensure our interviewees fit the bill.
Our research from the UX audit and interviews revealed a few key areas we could improve just beyond the aesthetics, namely;
· Confusion on the application process and dates
· Applicants not realizing grants are for Nebraska/Omaha metro area organizations only
· Having to rely on multiple sections of the site to complete tasks
· Applicants unexpectedly heavily rely on grant award announcements to gauge what they can apply for
These issues and others were then brought up to the stakeholders and we announced our plans for reshaping the sites information architecture, wireframing, and usability testing. We shared the results in a form we like to call the "summary card" or "baseball card". On the front it features what when who and highlights from the research, and on the back summarizes what we learned and our next steps.
Armed with this data, we moved forward with designing a site that favored information that organizations are in need of, and trimming the “fat” that was long drawn out sections of corporate speak that was viewed as fluff. This helped provide not only more clear instructions to users, but provide more clarity to the foundations overall goal. Naturally, applying the newer design system standards to the site overall was also a large part of the project. We removed antiquated icons like the "print this page" and "email this page" button and really spruced up the look. Our hopes were this would all lead to a much more stream-lined and positive user experience. We were also keeping in mind that a more modern looking website helps to establish trust and confidence in users, and this is especially important when financial interactions are on the line as they would be for this website.
With the wireframes completed in Sketch, we then set to work exporting this into Axure and creating an interactive prototype. We like to use interactive prototypes as they create a greater suspension of disbelief and allow the user to get more involved with the prototype in a natural way, which produces more realistic results.
After completing the prototype, we then moved to usability testing to ensure our information architecture and design layout made sense to these sort of users. We again relied on usertesting.com to recruit testers. With copy in hand, we were also able to test the user’s understanding of the process to ensure that was clear too. The first round of usability testing reveled some areas for improvement. After we made some minor revisions, we tested the site a second time to ensure our bases were covered.
After a couple rounds of user testing we brought the design back to the product owner and they were ecstatic. Our visual designer refined the design and submitted it in pdf form and we sent the copy off to compliance. The dev's followed our specifications laid out within the sketch file, and we were set!
In a span of about 3 months we went from project intake through pushing the site live. After launching, the site received rave reviews, but more importantly the foundation received more applications than any year previously. It was noted it looked "more official" and "more legitimate" by those that were utilizing the new site and communicating with the foundation team. The live site has only received minor updates (such as a Logo update) and can be viewed here.
Site Mapping
Stakeholder Interviews
Contextual Interviews
Competitive Analysis
Analytics
Usertesting.com
Google Analytics
Abstract
Sketch
Invision
Axure RP
Design System
Tools:
Wireframing
Prototyping
Design
Usability Testing
Skills:
Foundation Site Redesign
The Problem
The Process
