Honu Website Redesign
Role: UX researcher and designer
Timeline: Aug - Dec 2017
Skills & Tools: Card sorting, cognitive walkthrough, wire framing / prototyping, HTML/CSS
The company: Honu Fundraising is a small consultancy that offers various services to non-profits, including grant writing and fundraising event coordination.
Synopsis: Honu reached out to do a website refresh and some content updates. This was a side-project of mine because I was interested in developing my UX skills. Because of this goal, I was more thorough in my methods than was probably needed for the scale of the project! However, I was glad to have the time to practice each step of the design cycle, from research to launch! The highlights included doing a card sort to test a new information architecture, based on competitive analysis research. With mockups in hand, I did a couple guerrilla usability tests to assess the effectiveness of the copy and visual design in communicating Honu’s value proposition. This feedback resulted in a final website that met my client’s needs, while providing the information users wanted, front and center.
Identifying client goals
My client’s goals were:
More professional looking website
Rebrand of her services
Update the website copy
Easily edit the content herself.
Understanding the target audience
Based on my conversations with my client and competitive analysis, I identified one persona who will likely be visiting the site. The job titles included executive directors, development staff, board members, and human resources. My persona will be looking for Honu’s track record, experience, and services to gauge credibility.
Card sorting to test info architecture
I did a quick card sort to validate existing information architecture and identify potential missing info. The results showed that most items fit well into categories, but pricing and Honu’s metrics didn’t strongly signal a specific category.
The confusion was primarily caused by the labels not being specific enough. For example, "research" should have been "prospect research", or "grant research". Similarly, "track record #s" would have been more effective if translated into an example like "Honu raised $X last year".
I ultimately decided to not re-test for two reasons: 1. the website needed to launch before a conference date, so we had a timeline to stick to, and 2. my client actually decided to eliminate the pricing, process, track record #s as concepts from the redesign, which also happened to be some of the most confusing cards.
[Guerilla] Usability testing the visual design
After working out the information architecture, I jumped into testing a high fidelity mockup of the site with 3 participants. Although I sketched out some wireframes, just to organize my thoughts, I didn’t test them because I felt confident enough in the validated architecture. Since this is my first experience with visual design, I was more interested in testing how well the visual design communicated Honu’s value proposition.
The two main takeaways were:
The website didn't signal quickly enough what the company offered. Specifically given that the company name doesn't inherently explain its purpose and does not contain the founder's name, this was causing a lot of confusion that took away from the company's perceived credibility.
Elements of the visual design were not enabling the user to efficiently use the website. Specifically, the headers weren't visually obvious enough, so users didn't immediately understand the information organization of the site.
I used my research findings to improve the experience of the design:
I added a short summary of the company, to better signal the overall purpose.
Improved navigation contrast.
The Final Product
One of my client's primary needs was to be able to edit the content in the future, and to keep costs within her budget. Based on these requirements, I decided that it needed to be built into a more templated platform paired with an affordable hosting service.
Honu has launched! Optimized for web and mobile.
What I learned from the project
Piloting & Usability Testing
Always pilot, even if you're short on time...I would have benefited from piloting the card sort before distributing to participants to reduce confusion and increase valid results.
Usability testing is always fun because people will usually say unexpected things! It is invaluable to do this because there is no substitute for a different perspective and for testing assumptions. Doing a cognitive walkthrough was specifically helpful to gauge their emotional response to the design.
Specifically I learned about creating contrast between typography, using consistent design elements to create an expected pattern that guides the viewer through the page, and alignment to maintain a clean look. I also learned some handy HTML/CSS.
It's always a fine dance between a happy client and a beautiful design. My client wanted to keep most of the text from the old site, which meant a high word count in the About and Testimonials section. Therefore, I advocated for pull out quotes to give snapshots for those users who will scan and not read.