Role
Team
Task
Year
Lead Designer
1 designer, 1 back-end developer
UX/UI design and development
2020 (3 months)
Candid's
Philanthropy News Digest is a website where users can
learn about philanthropy news, nonprofit employment
openings, and RFPs. The site receives approximately
450,000 page views per month. Candid had recently
been founded by the merger of two large firms, Foundation
Directory Online and Guidestar, thus all of the products
that were now part of Candid needed to be rebranded.
My role
After I joined Candid, I was immediately assigned this project. I was in charge of overseeing the design and development of Philanthropy News Digest's rebranding, which included user research and interface design with a new visual standard.
Challenge
The rebranded site’s goal was to make the site more informational and visually consistent, and improvements in user experience for certain parts were required.
Restrictions:Limited flexibility to modify HTML elements. The entire site needed to be rebranded mainly with CSS, therefore design decisions had to focus around the existing site's layout.
Previous website
The previous version of the site was operational. It did, however, contain pieces that were no longer in use or required. It also included visual elements that were not included in the new branding guidelines.
Research and Interviews
A series of interviews and meetings were held with stakeholders and managers to better understand the site's workflow and strategies. One of the key goals was to make it easier for people to browse the list of articles and blog posts.
Survey:I created a series of questionnaires that asked readers about their reading habits on various news websites. The scale was conducted in person to immediate users (those who visited the organization's library) as well as an online poll to work colleagues.
Findings
- Most users use mobile to read the news.
- Validated user’s preference for condensed posts over long descriptive ones (the stakeholder had suggested full article in the blog list so this helped us come to a mutual agreement beneficial for the users).
- The majority of users only visited one news post from social media or newsletters. We needed to provide a list of similar posts for quick access from single news posts to improve user engagement.
Competitive Analysis
I looked at other news sites to see how the parts in their UI were organized. I presented the common pattern identified in those sites to the stakeholders, which helped us make design decisions about moving forward with common practices.
Design Iterations
- We met with the stakeholders and manager on a frequent basis to get updates on development and make any necessary changes to the mockups.
- I made three versions of any page that has had significant changes and then iterate on the decisions made on those versions. This saved us time on decision making as well as time on iterations.
Header
The search icon was moved to the top for better visibility and usability. The findings explained that the social media icons were rarely utilized, and Twitter was the only link relevant to the site, so we moved it to the footer.
Jobs and RFPs
There was a lot of traffic in these areas. We added illustrations to make them more noticeable.
Footer
We placed the subscribe form to the right corner of the footer because it needed to be visible but not so prominent that it overshadowed the footer.
Blog
The lengthy list of blog entries was replaced with shorter versions that allow viewers to simply skim through other topics.
Launch
The revamped site's introduction was a big success. Our users provided us with positive feedback. The site's user traction has also improved.
Maintenance
Heatmaps of the site were thoroughly analyzed and maintained after launch for any bugs or issues.
Key takeaways
- User data is an essential tool for validating a wide range of different decisions. It also enables the designer and stakeholder in remaining grounded to the user's needs.
- Make many versions of the same screen for any significant design changes to save time reviewing and making decisions.
- Maintain regular check-ins with stakeholders and managers to engage them in the process. They may have thoughts and comments, therefore it is critical to keep them informed.
- Before beginning the design process, be aware of all technological constraints.
- Make tickets for all design and development tasks to improve monitoring and set reasonable deadlines for each sprint.
- In parallel, test the site for any browser-related difficulties.