Coach On

Web Portal Prototype

Case Study

Project Background

I had the pleasure of working on redesigning Onlife Health's Health Coach application. The existing site could have been more user-friendly and was developed by programmers without applying user-centered design or design thinking methodologies. My job was to redesign the application to make it easier and more intuitive for the user. To do this, I conducted extensive user research to understand the needs of the users and the problems they faced with the existing application. I then used tools like user stories, personas, user flow diagrams, wireframes, and prototypes to improve the experience that was in accord with the original intent. This included making changes to the design and the application's overall functionality.

Task and Mision

My main goal to start transforming this site was to create an intuitive and user-friendly interface to help coaches and their clients better manage their health and fitness data inputs. The proposed design solution included a responsive interface that was easier to use with efficient medical notes functionalities, calendar integration with the required medical notes and appointment features, improved and better methods of communication between coaches and their clients, and a coach management interface for system admin users to monitor their coaches under their responsibilities. I worked closely with stakeholders, developers, and coaches' managers to ensure the application met these requirements.


A questionnaire was created to start the project's discovery phase, and it was distributed to several coaches. Therefore, we asked open-ended questions about their experiences and how they would like to use the product better. This questionnaire allowed me to confirm previous findings that indicated the need for the users to understand the complex functionalities to effectively monitor different programs and services provided within the site, the lack of intuitive and better navigation, and also need for a search functionality to find the necessary information required to effectively create a health program with monitoring capabilities. The questionnaire results showed that the users desired all the changes mentioned to use the app and enhance productivity. We also discovered that the users wanted more real-time data update capabilities. We also found that users want to see the medical notes fully integrated with the calendar and work with other 3rd-party applications. Furthermore, the users wanted a more straightforward documentation-filling process. Also, we discovered that the current system needed more clarity, accuracy, and consistency regarding navigation and user experience. We also identified issues with the need for intuitiveness in the design, slow loading times, and more ability to customize the system to the users' needs. These findings were considered as we moved forward in our design process.


Persona: The Coach and Empathy Map Samples

Johanna was one of the personas created to represent the type of coach that used the Coach-on site. She is an organized and detail-oriented individual who loves to stay informed about the latest trends in the medical field. She is tech-savvy and uses her knowledge to keep her clients informed and up to date. She is creative and likes to explore new ideas and approaches while helping her clients. Johanna is a motivated and enthusiastic learner who is always eager to learn new skills and techniques. She loves collaborating with people to achieve the best results and is always willing to share her knowledge and experience. She is a natural problem solver, unafraid to take risks to achieve her goals.


Sketches: just ideas on a piece of paper

I usually draw sketches to start the ideation process of creating the different functionalities required or expected to be improved, such as the mission page and the case management page shown below, so that I could explore the new flow of information architecture needed for the project. As a result, this gave me a better understanding of the project and helped me map out the user journey and later use these sketches to create the sitemap. I also used the sketches to identify any potential issues with the design and user experience, allowing me to quickly iterate on any changes that needed to be made.


I kept the sitemap simple and clean, focusing on the functionality flows and the most essential features of the site. These gave me the visual information architecture to visualize all the accounts and user types that use the site. And also allowed me to identify the most important pages and features needed to design the procedures and other processes used by the coaches to work and helped me to identify any interacting flow between user types.


Finally, I used the site map to help create the wireframes of the site's main sections, which were later drilled down to other smaller units within each main area. The wireframes created were very effective in helping clarify the project's new features and intuitive functionalities. In addition, the wireframes were designed as a visual tool to present the overall functionalities of the design to the stakeholders for comments and approvals, which was an effective way to communicate the project's requirements.

Home Page (Dashboard)
Member List (Case Load)
Member Detail Page
Member Detail / Action Code Page

See a full version of the working prototype done using Adobe XD:

See Coach-on Prototype