Lupus Connect


The goal of the project was to design an engaging, intuitive and user-friendly social platform for
people suffering from a disease called Lupus.

The Problem

Lupus is a chronic autoimmune disorder that causes damage to any part of the body. In this condition
the body fails to distinguish between healthy tissues and foreign invaders and creates antibodies that attack and
destroy healthy tissues. There was a need to connect people diagnosed with Lupus so they could share their
stories, get advices, meet and help each other fight Lupus.

The Solution

The team proposed to design a web application with key features such as enabling patients to share
their stories, getting detailed information on Lupus from doctors, schedule a group meeting and access dietary information etc.

Lupus Foundation of Northern California (

Our team collaborated with LFNC for this project. The LFNC is a non-profit organization serving the northern
California lupus community since 1978. With programs focused on those living with lupus as well as on research
and advocacy to find a cure, they are the voice of the northern California lupus community of patients, families,
friends and caregivers.

User Research

User Research techniques

Interview, Surveys, Field Study.

Our team approached Lupus foundation of Northern California(LFNC) to conduct interviews and gather requirements.
We understood the problems experienced by Lupus patients and also by the admins managing the organization.

We conducted surveys to better understand our target user group. The key findings were:

Age range: 15-45 years.
Gender: 90% of the patients were females.
Experience with computers: Average.

Competitive Analysis

We looked through and examined many similar existing social networks and noted what
these sites lacked. The results showed a huge gap between what the site offered and what the users actually
wanted. One of the major reasons for patients not being able to access important information was finding it difficult to access
or search information on the current site; hence we made sure that 'ease of use' would be our top priority.


Primary Users - Lupus Patients and their relatives/caretakers. Anyone seeking information on Lupus.
Secondary Users - Doctors, Content Managers, Site Admins.

we created few Personas that are most likely to use the system based
on data collected from the survey results and interviews.

Design Process

Task Flow and Analysis

We identified the major tasks that could be accomplished by a user on this application.

1. Make a donation.
2. Share/view stories on Lupus.
3. Schedule a group meeting with other Lupus patients.
4. Start a discussion thread/ Ask a question relating to Lupus.
5. View recent publications/news on Lupus.
6. View Lupus support groups.


Paper prototyping is an important step of user-centered design process. As the layout
in this stage is raw and has an incomplete look, users felt encouraged to freely suggest UI changes
that they would have hesitated in case of polished high fidelity designs.
We created a paper prototypes of all possible UI screens.

Low fidelity paper prototypes

High fidelity prototypes

After evaluating the paper prototypes and having a satisfactory layout we moved on
to create hi fidelity UI designs. We used Axure RP for creating the hi-fi designs.


Color Selection

We used White and Blue as primary colors for the design. White is the cleanest color of all existing on the color wheel.
It reveals even the smallest details, and this feature makes white perfect for the medical industry.
The color blue resembles care and trust. This color is used to symbolize tranquility and sincerity and these
feelings are crucial for patients who are going to trust their lives to doctors and medical services.
Hence, blue and white forms a perfect color combination for this design.