Emerald Spring Case Study

Emerald Spring

Independent project completed in the Google UX certificate program. I worked on this in November 2023.

Challenge

Design a website that allows users to complete a simple health questionnaire before their doctor’s appointment.

For this project I wanted to push myself, and also add an additional user flow that allowed a user to select a doctor.

I designed the desktop experience first, with the app following.

My Role

I was responsible for all aspects of the project, including research, usability studies, wire-framing, prototyping, iterating on designs, and more.

Process

I began with a competitive audit of similar companies, noting that most agencies start the user flow with the option to either find a doctor, or managing their existing healthcare service in a patient portal.

Through user research, I determined a primary user group includes mothers with multiple children. I wanted to also design for senior users, who may be less familiar with technology.

Personas

One persona I created was for an older user, William. William is less familiar with technology, and relies on a desktop pc to get ready for his appointments. He finds working with most websites to be confusing, and overwhelming.

Sketching

I started with some paper sketches of the homepage. From research I noted that the websites of competitors are often very visually heavy, using only the minimal necessary text. I wanted to easily capture those two key areas – finding a doctor, and completing the forms for your upcoming appointment.

Wireframes and Low-Fidelity Prototypes

I converted the paper sketches to wireframes in Figma. I made a few layout changes before moving to prototyping.

I made a few modifications to the layout in the form flow.

User Testing

After getting my wireframes together, I conducted a round of usability testing. Through these tests I learned I needed to make it clearer how you can select the account of a specific patient to manage. I needed to make it clearer how to advance to locate a specific doctor.

Final Designs

Having made some more edits, I finalized the designs. The purpose of the design was to allow a user to find a doctor, and fill out a simple pre-appointment questionnaire. Those journeys are captured in the following designs.

Desktop rendering is seen above. Please open in full screen for best viewing.

You can also go through the flows of a responsive web design (built for an iPad), and a mobile design.

Next Steps

I did this project using a simple 10 px layout grid. I would like to revise some of it to adhere to a 12 column based design, similar to Google Material Design. Additionally, I would like to learn more about typography to make my body copy more visually appealing.