NEW GENERATION HEALTH CENTER
The Redesign of the My Doctor Online App is designed to enhance the
user experience for Kaiser Permanente Northern California Members
My Role
I collaborated with a friend on the New Generation Health Center website redesign.
I was the Design Lead and the User Experience and User Interface designer for this project as well as the Project Manager in charge of scheduling and project timeline.
|Our role was to redesign the New Generation Health Center website with a new, clean, and user-friendly website that is also mobile-friendly and compatible.
The Backstory
New Generation Health Center (NGHC) also known as New Gen is a youth health clinic in San Francisco that helps provide quality reproductive health care and education about safe sex, pregnancy tests, and STD transmissions.
They serve many low-income families, communities, and students who need assistance which is similar to Planned Parenthood.
The Objective
-
To create a user-friendly and modern-looking website as the original website was outdated and is in need of a revamp
-
To create a website that is mobile-compatible on a mobile or tablet device
The Challenge
New Generation Health Center started around the 1990s as part of the University of California of San Francisco (UCSF).
The website was very challenging since it was very outdated and no one knew how to code and only could make small updates to the website. The Center Manager wanted to strip down the entire website and create a fresh new website. The only challenge was that the colors, style guides, and branding had to conform to UCSF.
Since the target users are generally teenagers and young adults, the website is not very mobile-friendly or mobile compatible.
The Competitor Analysis
I analyzed and researched 3 potential competitors located in San Francisco so I can gain an overview of the type of information provided on their website as well as compare and contrast the features and benefits. This helps me discover the best design solutions and what users are interested in seeing.
The Competitive Grid
The Survey and
Interview Process
We created a survey to ask fellow patients what they thought about New Generation Health Center website. Here are a few questions we wanted to find out:
-
Are they able to find the necessary information they are looking for on the website such as contact information and services they provide?
-
What do they think is wanted or missing on the website that will help them complete their tasks?
-
How do they typically find information on the website and what types of information do they typically look for first?
We conducted in-person interviews because we needed qualitative data and gain a better understanding that can validate and confirm our research and findings, so we can narrow things down further.
The Assumptions
We came up with the following assumptions based on our research and analysis and the interview we had with the New Generation Health Center patients.
Our goal was to fully understand their patients and why they chose this clinic among all of the other clinics that already exist.
The Hypotheses
Based on the survey and interviews conducted, we collected data about our potential target user base. From the data, we will be able to build a hypothesis about our potential users.
We came up with several hypotheses regarding how the users think.
The User Persona
We created a user proto-persona to create a description of the target users and audience based on the assumptions of stakeholders. Since this was a pro-bono design, we wanted to design and build the prototype immediately and save time.
We gathered all the various stakeholders and asked them to generate as many persona's in a small amount of time. We finalized the proto-persona into 3 potential types of users. We divided the group into 3 different age range and ethnicities who mainly uses the clinical services.
The Functional and
Content Specifications
We came up with a high, medium and low priority list based on importance. We felt that making appointments and the patient portal would be more ideal and widely used among the users. Content needs to be grouped into sections using hierarchies to help the eye read the information better with ease and simplicity.
The User Scenario
We created short stories or scenarios of the actionable steps a user needs to take in order to complete their goal or task. We want to capture what the user needs or wants, so we can motivate and guide them in the right path or direction.
The User Case Study
I created a Use case study to understand how the user flows through the webpages to complete their task.
The Wireframe
The wireframes are heavily based on the user research we came up with early on in the design process. The contact information, hours, and location details are added to the homepage, so users obtain the information much quicker and easier than before.
As the user scrolls further down the page, the user can view more information about the clinic, set up an appointment, etc. We added the staff page to show an image of the staffs on hand, so the patients can look them up and have a credible source.
The Prototype
The prototype shows the necessary information that the patient needs, so they can find the necessary information without a scan and look for the important information. The main critical information was the contact, hours, and location section.
I kept the website as clean and simple as possible and if the user wanted to learn more about the website, they can click on the links to learn more.
