My Role

User Research, User Testing, High-fidelity Design

Duration

Sep.'19 - Dec.'19

Tools

Pen+Paper, Optimal, Adobe XD

Our Team

Nitya, Yolanda, Sid, Hannah

Professor

Nancy Smith

A convenient and personalized experience for engaging in volunteer events.

Design Outcome Overview


Process

RESEARCH

Gained wide-scale knowledge of our clients after brainstorming and analysing stakeholders and the service circle of NewYorkCares.

  • What kinds of users does they mainly have?
  • What features does they provide on the website?
  • How could they build a stable operating system?

Carrying along with these questions, we planned a research proposal in order to find answers efficiently.

Interview

Found insights based on current user behavious and habits of volunteering and donating on New York Cares through interviewing 16 team leaders and 3 regular volunteers.

Insights

I summarized responses in each questions and then generalized implications.

  • Searching, managing projects, and communication are most important and frenquently used functions. Among them, searching feature is most favorable, However, it still need to be improved.
  • Rewarding system could continuously motivate volunteers.
  • Profile page is not good, such as volunteer history, which is an important funtion that actually is often-used.
  • Knowing the measured impact has great encouragement to donors.

Survey

I diveded questionnaire into two parts: volunteer attitute and New York Cares website using experience.

My questionnaire was distrubited to 20 new users, so that I could get their first impressions when exploring the website.

Insights

  • People are more willing to volunteer as a group than individual.
  • People expect more donating ways except of money.
  • New volunteer friendly and family friendly volunteer projects are most popular.

Observation

Gave tasks to users and discoverd hidden instinct behaviors through direct observing.

Insights

  • Sign up process is too complicated for the first-time users.
  • Non-clickable hashtags in volunteer event detail is unresonable.
  • Navigation bar is misleading.
  • Persona

    I defined my target users as two groups: team leaders (returning users) and new uesrs. Then I seperately concluded pain points.

    Key Pain Points


    Cumbersome navigation

    Difficult-to-use search bar

    Poor projects management

    Inefficient contact approach


    IDEATION

    Affinity Map

    Gathered all our research outcomes and grouped into categories.

    Important features, frustrations and user preferences are what we most focused.

    Competitive Analysis

    Our goal is to learn

    • What elements make for an effective and user-friendly website.
    • How competitors organize, present their information, and engage users.

    Wrap-up: Key Takeaways

    Shown below is a summary of the important insights from former research and analysis. Remaining them in my mind all the way down, I made much effort to solve the design challenges and associate my design decisions to these implications and principles.

    How to bring users more convenience?

  • Help users promptly whenever and wherever they need.
  • Design a well-rounded searching feature and well-organized menu bar.

  • How to bring users more personalized experience?

  • Recommend volunteer activities according to users profile.
  • Recommend related and suitable activities when users browsing a specific one.

  • How to bring social impact and stimulate volunteers?

  • Summarize and display volunteers history.
  • Encourage users to share their achievement.

  • How to bring users more trust and confidence?

  • Present big data in appealing visualization methods.
  • Tell users most up-to-date stories and news.
  • TESTING

    First impression is the most important factor for a non-profit company, so that before solving those design challenges mentioned above, we should first reframe a clear and rational navigation.

    Card Sorting

    Through card sorting, we could know how actural users think about the distribution of tabs and figure out the best information architecture. Personally I got 7 feedbacks, and then we converged within the group.

    Through the similarity matrix, we created the initial site map.

    Tree Testing

    Then I conceived 5 most ambiguous tasks (with 4 users) to inspect where those plaguing tabs should go in the navigation bar.

    Recommendations

    • Names of tabs: rename keywords to better represent the meaning.
    • Distribution of content: combine similar tabs.

    Site Map

    ITERATION

    After we pinned down the information architecture, we began to dig deeper into specific features of the website.

    Process

    Introduce the project goal, and put users at ease.

    Describe the scenario, set up the context, and let users thinking aloud.

    Let them evaluate the satisfaction in different dimensions.

    Ask follow-up questions and appreciate their participation.

    Then we created task-based user testing using rapid paper prototype to inquire about our target users’ opinions on those design concepts and their expectations.

    User Flow

    Task 1

    You are looking for Winter Wishes Letter Reading event. You know it is held in the Bronx on December 12th.

    Task 2

    You participated in the Meal Prep volunteer event last week. You are looking for similar events that may suit you and add to your favorites.

    Findings

    For returning users, they prefer to log in first and then go to profile page to view projects history.

    Results

    DESIGN

    Desktop

    Quick volunteer & donate button

    Highlight the two most important features of NewYorkCares.

    Fixed floating help button

    Contact NewYorkCares service team instantly.

    Get access to Q&A at any time and any where.

    Narrative searching filters

    Guide users to find volunteer activities in a storytellling way (more human-like tone).

    New recommend feature in profile page

    Provide better using experience to view upcoming or past events.

    Find recommended volunteer activities according to user’s interests and skills.

    New share feature in profile page

    Create an emotional experience as the rewarding.

    Attract more potential volunteers through the social media.

    Mobile

    REFLECTION

    User Feedback

    Client Feedback

    New York Cares spoke highly on our research and got inspirations, such as some volunteers are more willing to attend events as a group instead of individual. Since New York Cares pointed out that they are also working on messaging feature now, it is necessary for the next step to research more about communication behavior, iterate design, and test to improve this function.

    Professional Feedback

    • Need more condiseration about visual design.

    Though pink and blue looks good, it tends to invoke the stereotype of gender.

    Incorporating some icons or using some different fonts on home page to highlight key details will be more readable and engaging.

    Avoiding too tiny text and clickable assets to make information more accessible.

    • The chat button on home page and filtering system is great.

    Choosing skills and interests makes everything feel really personalized and specific to each user.

    • Mobile site could be more responsive rather than a smaller version.

    Stacking vertically and running across the whole width of the screen might make things easy to click on with a finger.

    Design Challenges

    Universal Design

    This was my first time to design for the non-profits client. During the research process, I discovered that their user groups differentiate a lot, from young people to elders, and various occupations. So it's impossible to design for all kinds of users and reach out universal design principles. It is really a big challenge for designers to strive a balance when facing such dilemma.

    Avoiding Information Overload

    Designers need to provide just enough information to avoid information overload; we need to provide constraints to guide users through a certain path; we need to focus on the tasks users are trying to accomplish, think about their context, their needs, and provide solutions that best suit their needs within the context.

    The Importance of User Testing

    As designers, it is crucial for us to test our flows with our users to discover different possibilities and try to incorporate them into the design. Recently I learned the concept of "Co-design", which I would like to apply in future projects.