The (In)visible Organ

Designing a website to engage people in the documentary and experimental arts project, The (In)visible Organ.

Overview

Task

Design a website for The (In)visible Organ.

Time

3 weeks

Team

Joanna Choi

Andrea Kim

Tools

Figma

Problem

The Invisible Organ's users vary from artists to hospital directors to policymakers. How might we provide resources for users who want to learn more about the project?

Process

Research

Competitive Analysis

Synthesis

Journey Map

Site Map

Design

Wireframing

Mid-Fi Prototyping

Usability Tests

Deliver

Wireframing

High-Fi Prototyping

Usability Tests

High-Fi Refinements

Key Insights

Defining the scope

The (In)visible Organ is a participatory arts initiative that explores the cervix and inner reproductive anatomy. I was tasked with designing the website for this art initiative. Based on multiple conversations and a kick-off meeting with the client, I used the following information to guide my design process:

  • Goal: engage people in The (In)visible Organ
  • Audience: high school/university students, researchers who work with students, community health leaders, and those in the cervical cancer / HPV-interest community
  • Aesthetic: whimsical, retro sci-fi oriented, playful so as not to intimate audience
  • Pages to consider: The Story (the documentary and inspiration), About (the team), Explore (archive of projects), News/Media, Connect with Us, Voices of Calla (audio recordings of people's thoughts and perceptions about reproductive health.

Taking inspiration from competitors

To gain a better understanding for designing The (In)visible Organ's website, we conducted a competitive analysis of similar non-profit websites and digital archives including The Me Too Movement, CultureHub, and MIT Open Doc Lab. We chose these 3 organizations because they have similar goals and archives of work.

Ideation

Understanding the user's journey

We defined 4 different types of people that would be interested in the website: (1) local/physical connect, (2) Callascope buyers, (3) artists and researchers, and (4) engineers, global health researchers, policymakers, and NGO's. We then broke out these users' journeys into two phases: (1) Consider and (2) Explore. After mapping out each user's journey, we ideated on opportunities for the user's involvement with The (In)visible Journey.

Defining a site hierarchy

We created a site map to determine the hierarchy of the website. We decided on 5 primary navigation links: Our Story, Get Involved, Projects, Media, and Connect. From the previous website design, we combined the "Our Story" and "About Us" page into one as to not confuse users who want to learn more about the project inspiration. The Get Involved primary navigation link acts as a CTA for users interested in getting involved.

Design WORKFLOW

Wireframes

The process for designing wireframes was as follows: mid-fidelity design > usability tests > high-fidelity design > usability tests > final design. I conducted usability tests after each round of design to ensure that our design was functional and intuitive for users.

The left image is the mid-fidelity design and the right image is the final high-fidelity design.

Style Guide

In order to maintain consistency throughout the website, I created a style guide that includes typography, a color palette, and buttons. For the typography, I picked three different fonts, each with a specific purpose in mind: Paytone One to highlight important headlines, Roboto Mono for important subtext, and Open Sans for paragraph text. For the color palette, I chose a combination of colors that represented femininity, bodily fluids, and optimism.

Challenges & Solutions

1. Voices of Calla

Voices of Calla is an archive project that shares peoples' thoughts and perceptions about reproductive health. The client asked to create a page that gets users to submit personal stories for Voices of Calla. After designing the page in mid-fidelity and conducting usability tests, I found that all 3 users felt uncomfortable submitting an audio recording without listening to previous recording. As a result, I re-designed the page in high-fidelity to begin with an introduction to the project, a playlist of submissions, and then finally a submission form.

2. The Virtual Art Exhibit

The client asked to create a page that would act as a virtual art exhibit for The (In)visible Organ that showcased the artwork, artists, and photos from the exhibit opening. To begin, I researched art museum websites to see how art institutions have created a digital presence. Based on the research, I designed the following page so users can easily view and learn about the artwork while limiting information fatigue. During usability testing, all 3 users found the page easy to navigate.

RELFECTION

Due to the exploratory nature of the project, I found myself spending more time than usual researching digital archives and experimenting with new layout formats. After multiple rounds of iterations and usability testing, I created designs for the Voices of Calla and Art Exhibit pages that met the client's goals while still being intuitive and delightful to users.