Design a Product Landing Website for Estrovera
My summer at Trackmind in 2017 was one of my very first opportunities working as a full-time User Experience Designer. Trackmind is a digital agency based in NJ that works with several different clients around the world. I was extremely excited and eager to get started. Originally, I did not understand the design process quite as well as I do now. Some of the deliverables here I created informally during my time at Trackmind. However I have refined my work and wrote this case study to completion.
During my summer at Trackmind I was tasked with designing a landing website for a Healthcare client’s product, Estrovera. Estrovera was a product that was focused on menopause relief for middle aged women. This was the first of a series of supplements from their new product line they plan to create websites for. I went through the entire design thinking process from concept all the way to full clickable prototype before handing it to the creative director to make high fidelity designs.
The first step I needed to take was to speak with the client in order to gather the users needs and understand exactly what problem I am solving. Who would be using this website and for what different use cases? Were there multiple types of users? After speaking back and forth with the client I came to the conclusion there would be two different types of users who would use this website. The two users were patients and healthcare practitioners. The next step would be to create customer personas and journeys for each stakeholder to gain empathy and understand what specific problem I would be solving for each of them.
Stakeholder #1: Patient
Since I did not have direct access to users, I primarily had to rely on working with the client and doing research in order to better understand who the user is. I’ve listed the following details below based on my findings. Some questions I asked and researched included: What information does a patient need in order to make a decision on whether or not they want to purchase a menopause relief product? Why would a patient go on a website about a supplement? What is the experience like on other competitors for similar products? How does the user arrive on this website? Some traits about the typical user who would be on this website? Here are some of the findings:
- Users will be primarily women aged between 40–60.
- Women will likely have suffered from menopause/hot flashes in the past and are looking for relief
- Returning client customers may have came across this product and are interested.
- A new customer who has never heard of the client company may come across this and is interested.
- The user will need to be as informed as possible before making a decision. They will need testimonials, science, and overall credibility.
- The user is not particularly tech savvy, and the website will be outside of client’s domain.
- The user must have an easy way to take the next step to get started with the product.
Stakeholder #2: Healthcare Practitioner
The other user would be a Healthcare Practitioner. The healthcare practitioner’s primary goals would include finding out the credibility of the product. They need to make sure the product will work for the patient and their specific needs. The website needs to provide the right content to give a informed decision on whether they would like to take next steps. Many of these practitioners could be new doctors who have not been exposed to the client companys’ products, or they could be returning customers looking into working with a new product. In either case, the next step this type of user would take is requesting a sample.
Customer Journeys
I mapped out journeys of how both types of users could be introduced to the product and how they would use it.
Journey for Patient
The journey begins with the patient having tense symptoms of menopause and researching online for relief. They then come across this product called Estrovera on the client company website. They have never heard of it but are interested. They click to get more information. Next the product website appears and they are instantly hooked, they go through the testimonials and benefits and find that it is a great product and proven effective. She wants to get started. She immediately clicks get started and picks that she is an existing client customer. She then gets the right information and contacts her practitioner.
Journey for Practitioner
A practitioner is told about this product from one of his/her patients and wants to find out more information. They google search the product Estrovera and come across the supplement page on the product. They are interested but need additional information. The practitioner clicks the additional information link and it goes to a product website. The product website looks appealing but they are much more interested in the credibility and effectiveness of the product. There is a separate section for the Healthcare practitioner to go through. It includes benefits, science, and testimonials from both patients and other practitioners. They find it interesting but are not ready to commit, but would like to give the product a try. So they hit request sample and fill out the form. After trying out the product they realize how great it is and would like to provide the opportunity for patients that they are certain would benefit. They go back to the website to sign up for the product and get affiliated with the client company. A code is then given to the patient to use in order to directly purchase the product. They feel safe and secure with the product and know there is a customer representative they can speak with in case of any problems.
Sitemap
Before getting into the wireframes, I took what I learned from the user journey and created some sitemaps on how I expect the user to interact with the product website. It was important that there was a separate section for Practitioners as they are looking for more in-depth information in comparison to the patient. After the user had scrolled through some of the information to learn more about the product, they need an easy way to take next steps. This was where the getting started experience comes into play for both types of stakeholders. The user would start with selecting whether they were a patient or practitioner, then proceed to if they had an account with the client company. I would work back and forth with the client to ensure that I have the correct experience.
Another Customer Journey: E-commerce Solution
The two main journeys are the practitioner getting affiliated and requesting a sample, and the patient getting the right information and speaking with the practitioner about next steps. However, If the practitioner and patient are already affiliated with the product, the website can also be used as an eccomerce solution that directly connects to a practitioner store setup via the client website. Once the patient and practitioner have become affiliated, the patient will receive a code that will then be used to purchase Estrovera from the practitioner store. This experience has been consistent across different product websites the client company has had. So it was important to keep a similar experience. The patient can type in the code from multiple touch points including the getting started flow and from the homepage directly.
Sketches & Wireframes
Next, I created some low fidelity sketches to get an understanding of the Information Architecture and overall layout of the UI. The website is simple by design and will be intended to provide an emotional experience. The language used in the website will be very in tune with relief of menopause and will give practitioners and patients a sense of hope and trust in the product. It was important that both users understood what information they should be looking into based on which stakeholder they are. Also there should be a next actionable step for either the patient, which would be to get started with the product, or the practitioner, which would be to request a sample and/or sign up to be affiliated with the product.
Now I have enough information to get into more detailed wireframes. Here are a few wireframes I made. I did competitive research to see how other websites that sell supplements were designed. I also worked with a Content Writer on the client company’s team to ensure that we had the right language that gave the emotional impact on the users. The users are coming to this website stressed, tense, but hopeful. I need to design an experience that makes the users feel relieved now that they have found this product and they are excited to try it.
Final Prototype
The next step was to create a full prototype for the client to review. The prototype would walk through the customer journey a practitioner would take and the customer journey a patient would take. This is to ensure that the experience was correctly designed and aligns with what the client wants before going into high fidelity designs. I went through several iterations of the prototype and wireframes and here is the final prototype. This prototype includes all the different pages within the website as well as the getting started flow.
Mobile Responsive Version
I created a mobile responsive version. It is expected a percentage of the users will be on their phone when viewing this website.
Creating Functional Document and Final Steps
The last step before slicing the website and handing it off to the creative director was to create a functional document. This was so the developers would have an easy understanding of what each function on a page does and where it goes to. I created the document in word using a table and shared it with the developers.
Now that the designs and experience have been validated, it was time to get into high fidelity designs. From there, I handed off the project to the creative director. I exported all my sketch files into PSD which is what our programmers and Creative Director are most familiar with. I assisted the Creative Director in creating mood boards, color palettes, and choosing the right images that provoked positive emotions.
Final Live Designs
Update: Website is live. It initially had the get started flow but it has been taken off recently. I’m unsure as to why since I have been off the project for a while. Check out the live website here.
Final Thoughts
This project was some great experience for me. It was an interesting challenge to see how I can gather stakeholder data without actually having direct access to users. I have also gained knowledge in the domain of menopause relief and feel I can be more empathetic with patients and practitioners.
