Intersectional Health Project San Diego

A case study and design for a student organization

Design Challenge:
Design a website for IHPSD to show articles that call viewers to action.
Project Length:
April - June 2017
Team:
Cross-functional team of 6
Role:
UX Designer and UX Researcher
Skills:
UX Research, UX Design, UI Design, Wireframing, Prototyping, Usability Testing, Information Architecture
Tools:
Sketch, HTML, CSS
Scope:
Today, not everyone in San Diego receives the healthcare that they have a right to. Anika Ullah founded Intersectional Health Project San Diego (IHPSD) to expand awareness and get the community to aid in the existing health conditions that immigrant populations are faced with. Due to underrepresentation and unawareness, change will not occur for immigrant populations when the San Diego community is unaware about the current harsh conditions that these people are forced to live through.
Problem:
IHPSD needs a medium to expose their ethnographic stories and multimedia in a non-dehumanizing approach to encourage the community to get involved. Organizations need a platform to make their resources visible to help relieve health-related issues in immigrant populations. Volunteers need to gather information about different issues to choose a cause that aligns with their values.
Design Process
1 | Understand
Through user research and interviews, we empathized and figured out the painpoints.
2 | Ideate
With out client's help, we defined the design requirements of each main page.
3 | Prototype
We mapped the site architecture as a guide for our wireframes and prototypes.
USER RESEARCH
We started our interviews by questioning the members of IHPSD to gain better insight on how to design the website. We learned that IHPSD is group of UCSD students who are passionate about bringing awareness to the lack of healthcare immigrant communities in San Diego face. The students travel to these communities and conduct their own interviews to write articles about these issues. Because the target audience for the website is college students, my team and I interviewed college students at UCSD. After conducting these interviews, we were able to create a user profile.
Old Design
Fig 1. UCSD student persona profile
The target community for IHPSD would be UCSD students looking to volunteer or use skills that they have learned from class in nonprofit health-related organizations. They want it to be student-run so that students themselves can raise awareness in school for helping out these programs.
DESIGN REQUIREMENTS
After conducting user research and creating a user profile, my team and I came up with the design requirements for the Website.

General
  1. Website must be intuitive and easy to navigate with a minimized number of steps
  2. Provide a way for interested people to connect to opportunities and get involved
  3. Website should be visually appealing and engaging for users

Technical
  1. Website should have standard website features such as a drop down menu, tabs, etc.
  2. Provide a way for interested people to connect to opportunities and get involved (ex. link to google forms)
  3. Allow the content manager in IHPSD to upload and update articles/documents (create admin system)
  4. Provide a way for people to learn about environmental/health issues and opportunities there (multimedia articles)
Ideation
Anika brought in sketches of what she wanted the homepage and article page as well as the color scheme she wanted, and we based our own sketches of the information she gave us.
Our sketches based off Anika's:
Given the limited time, we did not expect to implement every potential interactive feature of the website, such as an interactive spatial map that our client requested. Because of budget and time constraint, the team came to the conclusion that implementing the interactive map was not feasible in the timeframe, which we explained to Anika. Instead, we would focus on designing and creating the homepage and article page.

Using a feedback capture grid for all the concepts and a Pugh chart for the homepage and article page, my team and I were able to select our concept for each page. While we decided not to implement the interactive map, my team and I still decided to include the map in our design process for future updates.

Design
  1. Homepage
  2. Interactive Map
  3. Article Page
Each webpage will have a navigation bar that allows users to navigate through the website. The general navigation bar hierarchy is represented in the figure below.
SITE ARCHITECTURE
We created a sitemap for the website to give us a clearer view of how the website would work and what pages we needed to create.
WIREFRAMES
We were first given a homepage mockup design, font specifications, and color scheme by Anika. Our team then created high fidelity wireframes of the homepage and article page in Sketch, which were then used as designs to base coding the website from. Going off of Anika’s desire for a minimalistic theme, we kept the homepage and article page simple and clean. There is a navigation bar on every webpage that allows the user to find out more information about the organization, read articles, and use the interactive map.
Paper Prototype
Fig 4. Homepage mockup made by Anika, including specifications.
The light blue underlined text are annotations specifying the fonts and colors.


Homepage Design
For the homepage, we kept the design relatively simple and modern. Anika did not want too many visual enhancements such as an image header above the navigation bar, as she thought it would distract users from the information and content on the page. The homepage features an image carousel that users can click through. There is also a featured articles section, where article previews will be displayed. On the right is a sidebar with IHPSD announcements and a contact section in case users would like to further connect with the organization.
Paper Prototype
Fig 5. Homepage mockup made by Anika, including specifications.
The light blue underlined text are annotations specifying the fonts and colors.


Article Page Design
For the article page, I kept the design simple and mostly like a traditional news article layout. I added breadcrumbs at the top as a secondary navigation system. The breadcrumbs serve as a visual tool that gives insight about the website’s hierarchy and because the website will have many articles and pages in the future as IHPSD grows and takes on more projects. I also added social media buttons as a way for users to share the articles and issues they are reading about and create visibility for the issues IHPSD are documenting, further highlighting their cause. On the far left of the page is a fixed sidebar which we refer to as the “action bar”. The sidebar will have call-to-action buttons that will encourage the user to donate to the cause, to volunteer with an organization associated with the cause, and to learn more about the cause.
Paper Prototype
Fig 6. Homepage mockup made by Anika, including specifications.
The light blue underlined text are annotations specifying the fonts and colors.
PROTOTYPE & IMPLEMENTATION
The key features of our two prototypes were:
  1. Navigation bar for the 4 main pages
  2. The details for each of the main pages
  3. The Playlist page
  4. Menus with list of options for the playlist
With ideation completed, I sketched out the different screens in more detail as a base for the mockups to be created on Balsamiq. From there, we created our screens on Figma and used InVision to turn our static screens into a clickable prototype. We drew inspiration from the various music applications used in the comparisons of workflow as well as other apps like Gmail for the redesign of the two scenarios. From there, we were able to a create a new functionality of creating a new playlist from an existing one and make the process of deleting multiple songs simpler and quicker.
Old Design

Our team created the IHPSD website by coding in HTML, CSS, and JavaScript. We used Bootstrap framework to help implement a mobile-responsive website. We used GitHub to manage our collaborative efforts in a shared repository, as well as to host the the prototype website. While our team is not focusing on implementing the map page, we would suggest the map page to be implemented with Google Maps API.
USER TESTING
We used Nielsen's Ten Usability Heuristics as a guideline for creating our test questions and tasks and evaluating our feedback. The heuristics we specifically focused on were consistency and standards, recognition rather than recall, flexibility and efficiency of use, and aesthetic and minimalist design.

The questions we were interested in answering are:
Testing with these heuristics was important for the IHPSD website because frustration in using the website could lead a potential volunteer to not get involved if they are unable to navigate through the website.

Results
After receiving all of our feedback from user testing, we can see what aspects of the website need to be improved on, as well as its strengths.
TAKEAWAYS
Working on this project pushed me to focus more on an iterative design process and human-centered design rather than user-centered design. I learned to design with empathy so I could solve problems from other's shoes. I had to think more about sustainable community development and communication within a humanitarian designing context. This was one of the most fulfulling projects I've worked on because I felt that I was really making an impact. Getting to work with Anika and learn more about IHPSD opened my eyes to the health issues the San Diego immigrant population faced and I hope the website really does become a platform that calls people to action.