Coach On

Web Portal Prototype

Case Study

Project Background

I had the pleasure of working on the redesign of Onlife Health's Health Coach application. The existing site was not user-friendly and was developed by programmers without applying any user-centered design methods or design thinking. My job was to redesign the application to make it easier to use 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 a variety of tools, such as user stories, personas, user flow diagrams, wireframes, and prototypes to create an improved experience for the user. This included making changes to the design and functionality of the application.

Task and Mision

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


A questionnaire was created to start the discovery phase of the project. The previous findings indicated that the users (coaches) had difficulty understanding the current system, understanding the navigation, and finding the necessary information.The results of the questionnaire showed us that the users desired more features and functionalities that would improve their user experience. We asked open-ended questions about their experiences and how they would like to use the product. We discovered that the users wanted the product to be more user-friendly, and to have more capabilities for real-time data updates. We also found out that users wanted the medical notes to be fully integrated with the calendar and other applications. Furthermore, the users wanted an easier documentation-filling process. Also, we found out that the current system lacked clarity, accuracy, and consistency in terms of navigation and user experience. We also identified issues with the lack of intuitiveness in the system, slow loading times, and a lack of ability to customize the system to their needs. All of these findings were taken into consideration as we moved forward in our design process.


Persona: The Coach and Empathy Map

Johanna is an organized and detail-oriented individual who loves to stay informed with 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 a creative person who 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 to collaborate with people to achieve the best results, and she is always willing to share her knowledge and experience. She is a natural problem solver who is not afraid to take risks in order to achieve her goals.


Sketches: just ideas on a piece of paper

I then applied the same ideation process to create sketches of the other pages, such as the mission page and the case management page, so that I could explore the flow and structure of the project. I was able to get a better understanding of the project by mapping out the user journey with my initial sketches. 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 task flows and the most important features of the site. I also made sure to account for the different user types that the coach may interact with, such as members, employees, and other coaches. This allowed me to identify the most important pages and features that the coach would need to use, as well as the various steps and processes that they will need to go through. Lastly, I made sure that the sitemap was organized in such a way that the user won't get lost and can easily find the information they need.


The wireframes created were very effective in helping to clarify the new features and intuitive functionalities of the project. I organized the website's information architecture into a more visual format, and used the information collected and the developed site map to help create the main screens. I began by making the wireframes for the desktop version, and then I created a responsive version for tablet devices. Through the use of wireframes, I was able to effectively communicate the project's structure and design to the team. See the online clickable prototype

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