Design a website for The (In)visible Organ.
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?
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:
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.
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.
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.
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.
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.
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.
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.
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.