top of page

ONLINE TOOL FOR BIPOLAR DISORDER

Design of an enhanced online tool, for the research team at CREST BD

Graphic image of wheel with many spokes


DETAILS

  • Client: CREST BD (Collaborative Research Team to study psychosocial issues in Bipolar Disorder)

  • Project: Design an enhanced online health tool based on a paper questionnaire

  • Role: Senior UX Designer, including user research, UX strategy, technical and user research, site architecture, wireframes, interaction and visual design.


IMPACT

This online Quality of Life Tool was embraced by the BPD community and is currently in use and is approved by BC clinicians as a recommended online resource. The tool also provides the CREST BD research team with a stream of useful, ethically sourced data that can help them find more ways to help people with BPD, and raise funding for further research.


OVERVIEW


The international research organization CREST BD needed an enhanced online version of their "Quality of Life Tool," which was previously a paper questionnaire. The tool is for people with bipolar disorder (BPD), a psychiatric condition which can cause mild to severe shifts in mood.


The original paper questionnaire: A fresh copy was required every 7 days. It had to be completed by hand and carried to a healthcare provider for analysis.

How the tool works:

  • People with BPD answer the same 54 questions, at least once a month, for as many months as possible

  • Shifts in responses reveal how, over time, lifestyle choices correlate with BPD symptoms

  • These insights help people with BPD to self-manage their symptoms

The paper questionnaires were typically completed by hand and carried in to a healthcare provider for review and analysis.


Moving it online: advantages


For users: The online version of the tool would include online help, resources for independent review and analysis, and curated links for support and information. But most importantly, it would include a special widget (that we would design) would allow users to easily compare multiple questionnaire responses and identify patterns themselves, giving them a more timely and direct way to manage their own symptoms.


For the client: Moving the tool online would make data collection for research much more efficient.


Screenshots of 12 wireframes, one larger shot showing the registration process
I began with an interactive wireframe to help the team identify friction points in the user flow - like asking users to register when they hadn't yet had a chance to explore how the tool even works. (We changed that).

Screenshot of a flowchart showing site architecture of all screens for the Quality of Life Tool.
A userflow chart helped me figure out how to elevate and isolate the questionnaire within the overall website.


Design challenge: Get users through 54 questions repeatedly, again and again


According to research done by the Crest BD research team, people with bipolar disorder can have problems maintaining focus when completing online tasks. In spite of this we would be asking participants to complete the QoL questionnaire (all 54 questions) repeatedly - over weeks, months, or even years.


Knowing this, I understood my top UX goal: Create a supportive, engaging interface that subtly pushes users to complete all 54 questions quickly-but-pleasantly.

Two screenshots of an early design of the online questionnaire contain small illustrations in a hand-sketched style.
Early design feedback: Illustrations I used to represent categories (above: sleep, and mood) were slowing users down as they tried to figure out their significance.


Screenshot of final visual design for questionnaire does not include illustration, is primarily in blue and grey tones.
The final design for the questionnaire: Categories are text only. The design is simple, upbeat, and the way category results appear in a nearby graph subtly pushes users to complete all questions.

In the final design, two areas of the screen update dynamically to show progress: a line of dots under the title, and the spokes on the wheel-shaped graph. Users unanimously reported delight in seeing the spokes fill in as they moved from screen to screen.


The progress indicators in action.



WIDGET: Compare responses over time


By sliding a tab from chart to chart (as many as have been completed), the user can see immediately how/whether their responses changed over time. From there users can dig further into specific results in-depth (eg. Sleep, Mood, etc), as all data is securely stored on the site for registered users.


The widget in action: chart scores update smoothly as the user shifts from chart to chart.



Screenshot of the results screen with text and arrows pointing to various features.
A "My Results" provides details once a questionnaire completed, along with resource links related to each category. An invitation to compare results appears when more than one questionnaire has been completed.

Comments


Commenting has been turned off.
bottom of page