top of page

OPIONATO

CONCEPT CLIENT PORTAL DESIGN

" In the USA, 1 in 8 couples (or 12% of married women) have trouble getting pregnant or sustaining a pregnancy. "

Opionato is an independent fertility guidance service, focussed on providing unbiased, authoritative and affordable advice suiting their client's personal needs.

PROMPT:

Create an experience to enable direct communication & efficient exchange of Medical Records between Opionato and their clients.

1. Service Home Page_macbookpro15_front.
Project details
  • Duration:  2 Weeks

  • Platforms: Responsive Web Platform

  • Team:  Noopur Shreyas (Design Lead); Angelica Pimentel (Project Manager) & Barbara Suroż (Research Lead)

  • My Role:  Created Site Maps, Sketching Wireframes, Creating Digital Wireframes, Content Strategy, UI/Visual Design.

  • Tools:   Sketch(Digital Wireframes) & Invision (Interactive Prototype)

  • Deliverable:   High-Fidelity Interactive Prototype & Assets

ChallEnges

With the constraint of 2 weeks, while there were many opportunities for us to help Opionato but with the help of our research we zeroed down on one challenge -

" How could we help improve the communication exchange between Opionato and the aspiring parent? "

Solution

It took us a little while to figure out the solution. We have to find the best way to address the maximum number of pain points that came up during our research and how to integrate it into the existing ecosystem of their website. The solution we came up with- ​

" Designing an online client portal that enhances the relationship between aspiring parents and Opionato. "

Case StudY

Research

" Understanding how much infertility can impact your life can help you make better decisions about when you start and how you go about it."

 

Infertility may be a global public health issue but still very rare for people to talk about it. Because of the complex uniqueness of this problem my team and I have to understand the Issue, Opionato, and their clients sincerely. Their needs, expectations and pain points. Therefore the Research was divided into three parts: 

             

  • What did Opionato say?

  • What did the Clients say?

  • What did we hear?

What did Opionato Say?

IMG_6072-2.jpg
​Opionato's Interview Insights (Opinato Team)
  • Opionato wanted one central place for people's fertility guidance and second opinions. 

  • Have 3 target clients (Early consultation; Trying to conceive  & Second opinions/Infertility Treatment Consultations)

  • Want 4 Online Portals for 4 different Users ( Clients, Opionato staff, Opinato Medical Experts and External Medical Experts.)

  • Build a support network

  • Subscription services and Package Options

What did WE HEAR?

Key Insights from Research

  • Mapped out the tentative user journey with Opionato, to understand all the steps involved in the process

  • Mapped out the User journeys of all the three users, to understand their specific pain points

  • The collection of intersecting pain points of Opionato & Clients regarding Opionato's service.

nishi-interview-affinitymap-2.jpg

What did the clients say?

IMG_7373-2.jpg
Client's Interview Insights (3 Clients)
  • Opionato service was quick, informative, affordable and catered to my individual medical case

  • We're confused about the difference between the two services offered by Opionato

  •  The uploading of the medical questionnaire and past medical record as very tedious and unorganized

  • The report can have more information

  • Clients wish to have an in and out service, not so interested in the support network.

COMPETITIVE ANALYSIS

My team and I did the competitive analysis of other Fertility consultant services that had websites to inform and provide medical guidance to the patients/clients. We discovered that there were various areas where Opionato is doing better than competitors. But it lacked the one thing all the competitors had "An Online Patient/Client Portal".

Therefore we decided to design the Portal addressing all the pain points of the clients and Opionato. Specifically, we made the answering of Medical Questionnaire and Uploading Past Medical Records efficient.

CA.jpg

persona

Through our conversations with Opionato and Research, we figured out we have 3 target users - Early Consultation (early planners); Trying to conceive (optimizing chances of conceiving naturally) &  Second Opinions (infertility treatment options). 

Having a limited time of 2 weeks, we focussed our Persona on the 3rd type of user - Second Opinions, i.e., the couple who knows they have infertility issues and want to know their available options unbiased.

persona.jpg

user flow/service design blueprint

Opionato offers two different services. Concentrating on the Online Client Portal, we designed the entire service blueprint of a User opting for the Comprehensive service to understand how and where to integrate it.

Screen Shot 2017-06-08 at 1.38.57 PM.png

initial sketches

Now that all the research and critical insights were in place, it was time to get to the canvas.

Began our design process, by all three of us making some quick conceptual sketches. We as a team discussed all the concepts we came up with separately, then unanimously agreeing on the best ones helping us to set a clear vision to move ahead with. 

Wireframing

The way I chose to lead the design is by doing "First Round of Digital Wireframing and testing it."

We conducted usability tests on the initial wireframes with our mentors, classmates, and random people. We gave them a prompt and asked them to walk us through their experience. Soon after the first round of design & test, I iterated based on the usability feedback. Also, we repeated the process of Design, Test & Iterate a couple of times until the final presentation.

 

Below are some of those iterations with the reasons supporting them.

Service page

Problem - As per the Research, the Service page seemed a little vague because the users couldn't differentiate between the services. Moreover, for many, it was an issue which service best suits their case.


Solution - Created and integrated a Survey to assist the Users in deciding the service best for them. Arranged the services side by side, transformed information in bullet points form and added the call to action buttons for users to make an informed and quick booking. Eliminated the unnecessary things to make it clean and simple.  

"I don't really understand the difference between the services." 

"I find many things in the Nav bar are repetitive & the heading seems out of context." 

"Choose doesn't seem like the right call to action for here. Are there more steps?"

"I'm not sure if it's right to assume I don't know what service to choose & need to take the survey."

Screen Shot 2017-06-08 at 4.49.12 PM.png

Existing service page

V 2 - Service Home Page.png

1st Iteration

V3 - Service Home Page.jpg

Final Proposed Design

Service recommendation

Problem  - The Recommendation didn't stand out the users in the user testing, and it felt compelling.  


Solution - Removed the label, highlighted the recommendation and added a help text at the bottom for users to feel free to make a choice.

" Make the recommended side more evident through the use of color and “pop.” "

V1. Recomended Service Page.jpg

1st Iteration

4. Recommended Service Page.png

Final Proposed Design

client's dashboard

Problem  - The client dashboard is where users land after logging in/ sign up. It didn't make sense for them that their panel menu replaced the Main Navigation Menu.   


Solution - Introduced a Drop-down for panel menu from the Main Navigation Menu.

" My Dashboard Menu (i.e., Medical Records, Messages, etc.) should follow underneath the Main Navigation tab as the use of “breadcrumbs.” "

V1. My Dashboard page.jpg

1st Iteration

V2. Welcome Mail page.jpg

Final Proposed Design

medical records page

Problem  - Opinato needs to be provided with two major types of document. It was difficult figuring out an efficient way to do that. 
Solution - To design a more obvious flow, added the Medical Questionnaire to be answered online and laid down all the steps with help texts right there to keep the user informed of what are all the steps and the process involved at that step. 

" Where do I upload the documents? "

" What do you mean by Questionnaire? I'm not sure what am I supposed to upload where? "

" If I'm uploading documents on the left, what are these buttons for? "

V1. Medical Records.jpg

1st Itereration

V2. Medical Records.jpg

2nd Iteration

V3. Take medical Questionairre.jpg

Final Proposed Design

Next steps

If I had got more time, below is the things I would like to focus my attention to:

  • Redesign the Homepage, The homepage is very text heavy and has some repetitive stuff. We advised Opionato too, and they are making slow, steady changes according to our advice.

  • Design the other three online portals,  Portals for Opionato staff, Opinato Medical Experts, and External Medical Experts because it's essential for them to be efficient and grow.

  • Opionato Mobile App, because mobile is the future. 

Screen Shot 2017-06-10 at 10.43.15 AM_ip
Anchor 1

All the Screens

Here are all the screens that were created to make this an app a holistic experience.

1. Service Home Page.png
2. Survey pop-up.png
3. Filled out Survey pop-up.png
4. Recommended Service Page.png
5. Sign up page.png
6. Filled out Sign up page.png
7. Payment .png
8. Filled out Payment .png
9. Payment confirmation .png
10. My Dashboard landing.png
11. Welcome Mail page.png
12. Take medical Questionairre.png
13. selecting Female Q's.png
14. Female Q's 1.png
15. Female Q's 1 - answered.png
16. Female Q's 2.png
17.  Female Q's answered.png
18. Female Q's 3.png
19. Partner questionairre.png
20. Medical records page.png
21. Adding Medical Records.png
22. Uploaded Medical Records.png
23. Appointments Page.png
24. Filled - Appointments details.png
25. 1st Appointment.png
26. Reminder - 1st Appointment.png
27. 1st appointment summary .png
28. 2nd appointment confirmation.png
29. 2nd appointment reminder.png
30. The Final report.png
31. The Feedback email.png
32. Feedback Survey.png
33. Feedback Survey - part 2.png
bottom of page