Seraphine
Case Study
The Health System App and Responsive Website project aims to create a comprehensive digital platform that provides accessible and user-friendly healthcare services to individuals, focusing on convenience, information dissemination, and efficient healthcare management. This innovative solution aims to bridge the gap between healthcare providers and patients by offering a seamless experience through a mobile app and a responsive website.


The product
PROJECT OVERVIEW
The problem
The art gallery app aims to solve the problem of limited information availability in art museums by providing comprehensive details about artworks and artists, enhancing the understanding and appreciation of the art.
The goal
The goal of the project is to create an intuitive and interactive app that empowers users to explore and learn about artworks and artists in a museum setting, fostering a deeper connection with the art and enriching the overall museum experience.
UNDERSTANDING THE USER
Throughout this project, I conducted in-person user research to gain insightful perspectives on user behaviors and preferences. I engaged directly with users in real-world settings, enabling me to observe interactions and gather firsthand feedback. Going into the research, I had certain assumptions about user needs and pain points. However, the in-person sessions led to a shift in my assumptions as I uncovered unexpected nuances in user behaviors and preferences. These face-to-face interactions not only confirmed user preferences but also provided context for their decision-making processes. The insights gathered from my in-person research played a pivotal role in shaping the project's direction, ensuring that my design and development efforts are in harmony with genuine user requirements and behaviours.
1
2
3
4
Confusion Between Consultation and Appointment Buttons:
During the research, users expressed confusion regarding the distinction between the consultation and appointment buttons. They perceived them as interchangeable terms, leading to uncertainties about their purpose and functionality within the app.
Limited Doctor Selection Due to Rating System:
Users indicated that the rating system influenced their choice of doctors, causing them to primarily select the first available option. This was attributed to the absence of lower-rated doctors in the lineup, thereby diminishing the perceived importance of the rating system.
Difficulty Locating Psychology Services Within General Practitioner Section:
Participants encountered difficulties while attempting to locate psychology services within the general practitioner section. The lack of a clear separation between different medical specialties led to confusion and an expectation for distinct categorization.
Lack of Appointment Confirmation and Cancellation Options:
Users noted the absence of a dedicated space to confirm or cancel their appointments. This absence led to a sense of uncertainty and limited control over their scheduled appointments, causing frustration and inconvenience.
Persona
"Maria is a hardworking single mother with limited financial resources who needs accessible and affordable healthcare options for her children, as she is determined to provide them with quality medical care despite her financial constraints."
Ideation
During the ideate phase, my extensive experience in this field has enabled me to begin building low-fidelity wireframes right away. This approach not only saves time but also streamlines the design process by simultaneously exploring and constructing frames. The combination of my background and the use of low-fi wireframes has proven to be an efficient strategy for rapidly visualizing and refining ideas. This approach aligns well with my goal of creating a user-friendly and efficient healthcare system app and website.


STARTING THE DESIGN
Digital wireframes
Throughout the design process, I actively sought feedback from peers and users, leading to the implementation of various features. Conducting three research rounds with approximately 30 testers, I adapted and incorporated ideas, such as the report button, "donate and sponsor" option in the navigation bar, visual indicators for user progress, and color-coded buttons. Additionally, I improved transparency by providing more animal specifications and outlining how donated funds would be utilized. This iterative approach resulted in a comprehensive and user-centric hi-fi prototype, meeting the needs and preferences of the users and ensuring a seamless and enjoyable experience on the platform.
The low-fidelity prototype offers a comprehensive experience of the app's functionalities. It enables users to seamlessly navigate through tasks such as scheduling video consultations, locating nearby hospitals, booking appointments, completing medical assessments, accessing prescriptions, reviewing exam results, and receiving notifications. You can access the prototype flow through the provided link below.
https://xd.adobe.com/view/d53e0195-4b30-4eb7-a70d-f253347834b3-806d/
Low-fidelity prototype




Usability study: findings
After conducting the first round of tests with my low-fidelity prototype, it became evident that certain elements were missing, leading to difficulties for some users in completing the desired tasks. Although I assumed the buttons were easily findable, the feedback highlighted the need for improvements to ensure smoother user navigation and task completion.
1
2
3
In the appointments section, a potential issue emerged where users were disproportionately favoring the first doctor listed and overlooking subsequent options. This imbalance in doctor selection was causing challenges in achieving a fair distribution of appointments and impacting the overall scheduling process.
Users faced difficulty discerning between consultations and appointments due to their proximity within the same section. The close placement of these options led to confusion and hindered users' ability to clearly distinguish their distinct purposes and functionalities.
Users encountered challenges in locating their history of past consultations, a feature that was highlighted as crucial for their ability to conveniently review their previous interactions.
REFINING THE DESIGN
o address the users' pain points, a strategic approach was taken. Firstly, doctor ratings were replaced with a system that displays the days of the week the doctors are available. This modification not only prevents doctor fatigue from daily work but also ensures a consistent availability across all days, eliminating long waiting queues for a single doctor.
Secondly, the user experience was enhanced by segregating consultations and appointments into separate sections. This clear differentiation clarifies the two distinct options available to users, eliminating any potential confusion.
Moreover, to cater to the users' need to track their medical journey, a dedicated section for viewing the history of past consultations was incorporated into the app. This feature enables users to conveniently review their previous interactions, ensuring continuity and improved healthcare management.
Mockups






The high-fidelity prototype focuses on completing the core user flow, which involves scheduling consultations and booking appointments. This decision is prompted by the imminent deadline, with plans to subsequently finalize the project and present the comprehensive version in my website portfolio. You can explore and test this condensed prototype through the provided link below.
https://xd.adobe.com/view/b4c08d5f-3dd7-4d97-b2d0-1f6706695f2a-e193/?fullscreen&hints=off
High-fidelity prototype


Accessibility considerations
1
2
3
Equitable Accessibility through Icon-Centric Design
Keeping the app simple. As it's free for all citizens, we consider different education levels. The app relies heavily on icons, ensuring easy navigation and task completion for all, including those with limited literacy.
Enhancing Visibility and Accessibility
I designed the app with a strong emphasis on cleanliness, ensuring users won't struggle with low visibility issues. Moreover, the app is being developed with a dark mode option to comprehensively address various visibility challenges.
Consistent and Predictable Navigation
Providing consistent navigation elements and layouts to help users easily understand and navigate the website.
Responsive Design
Seraphine is a groundbreaking organization dedicated to providing citizens with unfettered access to essential healthcare services, all without any cost. Our mission is to ensure that every individual has the opportunity to receive the medical attention they require, with an inclusive approach that covers a wide range of health needs, excluding solely aesthetic procedures. Our website is thoughtfully designed to enhance user experience, with each sector distinctly representing a different facet of healthcare. Our commitment to ease of navigation is further underscored by unique iconography for each sector, ensuring that accessing vital information is as straightforward as possible. Welcome to Seraphine, where healthcare access knows no barriers.
Site Map


Responsive designs
The transition to a desktop version in the responsive design phase presented notable challenges stemming from my relative inexperience in this aspect. Initially, I grappled with the perception of excess empty space, unsure of how to effectively allocate content given the comparably expanded canvas. This divergence was accentuated by my historical inclination to work from larger screens to smaller, thereby presenting a learning curve in adapting to this transition. However, my prior proficiency in similar endeavors positions me well to not only overcome these challenges but also confidently navigate both scenarios—expanding from larger to smaller and vice versa—aligning with my aspirations for proficient bi-directional adaptability in future design endeavors.


Going forward
Impact
This project has the potential to bring transformative change to the real world by providing free and accessible healthcare services to all citizens. By breaking down financial barriers and ensuring medical support for every individual, regardless of their economic status, this initiative can significantly improve overall public health and well-being. Additionally, the emphasis on user-friendly design and inclusivity enables individuals from various educational backgrounds to access and utilize healthcare resources effectively. This project not only addresses critical healthcare gaps but also fosters a more equitable and healthier society.
What I learned
Through this project, I've come to realize the vital importance of a government-backed healthcare system in society. This experience has deepened my respect for my own country, which shares similarities with the system I've developed and served as my primary inspiration. Along the way, I've made significant strides in my knowledge and skills. Testing the project with individuals lacking access to education, those who can't read, and people with color blindness was a pivotal moment. My main focus was to ensure that the system is usable by everyone, no matter their background or abilities.
Next Steps
1
2
3
My immediate next step entails the development of the high-fidelity prototype I meticulously crafted for this project. While time constraints restricted me from completing all the envisioned flows within the app, I successfully concluded the primary flow to serve as a demonstration showcase.
My forthcoming stride involves expanding the app's capabilities, as I firmly believe there's ample room to delve deeper into this project and unveil a broader spectrum of its potential functionalities.
Last but certainly not least, I'm committed to conducting additional rounds of testing with a diverse range of users. This step is pivotal to ensure the app remains universally accessible, aligning with the crux of my project's ethos: creating an inclusive application that caters to all individuals.
Thank you!