Artful Cause thumbnail

Artful Cause

App/Website

A platform where people with talents could offer their serves to non-profit organizations. At the same time, organizations can find useful help on the platform too. The platform can run in dedicated mobile app and responsive websites.

Team

Sally Tsai

My Role

User Research

Sitemap

Wireframe

Prototype

Usability Testing

Mockups

Tool

Figma

Photoshop

Procreate

Duration

1 Month

Overview

The problem

Considering that many fellow designers wish to contribute to society and assist non-profitorganizations with their skills, but often struggle to find relevant information. On the other hand, non-profit organizations face budget constraints, resulting in limited resources to produce high-quality projects.Therefore, this platform has been created to facilitate the connection betweenboth parties and allow like-minded designers to find more fellow enthusiasts.

The goals

  • The platform should be able towork on mobile app and responsive website.
  • The platform should provide auser profile pages for volunteers to showcase their work and experiences.
  • Volunteers should be able to edittheir profile freely.
  • Seamless user experience

Understanding the user

During the user research phase, we conducted interviews with a diverse group of individuals to gather insights and understand their needs, motivations, and frustrations. We engaged with a range of users togain a holistic understanding of their experiences and perspectives. Through these interviews, we explored topics such as their motivations for non-profit work, previous involvement in charitable initiatives, challenges in connectingwith organizations, and their expectations for a platform like ours. Theempathy maps provided valuable insights into their thoughts, feelings, andgoals, helping us develop personas that captured their unique characteristics and needs.

Additionally,we conducted a competitive audit, examining platforms that match talents and volunteers to projects, to identify their strengths, weaknesses, and opportunities. This research laid a strong foundation for our platform's design and development, enabling us to create a user-centered experience that catersto the needs of both artists and non-profit organizations.

Persona

Problem statement

Sarah Chen is a freelance artist who needs to showcase her work because she wants to get more cases.

Artful Cause persona 1

Sarah Chen is a 28-year-old freelance photographer from Taipei, Taiwan. She leads anactive lifestyle, always on the move to capture the perfect shot. Sarah is passionate about using her photography skills for non-profit purposes and wantsto make a positive impact in her community. However, she often finds it challenging to discover and connect with non-profit organizations that alignwith her interests. Sarah's frustration lies in the time-consuming process ofsearching for opportunities on various platforms and the difficulties she facesin communication and coordination when collaborating with organizations. She envisions a dedicated mobile app that will make it more convenient for her tofind non-profit projects, manage her engagements, and showcase her non-profitphotography work. With the app, Sarah hopes to streamline her workflow and makea meaningful difference through her photography.

Sarah's Goal

Easily find and connect withnon-profit organizations, manage her project engagements, and showcase her non-profit photography work.

Sarah's Frustrations

She finds it time-consuming to search for non-profit opportunities on various platforms, and sometimes struggles with communication and coordination when collaborating with organizations.

Problem statement

David Thompson is a professional photographer who needs to find a non-fit organization that meets his interests because he wants to contribute his skill for things he cares.

Artful Cause persona 2

With a Master's degree in Photography, David has a wealth of experience and expertise in the field. He is passionate about exploring non-profit photography projects and collaborating with organizations to make a difference. However, David faces challenges in finding the right non-profit organizations that align with his interests and values. He often spends considerable time researching and vetting organizations, which can be frustrating. Additionally, coordinatingproject details and communication with organizations can be time-consuming and complex. David prefers using his desktop or tablet for more detailed work andorganization, which makes accessing the platform through a web browser the ideal choice for him. With a user-friendly web interface, David envisions being able to seamlessly explore and engage with non-profit projects, build his non-profit photography portfolio, and contribute his skills effectively.

David's Goal

David wants to explore non-profit photography projects, connect with organizations for collaboration, and build his non-profit photography portfolio.‍

Davd's Frustrations

He often faces challenges in finding the right non-profit organizations that align with his interests, and coordinating project details can be time-consuming and complex.

Competitive audit

The competitive audit provided valuable insights into the landscape of platforms serving non-profit freelance projects. It highlighted the strengths, weaknesses, and opportunities within the industry, which will inform the development of our platform to effectively meet the needs of users and drive positive impact in the non-profit sector.

competitive audit report

Ideation

I used a method called Crazy 8 to quickly come up 8 ideas. In ideation phase, I tried to create as much possible as I could.

Artful Cause Crazy 8

Starting the design

Digital Wireframes

This page allows volunteers to preview their profile and see how it appears toothers. I have ensured that the contact information is easily accessible,making it easier for users to connect with the volunteer. Additionally, unlike other profile platforms, volunteers have the opportunity to express the causes they care about, showcasing their passions and interests.

wireframes of Artful Cause

Low-Fidelity Prototype

The low-fidelity prototype demonstrates the user's journey in previewing andediting their profile. The profile page showcases the user's skills, interests in various causes, reviews from previous projects, and a gallery of joinedprojects. Additionally, I have prioritized easy access to the contact information, understanding its importance in connecting users with volunteers. As this is a preview page, the edit function takes precedence over contact information, and an edit button remains visible on the top bar as users scroll for convenient access. To enhance usability, I have separated the editing function into two parts: profile and project. This separation allows users toedit their profile and project information from different access points in thefuture. When users want to edit their project content, they can enter adedicated section that enables them to reorder, delete, and add images.

Gif of Low-Fidelity prototype

Usability Study

Parameters

Study type

Unmoderated usability study

Location

Taiwan,remote

Participants

‍3 participants

Length

‍20-30minutes

Findings

Here are the main findings uncovered by the usability study:

  1. Missing confirm messages:

    When users clicks on the check icon, there is no confirmation message to indicatedata has been saved.

  2. Redundant steps to edit project content:

    Currently, when users wants to edit project content, they need to enter a new section. This user flow should be able to me more simple and seamless.

  3. Not intuitive edit access:

    In current user flow, users need to enter edit profile first, then they can accessedit project. Survey result suggests that this is not a seamless experience.

Refining the design

Mockups

  • In the usability study, I noticed that it can be simpler to let users edit project contents directly on the edit project page, instead of going to the edit section by click on a button.

    Refine sample 1
  • I rearrange the layout of reviews. If there is a very long review, the new layout can make better use of the space.

    Refine sample 2

Other Pages

different mockup pages

High-fidelity prototype

The hifi prototype follows the standard of Material Design 3 design document with customize color and font.

high-fidelity prototype

Accessibility considerations

  1. Take color contrast in mind to increase legibility.
  2. Use icons and text at the same time, so users could understand the navigation much easier.
  3. Clear hierachy of content, to decrease the cognition load.

Responsive Design

Sitemap for website

When users using the websiteversion of this platform, the purposes are learn about the platform, donation,and search for opportunities.

sitemap for website

Responsive designs

design for different screensizes

Takeaways

Impact

Participants are looking forward to have a place to contribute their talents. Espeacially for those who are introverted, it is a challenge to go out and meet people. The platform create a save environment for them to contribute to the society.

What I learned

It is a new lesson that although I was designing for the same platform, the outcome would be different according to what divece users are using. In addition, the purpose of dedicated app might be different from its mobile website. We have to explore more of our users thoughts, to make the most friendliestdesign.

Next steps

  1. Continue on other function of the platform
  2. Take more usability test to improve the user experience.
expand_circle_up