PWR4 Website Document Dashboard

Overview

PWR4 is a venture philanthropy group that provides technical support to other nonprofits to help them accomplish their goals. As a UX Designer, I work on designing aspects of the PWR4 website to streamline the process nonprofits go through to get the support they need.

Role: UX Designer

Team:

Design: Esha Fateh, Rommel (RJ) Narvasa Jr

Full Stack Development: Justin Yang

Duration: October 2022 - Present

Tools: Paper/Pen, Figma

Problem Statement

In part of providing strategic support, PWR4 enables nonprofits to upload relevant documents to be stored in a document dashboard for later reference. How can we design the document dashboard to provide a streamlined and intuitive method of organizing documents?

when I joined the project, PWR4 had a basic dashboard to start off from. Now it was up to us to develop the design further.

Initial Design

The initial dashboard design had one call to action to upload new files and presented files in a list format. As seen, the dashboard needed improved organization as well as more action items such as renaming and deleting a file. It also needed an improved search feature to make it easier to sort through many documents.

Brainstorming

The design team and I generated a list of ideas we could implement to make the dashboard easier to work with.

Goals

Improved Organization

Create folders to store documents of similar content
Additional sorting measures by uploader
Differentiate types of files using different icons
Place commonly opened files in Recently Opened section

Additional Action Items

Search feature to look up a file by date, type of file, name, or uploader
Delete Files
Edit Files
Favorite files

First Redesign

We developed a few mockups to explore how some of our ideas would look within the current structure of the dashboard.

After developing this initial design, we realized that important action items such as renaming and deleting files are higher priority than continuing development of the organization system, so we shifted to focus more on them.

Second Redesign

I developed flows for three key action items: renaming, deleting, and searching for a profile. These flows helped us visualize how users would interact with the dashboard.

After presenting my flows to the design team, I got feedback on how to improve the designs visually. Doing so helped me develop my UI skills.

I learned from my design team leader that making elements visually distinct through different colors and highlights helps users distinguish between options

Meeting with the Development Team

We presented our designs to the software development team for feedback. This helped us learn the limitations we had to consider when designing and communicate to the developers on what we envision the dashboard to look like.

Redesigning Round 3

Based on the feedback from the dev team, we modified our designs with key specific changes:

Placing the renaming and editing features inside a menu
Providing a pop up to rename the document
Prompting a specific order of keywords inputted for dates to improve search results
Display search keywords as filters that can be changed easily

Presenting to the Stakeholders

I presented the final designs after our third round of redesigning. The stakeholders approved the designs and decided that the search feature would be put on hold for development to allocate more time on the development of the rest of the design.

What's next?

The website is still in development with the developers using the designs we made as guidance. Please feel free to reach out if you'd like an update or would like to talk about my design process!

Contact Me