Gifts of Art
Redesigned Michigan Medicine's Gifts of Art website by reorganizing content and prioritizing user's need
Project Overview
During Fall 2021, I worked as a Student UX Designer in Design Clinic for Michigan Medicine's Gifts of Art program to redesign their website in preparation for an upcoming website migration. Our team were able to discover the user's need and how to reorganize the content and redesign the website accordingly.
My Contribution
While all the team members were working collaboratively in the project, I contributed to conducting four user interviews, Heuristic evaluation, competitive analysis, creating personas, wireframes and prototyping.
Team Member
Timeline
Tools
Skills
Lydia Cheng
Emily Cao
Jina Kim
Yan Li
Sep 2021 - Dec 2021
Figma, Miro
Competitive Analysis, Heuristic Evaluation, User Interview, Affinity Mapping, Personas, Wireframes, Prototyping
The Client
Gifts of Art (GOA) is one of the first and most comprehensive arts programs in healthcare. While this program focuses on serving the UofM Medical community, they also share their art in an international context through their website. Overall, the program has deeply impacted many individuals through the utilization of arts to aid with the overall healing process and reduce stress.
The Problem
The current website hasn't been updated since the program was founded. While GoA is a program under Michigan Medicine, there's no consistency between the program website and the department. Users are having difficulty browsing the website and finding what they want since the content is crowded and the website is non-responsive.
How can we redesign the website that allow the UofM medical community to access information about the program that is digital and intuitive?
Design Solution Overview
1. Reorganized Homepage Content
With a clear and simplifier header, and separate different content into different section allow users to navigate through the website easier and quickly locate the target information.
2. Restructured “Service” Section
Making each service to be shown on one page to highlight its impact and improve engagement from the public. Avoid overwhelming content showing on the main page to reduce user distraction.
3. Adding “Impact” Section
Introducing the program impacts through missions and previous users stories helps improve the program reputation and increase people's awareness.
Impact
Compared with the former website, we addressed the usability issues and reorganized the website content to make it more accessible and intuitive for users. Our client was satisfied with our designs, and the new design was handed over to the program manager. The website will be relaunched by 2022.
I posted a survey to get user feedback on the new design, and 100% of users think it's much easier to find the program information and ways to get involved.
How we got there?
Design Process
Research
Who are the users and what are they looking for?
User/Stakeholders Interview
At the beginning of the project, we wanted to better understand the purpose of the Gifts of Art program, how users feel about the program, and how users use the program website. Therefore we conducted 8 interviews in total over three weeks.
Medical Professional
People who work in the hospital, including doctors, nurses, etc.
Patient
Patients in the U-M hospital
Administration
People who work and in charge of the GoA program, and responsible for the website migration
Public
People who are interested in the program but do not belong to the other three types
Key Takeaways:
Both admin and people within the medical community are struggling with identifying website purposes, even though the program itself is very well-known and effective.
Users enjoy the program but have trouble with going through the content on the website.
Users enjoy the content of the website, but they think the website should be more organized and cleaned, without putting too much information together.
Users would like to see more consistency between the program and its website.
User Persona
Given our interview findings, we developed the following personas. Since we needed to prioritize the type of users that we should focus on, we then analyzed the current website by separating existing pages and sections, and categorized them under each persona who might be interested in visiting. By doing so, We found out that the main users of the website is actually the public.
Primary Persona - Public
This type of persona is interested in the most amount of the content from the website.
What’s the problem of the current website?
Heuristic Evaluation
Keeping the user's need in mind, our team decided to conduct heuristic evaluation of the current GoA website in order to collect a better understanding of what problem exists and what we need to focus on with the overall website.
Home Page Before
Issue Found:
The overall website is not responsive
Call to Action buttons and links are not obvious enough
Content are crowded and hard to find information within pages
There's no information that could indicate where user is
Outdated aesthetic
Lack of images and icons
What could the existing products in this field tell us?
Competitive Analysis
Given the findings from Heuristic Evaluation, we wanted to learn more about the problem space and how others have approached those issues. We decided to conduct competitive analysis on 8 organizations, divided into three types.
Takeaways:
Responsive design to make sure the website can be accessed from different devices.
A clear hierarchy of content helps users quickly locate information they need.
Consistent display layout on each page provides a professional feel and makes it easier for navigation.
Highlighting important content such as contact information, "ways to join", and impact helps the program to stand out.
Ideate
How could we reorganize the website content?
One of the biggest issue we found and also mentioned by the users was the crowded content on the website that made people hard to navigate from page to page and locate target information. Therefore, to address this issue, we decided to reorganize the content by making a new site map, and we started with card sorting.
Card Sorting + Site Map
In card sorting, we analyzed all the pages and sections in the website and created 6 categories, then we asked participants to place each each page and section into a category. Finally, we were able to have over 50 participants to complete the card sorting and redid the site map.
(Click to enlarge site map)
Brainstorm on design!
Design Concept
After all the research we've done, we then aligned user goals and the program's goals, and prioritized which pages to design. We utilized the information of why each persona would visit the website to determine which pages to design - Home, About, Impact, Services (Exhibits, performances, etc.), Donations.
With the problem statement in our mind, we brainstormed some potential design concepts which could help the program website become organized, informative, and intuitive.
Having a standardize header and footer within each page
Each service has its own page instead of having all of them in one page
Emphasis key information
Separate content and buttons to avoid overlooking
Related content (image and article) are structured in one section
Wireframe
After confirming the site map with our client, we started to create digital wireframes.
The goal was to get feedback from the client and test the primary functionalities and user flows.
Homepage
Donations
Impacts
Specific Service
About
Overall Service
Stories
Specific Story
Getting Feedback / Iteration
Due to the limit of time, we didn't get a chance to conduct user testing after we created the wireframes. We presented the wireframes to our client and received some feedback before moving on to our final design.
On the Impact page, our client wanted the category section to be more specific about the impact of the program other than listing all those services.
On the Services page, it would be helpful if users could find other resources within this page.
A button which could lead users to request a visit is necessary.
Final Design
Homepage
Services
This page is describing exactly what Gifts of Art does. It will be used when users are looking for specific projects of GoA or want to know what GoA does in detail.
Donations
*New Section
One insight that we addressed within our redesign is showcasing the impact of the program. When users are looking for more information on the impact of GoA, this is where they will be directed to.
Visual Brand Identity
Mobile Design
Due to the limitation of time, our team didn't do a mobile version design for the project. After the project finished, I did the responsive mobile design individually.
Responsive mobile design for the website is necessary because it provides a more convenient and accessible way for users to engage with the GoA, especially for the patients who stay in the hospital and do not have a laptop with them.
What did I learn?
Time Management: This project was carried out at the same time as I was taking five classes at school. I had to deal with my schoolwork while working on this project. Planning ahead and getting everything on schedule help me complete this project.
What could be improved?
Usability Testing: Due to the limit of time, we didn't have the opportunity to conduct usability testing after we finished the design. It would be better if we could have done the usability testing to get the user's feedback and iterate our design.
Iteration: In this project, we only iterate our design once when we got feedback from our clients. However, it's not enough to reach the best design.
