top of page
Project Overview
SRQ Eye
For this responsive website project, I worked with a client to accomplish a partial redesign and modernization for their private practice's website, along with updates to drive users to fill out patient forms online and promote their new cosmetic department.
Tools
-
Figma
-
OtterAi
-
Chat GPT
-
Maze
Role
Sole designer and researcher (academic)
Personal Goals
Explore ideation techniques, meet business and design goals, explore the use of AI tools
Duration
2 Weeks
RESEARCH
Background
Sarasota Ophthalmology is a private practice based in Sarasota Florida. It is a team of two doctors providing general eye care, surgery, optical services, and cosmetic services.
Research Goal
Understand both positive and negative experiences for users of SRQ Eye and users of other doctor's websites to decipher pain points and possible solutions.
Methdologies
1
Client Interview
Define the client's wants and needs
2
Heuristic Evaluation
Evaluate the existing usability of SRQ Eye
3
User Interviews
Identify pain points and user needs
4
Affinity Mapping
Synthesize findings and define the problem
Client Interview 1
To begin the redesign process, I met with my client to establish their wants, needs, and goals.
Key Takeaways
Aesthetic Goals
-
Keep the business's established colors and logo
-
Bring the website up to date with modern trends
-
Create a more personalized and less generic look
-
Develop more cohesive branding
-
Reorganize the website to maximize user experience ease
Business Goals
-
Emanate professionalism, trustworthiness, compassion, and genuineness
-
Encourage users to fill out patient paperwork online
-
Promote the practice's new cosmetic services
-
Emphasize the practice's optical shop
Target Audience
-
Older adults mainly 60+ years old
-
Middle aged adults seeking cosmetic treatments
Heuristic Evaluation
Before starting my user interviews, I evaluated the websites existing usability through heuristic evaluation.
Major Problems
1
Heuristic violated: match between system and real world
Solution: Improve visual hierarchy and organization through additional titles, rewording of copy using chat GPT, and new pages
Minor Problems
1
Heuristic violated: consistency and standards
Solution: remove the "let's talk" chat box as it only provides the office phone number and is not used for online chat which is misleading
2
Heuristic violated: aesthetic and minimalistic design
Solution: modernize the look, update photos, use branding colors cohesively, use minimalist typeface
2
Heuristic violated: error prevention
Solution: ask users if they want to open a file or leave the page when choosing an action which requires it and give them the option to cancel the action
User Interviews
I then put together a 24 question script and conducted user interviews with 5 participants who had either used SRQ Eye's website or another doctor's office website. I was able to interview 2 people who had used SRQ Eye's website and 1 person in my target age group (83 years old). Due to HIPPA guidelines, I was not able to be put in contact with my client's patients to source interviewees.
The results
Affinity Mapping
Because online booking was of importance to my interviewees, but majority of them were young adults, I conducted secondary research about the importance of online booking for doctor's offices in relation to older adults. I then affinity mapped my user interview data and secondary research data and compiled the information together to uncover correlations.
* The Problem *
Many users of doctor's websites become frustrated with inexplicit menus causing them to have to "dig into" websites to find information. Additionally, a lack of information about location, doctor's backgrounds, insurance, and medical conditions on a website causes them to reject using a doctor all together.
Key Takeaways
-
The most recent and first experiences using srqeye.com and other medical websites was unanimously an easy one.
-
The most important “feeling” potential patients need to choose a doctor are professionalism and trustworthiness.
-
3/5 participants mentioned that explicit menus and simplicity of pages is important for ease of use.
-
The most informative & important information to find on a doctor’s website is: location, insurance, and background about the doctors, and educational information about the medical issues they treat.
Pain Points
-
Having to “dig into” websites because of inexplicit menus and too many pages
-
Not enough information about location
-
not enough information about insurance
-
not enough information about a doctor's background
-
not enough educational information about medical issues
Potential Features
-
An FAQ section to answer scheduling, form, and medical questions
-
A CTA to incentivize filling out patient forms
-
Implementing DocuSign to allow users to fill out patient paperwork online
Client Expectations and Limitations
My analysis brought to light client goals and design goals that needed compromise.
1. Online Booking
Importance of online booking ease was a significant finding from my interviews, but my client was adamant about not implementing online booking. In order to help my client make the best decision about this possibly important addition, I conducted secondary research:
The city where my client has their business has a primarily older age demographic and therefore his user demographic is older as well. Through research I found that 65% of older adults prefer making appointments over the phone. In relation, only my participants under 30 years old mentioned importance of booking appointments online. Therefore, I do not feel online booking is necessary in the redesign of my client’s website.
2. Testimonials
My client does not want testimonials or reviews on their website because of personal beliefs. 2/5 participants mentioned reviews being important to them, but to meet my clients expectations I will leave reviews to be found off of the website.
3. Patient Paperwork
My client asked if there was a way to incentivize patients to fill out patient paperwork before arriving to their appointment. However, they do not want to implement a portal or software to be able to allow patients to do so without printing the paperwork and filling it out. 4/5 participants have not looked for patient forms to fill out online because they were sent them through an online portal. My idea is to try to implement DocuSign by having a link to the paperwork in the FAQ section of the website, a button link at the bottom of every page, and ask the office staff to email a link to each patient upon making an appointment.
User Persona
Before moving on, I created a user persona representative of the target audience for my client's website.
IDEATION
Ideation Techniques
1
POV & HMW
Turn insights into opportunities
2
User Journey Map
Visualize the steps to accomplish a goal
Point of View Statements & How Might We Questions
I wrote 6 POV statements to help me explore goal-oriented solutions.
Using my POV statements as a guide, I wrote out 8 actionable HMW questions.
User Journey Map
Next, I put together a user journey map for my persona to understand the current steps the user needs to take to find a doctor and book an appointment on my client's website.
Identified Issues:
-
The website is currently lacking background information about the doctor's
-
The website does not give potential patients the opportunity to fill out paperwork before their appointment causing the doctor's to run behind schedule
ROADMAPPING
Organization Process
1
Sitemap
Organize the platform layout
2
Task Flows
Establish interface pathways
Sitemap
To get started with road-mapping the new website, I created a sitemap to guide me through the wireframing process.
Task Flows
I then created 2 task flows I would later use for usability testing.
Task Flow 1: user visiting SRQ Eye's website and using the menu to find and read information about the doctor's backgrounds
Task Flow 2: user visiting SRQ Eye's website and using the menu to find and read information about what insurance the practice takes
BRANDING
Aesthetics
1
Style Tile
Define the brand look and feel
2
Client Interview
Discuss the client's approval of changes
Style Tile
With a good understanding of what my client wanted, I put together a style tile.
I used the business's existing logo and used similar colors in my branding.
The client wanted to use grey, white, black, and teal. I added a few different shades of each color for depth.
I stuck with simple icons to not distract the user from the content on the pages.
Too add a compassionate, calm feeling I used a few simple and cute illustrations.
I used two simple fonts that pair well with each other and maintain a professional feel.
Professional Trustworthy Compassionate Genuine
Client Interview 2
I presented the data from my user interviews and secondary research, my solution proposal for patient paperwork, the sitemap, and the style tile to my client before moving on to wireframing and they gave me the green light on everything. Now it was time to digitize!
WIREFRAMING
Digitizing
1
Low Fidelity
Digitize SRQ Eye's sitemap
2
High Fidelity
Add SRQ Eye's updated branding
3
Iterations
Improve features and increase quality
Low Fidelity
Using my understanding of what information is most important to potential users and my client's goals, I put together multiple versions for each page and noted what I believed worked best.
High Fidelity
I then brought my screens up to high fidelity and carried out iterations in the process. At this point I was still waiting for photos of real staff members from my client.
Iterations
Rethinking wording and organization
I originally had the wording "Why choose us?" as a header for a section talking about the practice and their values. However, I wanted to highlight the business by changing the wording to "Why choose Sarasota Ophthalmology?". I felt this would help the user remember the practice better and add more personalization to the page.
Next, I changed the formatting of the titles for the photo cards in the "Meet our experts" section so that when hovering over the titles, a "read more" button would appear. This allowed me to save white space and create a multifunctional element.
Lastly, I updated the contact and location information at the bottom of the page by removing the business hours and placing them in the footer instead. This made the section less crowded and allowed me to highlight the most important pieces of information.
Fixing layouts and adding space
I noticed the intro to the services page was feeling overcrowded, especially because this page is loaded with information. I decided to place a background to the top of the page to add some space for the page to breathe.
Next, I did not like the squares containing the information about what other conditions the practice provides treatment for. It was too heavy for such a small amount of information and this pattern was not continuously used down the page. I resulted to using bullet points instead of square containers.
Improving the menu
Finally, I made small changes to the menu by centering the text to the page and instead of saying "Call us at..." I only put the phone number because on a desktop this will not be a functional call button.
TESTING
Usability Testing
1
Test Plan
Map out testing objectives
2
Affinity Mapping
Synthesize testing results
3
Client Interview
Present findings and finalize product
Test Plan
I organized a plan for testing through maze.co. I tested my desktop screens because desktop interaction will be my client's main source of website traffic.
Objectives
-
Observe efficiency in completing tasks on srqeye.com
-
Observe how users navigate the product
-
Identify any problem areas within task flows
-
Evaluate ease of use
-
Identify features requiring revision
Success Metrics
-
Direct success vs. indirect success: how many testers are able to complete the test without issues and what issues cause indirect success.
-
Participant feedback: responses from testers explaining what they liked or what they found difficult and why
Tasks
-
​Task 1: Imagine you are visiting srqeye.com looking for a new eye doctor and want to read about the doctors at Sarasota Ophthalmology to see if someone is a good fit for you. Please show how you would find information about the doctors.
-
Task 2: Imagine you are visiting srqeye.com looking for information about what insurance the doctors take. Please show how you would find information about the doctors.
Follow Up Questions
-
Did you feel the information you were asked to find was easily found? Why or why not?
-
Was there anything about the website you found confusing?
-
If you were visiting this website in real life, do you feel you could find the contact and location information about the practice easily? Why or why not?
-
Was there anything the website lacked?
-
If you have any comments or suggestions, please make note of them here.
Affinity Mapping
I completed testing for both tasks with 6 participants. To synthesize my results I mapped each test separately and compared the information to find correlations.
Conclusions
Test
There were 6 direct successes testing the ease of finding background information about the doctors.
There were 4 direct successes testing the ease of finding insurance information. Two indirect successes were by participants going to the services page instead of the FAQ page. However, both participants figured out the information was on the FAQ page within a few seconds.
I was also testing to see if the services card on the home page was something users would expect to be clickable. I found through heat maps provided by Maze, that no one attempted to find information by clicking the card.
Questions
Overall, there was little to no negative feedback about the tasks or website at all.
From my interviews, I learned that contact and location information is important to be able to easily find when on a doctor’s website. When asking the usability testing participants if they felt these pieces of information were easy to find on my website, majority of people said yes. Only one participant said they would expect to find such information under a doctor’s background information.
Considerations
Although 2 participants looked for insurance information under the services page, they quickly found the information in the FAQ page.
I feel I did not find any significant or critical issues to revise through this testing. I will move forward with the website as is.
Client Interview 3
I presented my client with the updated high fidelity screens and the results from the usability testing and again received a green light on everything. My client is in the process of taking professional headshots of their staff, so a few updates will need to be made later on.
FINAL PRODUCT
Before and After
UI Kit
Next Steps
1
Add real images
My client is in the process of taking headshots of their staff and photos of their staff doing cosmetic procedures. once I receive those images, the website will be complete.
2
Bring it to life
My client has a developer on hand to bring the website to life. Finally the website will give users an amzing experience!
Key Learnings
1
AI is our friend
For this project I wanted to utilize AI as a tool. It is a fast growing technology and a tool that will be hugely helpful to designers. I used chat GPT to help me structure the website and write copy and it saved me a lot of time. I plan to learn more about how I can use AI in my career.
2
Compromise can be hard
Explaining and defending design decisions to people not in the industry can be tricky. I got to experience first hand how difficult it can be to meet client and design goals. But, with enough problem solving, there is always a compromise.
3
Design for the persona
I ran into some research limitations during this project where I couldn't get an age-accurate user interview pool. Once I got my data from the interviews, I had to think critically about what data actually applied to someone 60+ years old. Referring to my persona and conducting secondary research helped me stay focused on designing for my target audience.
4
Try and try again
It can be frustrating when a design decision doesn't work out after digitizing. Especially if you were really happy with your original idea. When this happens, I have learned to not get attached to designs and instead start new and brainstorm as many ideas as I can. This always ends up working in favor of the product and creates an even better interface.
Up Next
Pinterest Feature
Adding a new pin file and labelling feature to Pinterest.
bottom of page