Landing Page & Web App
PTPROS wants to provide users with less severe physical issues or injuries affordable advice and guidance from the best licensed Physical Therapists (PT) in the US, avoid the hassle of finding a reputable PT, and allow the convenience of treatments without users having to go to an onsite facility.
Working with an web development agency, I was brought on this project to work on the UI/UX design. The client and my team had a brief discussion about product requirements. My role was putting together the layout and design.
Create an online mobile friendly platform allowing users speak with a licensed therapist. Users will receive personal advice through live chat or a custom home exercise program.
Brainstorming and Planning
After I went through research and competitive analysis, I brainstormed and made several sketches on how I planned to lay everything out. Once I reached a point where I felt ready to move forward, I created wireframes for a cleaner and clearer representation of my design solutions to present to the team and client before going hi-fidelity.
I went through several iterations when I was working on the main dashboard screen before reaching a solution I was happy with (The thrid design). Below are some examples of my previous designs.
I chose to go with this presentation for the dashboard to allow the user to get a quick overview of their therapy session. Below is my thought process on how I reached my decisions.
- Main Dashboard: Once the user had submitted their question, the assigned Physical Therapist will put together a schedule with assigned exercises. The goal was to make the home dashboard simple and straight forward. I did this by featuring the more important elements on the page that the user would be using the most.
- Video Player: I chose to make the video player the most prominent and at the top because it is one of the most important features on the dashboard and will be used the most.
- Individual Treatment Session Breakdown: This was made as the second most prominent portion of the main dashboard. I added a treatment session breakdown underneath so that patient can see their entire treatment schedule and know how long each session will take. This approach allows the user to plan out their day/week accordingly. Originally I had put a calendar in the sidebar to show what days each session would be on. After revising, I didn’t think it’s use was obvious enough in addition to the fact that it would take too many clicks to use, so I removed it.
- Progress: I added a progress meter to the side as a widget for the user to be able to quickly glance and check their progress for a sense of accomplishment.
User Account Page
The patient’s profile will be one of the first screens they will be directed to after creating their account. The goal was to use it as part of the onboarding process. It includes an intake form asking specific questions to understand the users medical history. Once everything is filled out to completion, the user will be able to speak to a physical therapist.
- Profile Completion Progress Bar: Shows the user what areas are necessary to complete by looking at what areas have and don’t have a check next to them. Once completed they will be prompted to ask their question which will then be reviewed by a PT as part of the onboarding process.
- Add credits option: I Added an “Add Credits” option here as well. This is where the add credits button on the messages page would link to.
Before being treated, the user has the opportunity to discuss with their physical therapist any further details necessary. This is also an opportunity for the therapist to ask further questions to proper diagnose and customize the patients tutorials and lesson plan.
- Instant Messaging: Because the chat section is the most important interaction on the page, I made it take up most of the space.
- Doctors Profile: I placed a profile widget on the side that features a brief overview of the doctors information and rating so users will be able to view that quickly. However, if a user is curious to learn more about their Physical Therapist they have the option to view their profile for additional credibility purposes.
- Credits Widget: Users are able to chat with their assigned Physical Therapist through the use of credits. I added the ability to add credits to this page for easy access since this is the specific area in which they are used.
Working on this product was interesting to me, especially since it was my first app design project. Before reaching a solution I was happy with, many rounds of redesigns took place. I found that within each round I ended up removing things instead of adding more. As a result, this made the layout much more simple, clean, and got rid of unnecessary distractions .
During my process, I also found new ways to improve my thinking. The first time around I had only been researching basically only online products within the medical field. It hadn’t occurred to me until a later round that since this platform was also an instructional/tutorial platform. After this realization, I was able to take the design in another direction and began doing a competitive analysis for similar services in the coaching and teaching industries as well. It really helped when I started to think about app features and the industries that include them, instead of just thinking of industry specific applications.