The Pose® procedure is a weight loss operation that is performed endoscopically. Meaning it is done with specialized instruments that are passed through the esophagus and into the stomach. The procedure is incisionless and takes less than an hour to complete. No cuts are made in the abdomen and there is little downtime.
UX/UI DESIGN LEAD
As a UX/UI Designer for the Pose procedure responsive websites, I work with the stakeholders and content writer to design two highly usable websites for their users. The first process that helps me determine why this product needs two websites is the process of defining the personas.
Who are the personas? They are individuals who
1. tried weight loss before but is not successful
2. are suffering from major health issues due to their excessive obesity
3. are interested in weight loss to feel better and get a better quality of life
4. are physicians who are interested in practicing the procedure
Based on these personas, I can categorized them into two different groups—the patient and the physician—and both these groups need different content. The stakeholders initial plan is to design one website for both the physicians and potential patients. However, there are major usability issues with this approach.
And what are these usability issues?
1. Both the patients and physicians will have to use a site with information that are not relevant to them.
2. The main navigation is designed for potential patients for business reasons and therefore, the physicians will have to first go through the patient site before they can get to theirs.
3. The drop off rate will increase and this will decrease conversion.
Here is how the Pose procedure will help the users solve their problems.
As a patient, I want to . . .
1. have a weight loss procedure that is lasting and works, so that I don't have to keep on trying
2. have a good quality of life, so that even when I want to have a steak and pasta every now and then, I won't pack on the weight
3. be healthy and fit, so that I can run, hike, climb and do the things most healthy people can do
4. be able to find the physicians so that I can have the procedure
5. easily get assistance so that when I have questions about the procedure, I'll be able to get a response
6. know that it's safe so that I can continue to live a fulfilling life after having the procedure
7. know that I will have experts I can rely on after the procedure so that even when I have concerns, I will be in good hands
As a physician, I want to . . .
1. know whether I am qualified to practice, so that I can sign up to be a Pose procedure physician
2. know whether there are any courses and tests that I need to take, so that I can become a Pose procedure physician
3. be able to contact USGI Medical, so that if I have questions, someone can will be able to assist me
4. know how many Pose pocedure have been completed to-date, so that I know it's worth my investment
5. know the procedure is effective and safe so that I can ensure the safety and quality to my patients
STYLE GUIDE AND PATTERN LIBRARY
One of the necessary process in web design is creating the style guide and pattern library. I find the most efficient way to approach this process is define the most important component first.
1. Select a web safe font that is efficient in real estate
2. Select a CTA color that will convert well
3. Choose primary and secondary colors that will be used throughout the site
4. Choose the text and headings
5. Create the overall visual design of icons
6. Define the visual mood
7. Navigation treatment—unselected, hover and selected states
Before adding in the visual design of the websites, I first created the wireframes for them.
The pattern library help increase usability. One of my go-to interaction design is on demand content.
The Pose procedure website allows the user to submit their personal experience with the Pose procedure. For this experience, I designed an email form and give them the ability to upload their photos that document their journey. In addition, I also have to predict and design for the different scenarios on how they will interact with the UI.
— These are the error messages that appear when the uploaded images don't meet the criteria —
— how the UI will scale when the user write their story —
— how the UI will scale when the user upload images —
here are more projects you might be interested in