B

For phase 20, Live Well was tasked with creating an exclusive, responsive micro-site to showcase the portfolio of innovative projects created to improve the cancer patient’s journey for medical center leadership teams, cancer care colleagues, and philanthropists.

The existing format to showcase the projects done over the years are multiple powerpoint presentations and folders which are large, ineffective and end up being time consuming to review to understand the breadth of work done. The creation of a microsite would help CBDI and Live Well to showcase the work done in a succinct way that is easy to navigate.

Highlight Collaborative Partnership: Since 2015, CBDI has partnered with Live Well to research opportunities, design outcomes and envision an ideal patient and family experience that could serve as the model of care across Cincinnati Children’s.

Comprehensive Overview: Synthesize portfolio of key projects to showcase what the project entailed in an easy to understand and digestible way. The intended purpose is to provide a high level overview of work and breadth of projects done.

Responsive and Accessible: Allows users to interact and engage with the microsite across different devices without being inconvenienced. Taking into account accessible web practices to ensure content adheres to that.

Project Scope: Co-creation activity to better understand the purpose of the microsite, primary and secondary users, how people would access it and what kind of information should be showcased for each featured project.

Benchmarking + Reviewing Materials: Researched existing websites that have a portfolio of projects and case studies to benchmark and gain inspiration for the CBDI microsite. This helped understand how visual storytelling was used to showcase projects and how we can aim to convey that, as well as the different components to be included for each project page.

Information Architecture: With information gathered from the kick-off activity, reviewing materials of past projects and benchmarking, an information architecture was created to understand structure of pages and content would be organized

Wireframing: The initial ideationed involved 15 concept sketches that explored different layouts and ways to display information for the key pages of the microsite. These sketches were translated into digital wireframes after narrowing them down to the top 3 ideas. In the digital wireframing phase placeholder content was added to get a better idea of how information would look, and the team ideated on portions of each layout to add variation to the flow of the page.

Concept Revisions + Prototyping: The final concept was chosen because of the effective storytelling, dynamic layout, and adaptability. With this final concept the content for the ADL 123 device project was added and the team began to design the additional pages and link everything in Figma to create a workable prototype.

Content Collection + Creation : Additional graphics and mockups were created for each project as needed. This included highlighting the key process moments within each project and visualizing the final outcomes depending on the usage scenario.

Development: After the prototype was built and received approval the team worked on developing the microsite in Webflow. The template created for the ADL 123 Device project was used for the remainder of the project pages. Based on the structure of the project pages, layouts for the home and about pages were made. For the home page, three milestones from the cancer patient journey were identified to categorize the projects into. The team handled the entire development of the microsite for the pages, making it responsive, adding micro interactions, and getting it tested for launch.

View live CBDI Microsite here

Todd Timney (Faculty Advisor, DAAP)
Babaljit Kaur (UX/UI Design Research Fellow, Project Lead)
Abbie Howell (UX/UI Design Research Co-op)

My Role & Responsibilities:
• Leading calls with clients for kick-off, receiving feedback and presentations • Identifying opportunity areas for microsite and content to present
• Secondary research and benchmarking of similar microsites
• Creating wireframes and infromation architecture
• Designing interfaces, user testing and prototyping
• Content creation, copywriting and creating mockups for projects
• Development of responsive microsite in Webflow