A redesigned website supporting patients and caregivers in shaping virtual health care through educational podcasts and engagement insights, inviting participation for meaningful discussions.
Role
Web Designer
Team
Oliver Taw (Web Designer)
Timeframe
2 Weeks
Aug 2024
Tool
Figma
WordPress
virtual care website
The Virtual Care website is a platform developed by the UBC Faculty of Medicine to support patients and caregivers in the evolving landscape of virtual health care. Designed to host educational podcasts and recruit participants, it fosters meaningful discussions and engagement, helping shape the future of health care delivery.
the problem
The original website design felt outdated, offered limited information, and lacked cohesive branding, which affected user engagement and brand perception. My goal was to create a modern, engaging layout that aligns with the brand and improves page usage, providing a more accessible and impactful experience for users.
site review and analysis
I began by conducting a comprehensive review of the original website, focusing on flow, visual appeal, and brand alignment. This analysis highlighted key areas for improvement, including an outdated design and limited information accessibility.
To inform my approach, I also reviewed competitor websites to identify industry standards and successful design elements. This provided benchmarks on visual style, user flow, and content structure, guiding the redesign to ensure it met both user needs and brand goals.
A collection of website designs analyzed to uncover and understand key design elements and styles used across different pages.
redesign process
After reviewing and doing competitive analysis, I identified key components of the original website that would benefit most from a redesign. Focusing on enhancing both functionality and aesthetics, I began reworking these elements to better align with user needs and brand objectives, creating a cohesive and engaging user experience.
Hero Section
The original layout consisted of three sections at the top: a banner image, a text section, and a smaller image with a text box.
In the redesigned layout, I consolidated the original three sections into a single hero section with a horizontal split. A full-width image, which aligns closely with the page's purpose and captures the essence of virtual care, occupies the left third of the screen. The remaining two-thirds feature a well-organized combination of text and titles, ensuring clear communication of key information.
To further enhance the design, I introduced a linear gradient background that creates visual depth and improves readability. This not only lends the page a contemporary and polished look but also effectively reduces the need for vertical scrolling, allowing users to consume information more efficiently.
Project Goal Section
In the original layout, the project goals were organized into 2x2 blocks, but the text appeared to float awkwardly, and the icons did not align with the organization's brand identity.
In the redesigned layout, I transformed the four floating sections into a horizontal card layout. This improves readability and visual hierarchy, allowing users to quickly grasp the key objectives at a glance. Additionally, the updated icons now reflect the organization’s branding more closely, creating a unified and professional appearance.
Podcast Section
In the original design of the podcast section, a diagonal line bisected the page, intended to create the illusion of continuity rather than indicating the end of the content. The album art was also small, and only a limited number of podcast episodes were displayed.
In the update, I replaced the diagonal line with a vertical gradient that aligns with the design language of the hero section above. This gradient creates a smoother visual transition and enhances the overall aesthetics of the page. Additionally, I increased the size of the album art to draw users' attention and ensured that all podcast episodes were displayed for easy access. This allows users to stay on the page and listen to any podcast episode they choose, improving user engagement.
Timeline Section
The previous design featured a vertical timeline to indicate project progression, but feedback indicated that this contributed to excessive scrolling. The content was limited, and the vertical space was disproportionate to the information presented.
To address this, I proposed creating a new visual in a horizontal format to reduce the amount of vertical scrolling on the page. The colors I used in the new visuals also align with the podcast album art. This approach decreases vertical scrolling and gives the page a more refreshed and engaging feel.
The process of redesigning the Virtual Care website was both challenging and rewarding. By creating a modern layout that prioritizes usability and engagement, we aimed to foster meaningful discussions about virtual health care.
Collaboration with the stakeholders was exceptional, particularly during my feedback sessions, where we leveraged each member's expertise in visual design, content strategy, and user experience. This teamwork not only made the redesign process fulfilling but also improved the outcomes, as we iterated on our ideas based on collective feedback.
Ultimately, this redesign expanded my understanding of effective web design. Addressing issues such as accessibility and information clarity became a driving force behind my design choices. I also learned to stay withing the brand guidelines while being playful and creative with certain design elements, such as the introduction of a cohesive hero section and a unified visual language throughout the site.
