close

Role

Team

Task

Year

Lead Designer

1 designer, 1 back-end developer

UX/UI design and development

2020 (3 months)

Philanthropy News Digest is a product of Candid where people can read about philanthropy news, nonprofit job opportunities, and RFPs. The site garners around 450,000 page views per month. Candid had recently formed after the merging of two big organizations, Foundation Directory Online and Guidestar so all the products that were now under Candid needed to be rebranded.

My role

This project was immediately handed to me after joining Candid. I was responsible for leading the design and development of rebranding Philanthropy News Digest where I did user research and interface design with a new visual standard.

Challenge

The rebranded site aimed at making the site informative, visually consistent and improvements were needed in user experience for certain sections.

Restrictions:Limited flexibility to modify html code. The entire site needed to be rebranded mostly with just css, so the design decisions had to revolve around the layout of the current site.

Previous website

The old version of the site was functional. However, it had parts that were no longer used/needed. It also had visual effects that didn't exist in the new branding guideline.

THE PROCESS

Research and Interviews

A series of interviews and meetings were done with the stakeholders and the managers to understand the workflow and strategies for the site. One of the main goals was to simplify the ease of users reading the list of articles.

Survey:I prepared a set of questionnaires asking the users about their behaviour when they read any news site. The survey was taken in person with immediate users (people who visited the library at the org) and also took an online survey from work colleagues.

Findings

  • Most users use mobile to read the news.
  • Validated the user's preference of condensed posts to 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 visited a single news post from social media and newsletters. We needed to make sure to include a list of related posts for easy access from individual posts.

Competitive Analysis

I analyzed other news sites to know how the elements were arranged in their interface. I presented the common pattern seen in those sites to the stakeholders, this helped us make some of our design decision of moving forward with common practices.

UI DESIGN

Design Iterations

  • We had regular meetings with the stakeholders and manager for updates on progress and edits needed on the mockups.
  • I initially make 3 versions of any page that had major edits and then iterate on decisions made on those versions. This saved us decision making time and also the time that would have been spent making iterations.

Header

The search icon was moved to the top for better visibility and use. The survey showed that the social media icons were rarely used and Twitter was the only link related to the site so we moved it to the footer.

Jobs and RFPs

These sections had a lot of traffic. We added illustrations to make them stand out more.

Footer

The subscribe form had to be visible but not too prominent that it overshadows the footer, so we moved it to the right corner of the footer.

Blog

The long list of blog posts was replaced by condensed versions for users to easily scroll through other posts.

Launch

The launch of the rebranded site was a huge success. We received positive feedback from our users. The user traction to the site increased as well.

Maintenance

Heatmaps of the site after launch was thoroughly analyzed and maintained for any bugs or issues.

Key takeaways

  • User data is a powerful tool for validating several design decisions. It also helps the designer and the stakeholder remain grounded to the user's needs.
  • Make multiple versions of the same screen for any major design edits to save reviewing and decision making time.
  • Conduct regular check-ins with the stakeholder and the manager to get them involved in the process. They might have ideas and suggestions, so it is important to keep them in the loop.
  • Know all the technical restrictions before the design process.
  • Create tickets for all design and development tasks for better tracking and setting realistic deadlines every sprint.
  • QA the site in parallel for any browser-related issues.