View More
Design

Dr. Sapna

Project Description: Personal website for Dr. Sapna Sriram, Co-Founder and CEO of Integra Health, a clinic in Downtown Toronto.

Members: Vitoria D.

My Role: Qualitative User Research, User Experience Design, User Interface Design

Tools Used:  Adobe XD, Photoshop, Illustrator, Miro, Canva, Webflow

Project Description

I was approached by Dr. Sapna while working in an administrative position at her clinic in Toronto, Integra Health Centre. She wanted to develop a personal website to showcase her professional accomplishments and help others achieve similar goals by showcasing her chiropractic and business tips. As a Chiropractic Doctor, she also wanted to help people improve their lifestyles by providing tools and exercises through her website.

Research and Planning

As it was a personal website/blog, the design needed to represent Dr. Sapna Sriram through its aesthetics and tone, so the research approach was a little different and done in two parts.

First, I needed to know Dr. Sapna well enough to represent her in the design. After that, I needed to learn who her target audience was. 

From there, my goal was to brainstorm and try to see new angles and methods to design the website. What would be the pros and cons for each section, feature, and colour?

The result that I landed on was to be elegant, reliable, have clear communication, and be professional. I decided to make a one-page website, using the soft yet bold Reddish Grey colour and the classic Roboto font style.

Design and Iterations

I started the low-fidelity prototype by hand and moved to Adobe XD to develop the mid and high-fidelity prototypes. Before finalizing the project in Webflow, I asked a few users to test the high-fi prototype, rate its usability and voice what could be improved.

For the final step, before publishing the website, another round of tests and iterations was made to ensure the website was responsive, usable and enjoyable. 

The final product was finalized in Webflow, showing the end-to-end user experience. Dr. Sapna’s website allows users to learn and be inspired by her. It showcases her professional career as a chiropractor, CEO, entrepreneur, and media personality.

For further work, we’re planning to add a feature where Dr. Sapna will share her favourite tools and items for a healthier and better lifestyle

Affinity Diagram

Brainstorm of colours and fonts

High Fidelity Prototype prior to being designed on Webflow

Final Design on Mobile and Desktop

Before and After of Dr. Sapna's website - Professional Highlights

As we needed to display a wide range of links and content for Dr. Sapna's Professional Highlights, I decided to remove the background image and keep it simple to maintain the user focused on her achievements. After removing the image, I started playing with my design options and decided that having a timeline-like display would be better than a drop-down option. 

Before and After of Dr. Sapna's website - Media and Opportunities

Media and Opportunities was a key section to be designed since Dr. Sapna often appears as a Special Guest in a handful of TV Programs. To better showcase all the appearances, I switch from a carrousel design to a three-row grid where a static image with a title and a small blurb would always be appearing on the screen, instead of only appearing when the user hovers over it.

Before and After of Dr. Sapna's website - Footer

To keep the consistency between the Integra Health website, Integra SkinLab, and Dr. Sapna’s personal website, I changed the footer to look like its siblings' website, only changing the colour. With that completed, all three websites are connected from within. 

Conclusion

The final product was finalized in Webflow, showing the end-to-end user experience. Dr. Sapna’s website allows users to learn and be inspired by her. It showcases her professional career as a chiropractor, CEO, entrepreneur, and media personality.

For further work, we’re planning to add a feature where Dr. Sapna will share her favourite tools and items for a healthier and better lifestyle

Projects

Don't lose focus, continue reading my case studies

Lets work together!

I look foward to hearing from you soon :)