Tandem Community Birth Center
Revitalized the Tandem Community Birth Center website, prioritizing the comfort of its users through a user-centric design
Role
UX/UI Designer
Timeline
August - December 2023
Team
Emma Kalvelage
Veronica Nguyen
Camile Tong
Tools
Figma, Wordpres
Overview
-
As an intern at the Laurie Burns McRobbie Serve IT Clinic, we focus on redesigning websites for nonprofit organizations.
-
Our client, Tandem Birth Community Center, has requested to reimagine their website to convey a brighter and more energetic feel.
-
We aim to enhance the user experience by making it easier and quicker for visitors to find the information they need.
Primary User
Before starting the redesign and addressing the client's requests, we first clarified the website's target users. Since this is a nonprofit organization, we identified three main user categories: nonprofit colleagues, potential donors, and parents.
Our team prioritizes a thorough understanding of our primary users in our quest to create a user-friendly website. While parents awaiting the birth of their baby are a significant audience, we recognize that potential users also include job seekers and donors. Our key realization during this process is the importance of an informative and searchable platform. This ensures that users, whether parents, job seekers, or donors, can easily navigate the website.
Competitive Analysis
A primary goal of our redesign effort was to infuse the Tandem Birth Center website with a brighter and more cheerful vibe, aligning with the client's vision. To achieve this, our team conducted a comprehensive competitive analysis, examining how other websites successfully convey a positive atmosphere.
Sitemap
In our website refinement, we moved the Board of Directors to the Team section and eliminated duplicate information in Services by categorizing content into six menus. We merged the Tandem and Community Calendars into one unified Tandem Calendar for simplicity. Sign Up and Archive Newsletter are now consolidated into a single page. Additionally, we merged “Donate” and “Fundraisers”, streamlining similar information for a clearer user experience on the Tandem Birth Center website.
Low-Fidelity Wireframe
Before delving into the WordPress development phase, we dedicated time to crafting Low-fi wireframes, with my focus encompassing the board of directors, staff, and calendar sections. One significant improvement involved addressing the poor readability inherent in the original narrow-column layout within the horizontal scroll view. To rectify this, I proposed the implementation of a card view, ensuring that each staff member's card, when clicked, seamlessly directs users to individualized descriptions and backgrounds.
Similarly, for the calendar functionality, I envisioned enhancing user experience by incorporating various viewing options such as list, monthly, and daily views. This approach aims to simplify and improve readability, with detailed event descriptions housed on their respective event pages, accessible to users with a single click.
Style Guide
Design
I opted for a card view for the Staff and Board of Directors page, departing from the original carousel layout where descriptions were placed beneath each photo. The shift to a card view was motivated by a desire to eliminate potential distractions, allowing readers to engage more seamlessly with the content. By clicking on an individual, users can now easily access and read the respective descriptions, ensuring a smoother and more focused reading experience.
In the revamped calendar functionality, users now have the flexibility to view events in a list, monthly, or daily format. Additionally, the integration of a search bar provides a quick and efficient way for users to locate specific events, contributing to an overall enhanced user experience in navigating the calendar section. Upon selecting an event, users are presented with a detailed description that includes essential information, such as location on Google Maps, and additional event specifics.