Project Type

Volunteer for a tech-for-good organization

My Role

Page evaluation / Pain points defining/ Interface designing/ Design system

Deliverable

Responsive web design for computer and phone

Timeline

July 2022 - Now

About DemocracyLab

Democracy Lab is a non-profit organization. Since its establishment in 2006, it has been dedicated to helping tech-for-good projects launch by connecting skilled volunteers to projects that need them.

The Problem

After years of effort, the organization has reached a good size. We have found that more than jumping into a project, working, then leaving, users now want to build broader, longer-term relationships with each other through the organization's network. The “About Us” page would be a good place to test the idea based on current information architecture. However, the old design is outdated and faces many usability problems.

Design Solution

Evaluate the old “About Us” page and irritate it into a more interactive and accessible page that can help build long-term relationships between users.

Design Approach

Understand the Problem

The key audiences

Before getting into the project, I had a deep conversation with the senior designers and developers in the team to understand the current users we are serving. The tech talents willing to support and project Initiators searching for help are the two key audiences of the website.

A difficult user journey

After conducting 5 interviews and observation research, we found that the low accessibility of the member sections and the inappropriate design of the "About us" page decreased the website's credibility and forced users to give up their tasks and finally fail to connect.

Key Insights

Final Design

With the following insights, I started to draft the new design with our group members. To minimize the workload, we decided to keep the main structure of the page but focus more on breaking the user’s pain points and smoothing the journey.

Also, it was my first time designing within a completed design system that contains thousands of components and strict rules, I spent days getting familiar with the system.

An clean and interactive member section

Define the specific question

Currently, 80% of the webpage length is occupied by the avatar of the board of directors and volunteers. Although they are valuable information, without a reasonable design, they will turn hard to access. Even cause users to give up on the webpage and miss other essential details. As a result, we need to find a way to organize the member part.

The New Filter Feature

The old design had very low interactivity. All members' information is placed in a roll, and the user only can manually scroll to browsing members' information. After discussing with the tech team, we believed that applying the filter feature to the design would be a feasible solution.

  • The new feature would help users save time on finding the right target and feel less overwhelmed.

  • The new layout would cut the page length by 80%.

The New Card

After optimizing the website's layout, we redesigned the card to make them more informative.

  • Adjusting layouts, adding color, and changing hierarchy relationships make the card easier to read.

  • Adding the LinkedIn and GitHub links to the new member card allows audiences to connect with people they want quickly.

Interdisciplinary Collaboration

Many cards are unedited on the current page, containing only default information. Those cards severely affect the user experience. Users look forward to reading helpful information about someone who might help; seeing useless information will go against their expectations and ultimately lead them to give up the task.

I can't directly solve the problem from the designer's side; however, design is a collaborative job. After discussions with our tech team, we found that adding a section in code can filter out the default member cards and only present the most valuable information to audiences. The group work made the design more user friendly.

A living and growing organization

A reachable annual report

The annual report is located right above human faces on the old page. As visual creatures, we are more likely to be attracted by the pictures under the section and miss the report section.

To make the report part more visible to audiences, instead of only using the color and the underlines to highlight the clickable part, we decide to:

  • Use the picture as the background to attach more attention from the audience.

  • Expand the section height and make the color contrast more intense.

  • Add a drop shadow to enhance the button's affordance.

History Roadmap

Taking the logo as inspiration, I designed the product road map to quickly introduce our users to how the democracy lab reaches today's position. With the history roadmap, users can get a brief introduction to the democracy lab‘s history and see that we have walked an excellent path and still stepping into the future. The map would help to build the organization's credibility in users’ minds.

Before the design, I met with one of our UX writers to define the most critical time nodes we need to point out on the map and the contents our users are more likely to know. With her help, I created the page's brand new "Product Roadmap" section.

Design for different devices

Besides the regular website, I also redesigned the responsive mobile version of the "about me" page of the Democracylab, making the page more user-friendly for phone audiences.

The dropdown menu

Compared to the computer screen, the phone has a smaller tap area and word fonts. To make the filter easier to use, instead of copying the tap bar from the computer version, I designed the dropdown menu with the exact width of the screen.

  • Users can check the list of opinions and easily filter the professional field as they wish.

  • This adjustment can also reduce the rate of mistake-clicking and provide users with a more fluent experience.

Trade-off and future steps

At the beginning of the design process, I reached the product manager and mentioned that the members’ section is located in the middle of the "About Us" page; that would be a restriction since it might become hard reachable for users. I proposed to change the information architecture and make this part easier to find, and finally build the connection between users.

However, due to the time and product scope restriction, we still decide to keep the section under the "About Us" page for now. Although we are trying to provide users with a platform to communicate with each other, whether more users will reach and use this feature is not yet known.

In response to this problem, we :

  1. Documented this problem as a proposal for the next design stage.

  2. Will keep observing the data when the new page is launched and consider if this section has the potential to be a separate section or be moved to other units.

Successful Measurement

Since we have made our new version of the “About Us” Page. How to measure the success of our new design?

A new round of usability test

We conducted a new round of usability tests to see users’ reactions to our old & new “About Us” design with the same tasks. Fortunately, There has been a significant improvement in user experience satisfaction.


The different measurement standards for a released webpage

It’s also important to keep tracking the data when the new “About Us” Page is onboarded. We will check on our google analytics account when the new version has been updated online. We are willing to see answers from the future live data to the following questions:

  1. How many of users are going to use the member section to connect?

  2. How often would the deep link hidden in the annual report be triggered compared to the old link?

  3. How much more clicks and traffic in our volunteer section will come from the “about us” page?

The New User Journey

We are proud to present a new user journey that is fluent from both volunteer and project sponsor sides. The new design would successfully connect these talents together and build more positive social effects in the future.

Work within a full design system

Unlike any new projects I worked on, the democracy lab already has a completed design system. One of the most important parts of my work is to redesign the ID card within the design system.

During the process, I realized I must think thoughtfully and create and document every status of the component. Not only for the original status, but also the hover, click, flip, and any possible status. Different sizes for webpage and responsive phone versions also need to be considered.

As a result, I designed and documented two sets of 10 responsive components for the system.

Make notes for engineers

Although we have a huge design system document notes that identify every detail of design standard, it's also necessary to make hints on small pieces of each design to show our engineers all the details such as spacing and margin.

These small pixel boxes improve the delivery efficiency between me and the engineers, also make my design more standardized.

The “About Us” page redesign was approved by the entire team at the end of August.

The new version is being developed and is expected to be released at the end of 2022

Reflections

It's my first time working on a project that has a completed, giant design system. I spent lots of time learning the system and realized that a good design system should be self-learnable for everyone who just jumped into the design.

The design system contains much more than fonts, color palettes, and components; there are instructions and explanations documents that tend to explain every small pixel of the design.

Building the design system is a meticulous and precise job, and I am still keeping learning from the group. I believe this experience can help me create more comprehensive systems for my future projects! : )

Previous
Previous

Elevating a Startup's iOS App from MVP to a Beta Release

Next
Next

App Solution For A Daily Problem