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.
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.
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.
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.
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.
After conducting user research and creating a user profile, my team and I came up with the design requirements for the Website.
Website must be intuitive and easy to navigate with a minimized number of steps
Provide a way for interested people to connect to opportunities and get involved
Website should be visually appealing and engaging for users
Website should have standard website features such as a drop down menu, tabs, etc.
Provide a way for interested people to connect to opportunities and get involved (ex. link to google forms)
Allow the content manager in IHPSD to upload and update articles/documents (create admin system)
Provide a way for people to learn about environmental/health issues and opportunities there (multimedia articles)
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.
Fig 2. Anika's sketches of the homepage, article page, and interactive map.
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.
It will contain an image gallery, featured articles, links to their social media, and IHPSD announcements.
This is a visual way to access information. There will be a map of San Diego with ticks at locations where there are issues. However, our team is not focused on implementing the interactive map for this project.
This is a traditional article layout of the same information as the map. There will be multimedia embedded within the article to provide a fluid flow when exploring the article.
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.
Fig 3. Sitemap and site architecture of the IHPSD website.
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.
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.
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.
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.
PROTOTYPE & IMPLEMENTATION
The key features of our two prototypes were:
Navigation bar for the 4 main pages
The details for each of the main pages
The Playlist page
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.
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:
Are the contents of the website located where users expect to find them?
Are the icons representative of their functionality, or are they confusing?
Are users able to discover what actions are possible to do on the website?
Does the website look trustworthy and professional?
Fig 7. One of our user testers, Aaron B., viewing the IHPSD homepage.
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.
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.
Testers have critiqued the layout and color scheme of the website the most. As far as desirability of the website, it needs to capture the attention of visitors. Our website could be improved by changing the color scheme. Testers also did not like the scaling on some images and thought that some elements of the interface could be made clearer (i.e. adding a background to indicate that elements are clickable).
When given a task to find an element of the website, testers have been able to navigate through the website with relative ease. The website has high usability enabled by the navigation bar at the top, a feature that is common to websites and which is familiar to most users.
This website is going to be used by IHPSD to display all the content they have collected so far about issues in local communities. Our current website design can feasibly contain and display all the information to the user because of the layout. We split each issue into its own category and have related articles tied to each issue. The organizational structure of the website is to navigate through the navigation bar, which separates the website into understandable categories.
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.