IntellaHealth Web Design

It was a project I did at IntellaSphere. I designed the whole IntellaHealth website that introduces IH's marketing services to healthcare practitioners and converts them to potential customers.






Overview



There are many healthcare practitioners in the U.S. running their practices. However most of them haven't built a good online brand and didn't do well with digital marketing. Therefore, IntellaSphere came up with the marketing services for healthcare practitioners. My task was to design a website to introduce IntellaHealth and its marketing services to healthcare practitioners.



Quick Facts

My Roles: UX/UI Designer
Being the only designer on the team, I got to work with stakeholders and a remote developer frequently, discussing user needs, business requirements, and refining my design constantly.
• Design the whole website in one week
• Define the problem and goal
• Create wireframes, mockups and high-fidelity interfaces on Sketch 3
• Logo, icon design, color palette
• Collaborate with the remote developer who is in India by email and Zeplin, as well as making interactive prototype on Principle.

Team:
Bruce Worrall | CEO
Chandra Reddy Muttani | Developer
Kristine Grace | Healthcare Practitioner

Time:Jul. - Aug. 2016 (1 week for design, 2 weeks for develop)

Deliverables:
Have a look at IntellaHealth Website


PROCESS

Design process

DEFINE

Documents: Read documents provided by CEO and discussed with him to understand his expectations and business requirements.
Interview: Discussed with the project leader who works with healthcare practitioners to understand the features and their pain points.
Competitive analysis: Researched online to learn more about the current situation from other similar website and healthcare practitioners’ websites.


Learning insights

How will the website help healthcare practitioners and reach IntellaHealth business requirements:

Healthcare practitioners could easily get the information about the services on this website quickly, compare different price plans easily and then contact us on this website.

DESIGN

Wireframes:

I sketched the wireframe of several websites to learn more about healthcare marketing websites and figure out some patterns that could be referred. Then I started with a quick and dirty sketch of IntellaHealth website, and discussed with my boss. We iterated several times for the content priority and settled down with one.
I changed the sketch into a wireframe with the content on it by using Sketch.

Wireframes

Mockups:

I made the first version of a mid-fidelity mockup for the homepage, and sent it to the CEO and the surgeon (the project leader) to gather more opinions. I got feedback mainly about the theme color and images. They liked the arrangement of the marketing services, so I could dive into icon design in the next round.

Before diving into the hi-fi interface design, I rethought the arrangement of contact form, which I felt was not quire right yet. My boss originally suggested to put the contact form on the bottom of every page, and also have a separate page for it. But there are two problems with the function of the contact feature and its placement: 1) Users can’t explicitly get any contact information from Contact Us page. They can only leave a message. 2) The form is on the bottom of the page, which is easy to be ignored. Why do we need to put the form everywhere? After discussing with my Boss, I noticed his reasoning was that visitors could contact us easier from anywhere, because that’s the CTA. Therefore, I came up with other design for the CTA in the hi-fidelity mockup on the right.

Mockup

Collaborate with a remote developer - Zeplin & Prototype in Principle & Notes:

Zeplin

I uploaded the final version of the mockup on Zeplin to share with the developer, and meanwhile worked on making some animations to show the interaction of the "Contact Us" button and the "Services" section.

Specs


Principle

Prototype animation for the interaction of the Contact Us feature

Highlights:
1) Using a button on the top instead of a form on the bottom.
2) Micro interactions and the design of cards and mail.
3) CTA.

prototype

Principle

Prototype animation for the interaction of the "Services" section

Highlights:
1) Arranging all the services into a dynamic box rather than introduce each service on separate pages.
2) Supported by the CEO and the project leader.

prototype

Handmade Notes

Design for price plans

Highlights:
1) Displaying different plans by three cards with full contents.
2) Color modification of the 1st version.

prototype

REFINE

After the developer finished the implementation, I took screenshots and made notes for fine tuning.


Notes


Reflection
Trying different ways to reach effective communication
Got to understand why UX professionals regard communication as one of the most important skills to master. To successfully accomplish this project, I kept constantly communicating with the CEO from very beginning, and gradually with a doctor and a remote developer. I expressed my opinions and showed my design through email and in person, and clarified ambiguities to make sure I really understand the requirements. The most difficult part was communicating with the remote developer, especially for the design specifications. Zeplin helped a lot, but sometimes some details were neglected unless I sent a hand-made notes with explanations inside. Principle is also an effective tool that enabled me to make animations for interactions quickly, and further helped developer to understand my ideas. It's very normal that there might be a gap between my thoughts and reality, so ~ just take a deep breath, calm down and figure out a better way to communicate!



Thank you! ^___^