OLIVIA QI


About
Contact


* = concept

WEB / UX

  1. Alzheimer’s San Diego
  2. Get Sh*t Done
  3. Rate My Plate
  4. Mouseyverse
  5. Da Capo*


GRAPHICS

  1. Hasitha Guhan
  2. TeenTix merch
  3. Chinoiserie Script
  4. Brat poster*
  5. Blood poster*
  6. Luna Li merch*
  7. The Marías merch*
  8. Wild book cover*


    MISC.

    1. Surveillance
    2. My Kid Could Play That*
    3. Aphrodite Metropolis campaign*
    Alzheimer’s San Diego    UX design, UX research, Web design  TEAM: 3 designers, 5 devs, 2 project leads
    ROLE: UX Designer, UX Researcher
    TOOLS: Figma     Alzheimer’s San Diego is a nonprofit that provides support companionship to people with Alzheimer's and dementia. My team at Nova, is currently working on creating a web-based platform for ASD’s volunteers and administrators to log, approve, and give and receive feedback on activities. 

    PROBLEM STATEMENT
    Alzheimer’s San Diego approached my team with the issue of consolidating system for tracking volunteer activities into one program. Previously, they used Volgistics for logging and approving hours and email for sending volunteer reports and admin comments, and this system was clunky and confusing. 

    COMPETITIVE ANALYSIS

    We studied existing volunteer management systems, including those used by UCLA Health, UCLA Recreation, and Friends of Children with Special Needs. The analysis aimed to identify best practices and areas for improvement to enhance user experience for both volunteers and administrators.

    KEY FINDINGS: 

    ❌User Interface & Experience: Many existing systems require volunteers to navigate multiple steps to log hours, often involving selecting assignments before entering time details. This process can be streamlined to reduce friction and improve usability.

    ❌Overwhelming amount of scrolling: If users input a lot of entries, there’s a seemingly infinite amount of scrolling needed to find a specific entry. It’s impractical for long-term volunteers, and Alzheimer’s San Diego specifically requires volunteers to write detailed notes, making it all the more important for us to simplify the search process.

    SUGGESTIONS: 

    ✅More engaging visuals:  Incorporate engaging colors to differentiate our product from buggy legacy software.  

    ✅Streamlined entry searching:  Give users the option to sort by ascending to descending dates, filter by activity type and manually search to avoid endlessly scrolling to find a logged activity.

    USER SURVEY QUESTIONS
    To inform the development of a more user-friendly volunteer hours logging portal for Alzheimer's San Diego, we created a user research survey was conducted. We couldn’t get direct access to Alzheimer’s San Diego volunteers, so my team and I instead asked 5 UCLA students who volunteer or have volunteered in healthcare settings. The survey gathered insights into volunteers' current experiences, challenges faced, and desired features in existing volunteer management systems.

    KEY FINDINGS:

    💡Activity-logging struggles: Volunteers report often forgetting to log hours on time and not having a record of their activites, indicating that they want a simpler and more easily accessible system to do so. 

    💡Straightforward data access: Volunteers want commonly accessed information like a summary of total hours and admin announcements to be easier to find and refer to.

    CLIENT COMMUNICATION

    Throughout our process, my team and I kept close communication with our client. After doing user surveys, we asked Alzheimer San Diego’s main administrator what issues she faced in the current system, via a Zoom call. Since none of our team members had volunteered for ASD before or had any nonprofit administrator experience, we gained insights on what kind of data we should display and export for users, in addition to naming and bureaucratic conventions ASD already follows.  


    BRAINSTORMING FEATURES

    Along with the project lead and two other designers, I brainstormed ideas for features based off insights from our competitive analysis, user survey, and client interview. We did our affinity mapping in FigJam.
    Volunteer features
    Admin features

    LO-FI -> MID-FI -> HI-FI WIREFRAMES
    Lo-fis: To begin ideating solutions quickly, I sketched lo-fi wireframes in Figma to map out basic layouts and user flows for both volunteers and admin users. These focused on key screens, core flows, and clarity.

    Mid-fis: Once layout validation was complete, I developed mid-fi wireframes that added more structure and functionality, including interactive components and drafts of a color palette.

    Hi-fis: Finally, I created high-fidelity, interactive prototypes, incorporating the Alzheimer’s San Diego brand guidelines which my team and I expanded upon with a design library. We worked on making sure the typography and color palette aligned with accessibility contrast standards and creating microinteractions for feedback like submission confirmation and hover effects.


    USER TESTING
    My team and I came up with tasks volunteers would have to complete regularly, such as finding a certain resource, reading an announcement, or editing their log of an activity. Then, we prototyped user flows based on these tasks and observed a real ASD volunteer simulate completing our tasks on a Zoom call. We had her think aloud while clicking through each page and took note of her thought process and pain points. 

    As of 5/4/2025, we’re still working on turning our prototype into a fully functional website.

    The design team maintains close connections with development team through weekly check-ins, and the devs are currently working on turning our designs into code and connecting it to the backend. Our finished product will be deployed around early June!
    © 2025oliviarxqi@gmail.comLast updated 2/28/2025