Skills Mobile App Design
Designing a user-friendly, accessible, and efficient digital solution for managing clinical skills during rotations.
— ROLE
UI/UX Designer— CLIENT
EDU Medical School— PRODUCT
Skills Catalogue Mobile AppContext
Designing a user-friendly, accessible, and efficient digital solution for managing clinical skills during rotations.
Clinical Rotation is a 4-week period in each module where students receive practical studies in various partner hospitals while on their studies at EDU Medical.
Problem
EDU wants to transform the paper-based clinical skills catalog into a digital app to reduce the burden on students, hospitals and EDU.
User Stories
As a student, I want to see which skills I’ve already been tested for, in an overview,
As a student, I want to be able to search for the skill I want to add from the list, and filter by module,
As a student, I should be able to enter; the date, the role and the supervisor name for each skill,
As a student, I should be able to add new supervisor with the name and email address info if the supervisor is not in the list,
As a supervisor, I should be able to sign off the skill and receive an email confirming the signature.
Research & Understand Requirements
To create a meaningful digital solution, I first identified the stakeholders: students, supervisors, and EDU administrators. Students need a quick way to track their clinical skills progress and find pending tasks.
Supervisors require a seamless process for reviewing and signing off skills, while EDU seeks a secure and centralized platform to manage student progress.
Given the sensitivity of medical data, ensuring GDPR compliance and building a mobile-first interface were key constraints.
Define Features & Functionality
The app’s primary features include a skills overview dashboard that uses progress bars or checklists to help students visualize their progress, and a skill entry form where they can input the date, role, and supervisor’s name. Additionally, the system allows students to search for specific skills and filter results by module or text.
To simplify the supervisor’s experience, a straightforward sign-off process was designed, complete with secure digital signature integration and automatic email confirmations. If a supervisor is not pre-listed, students can easily add their name and email using a clean, intuitive form.
Secondary features such as offline mode, multilingual support, and a notification system for pending approvals were also considered to enhance usability.
Ideation & Wireframing
Initial ideation focused on creating low-fidelity wireframes to visualize the user flow. For instance, the skills overview section was drafted as a dashboard with filters for date and skill type. The skill entry form included dropdowns for selecting roles and an "add new supervisor" button. A simple digital signature pad was included in the supervisor’s flow for signing off skills.
Mapping out the user journey, I prioritized simplicity: students locate a skill, fill in details, and submit for approval, while supervisors receive an email, review the entry, and confirm with a signature.
User FlowThe wireframing stage helped clarify the app’s functionality and ensured the design team was aligned on user needs before investing time in high-fidelity designs or development. It also reduced the risk of costly changes by identifying potential pain points early.
User Interface Design
The app uses a calming, professional palette of green and blue tones, as seen in the final designs. This color scheme instills trust and aligns with the healthcare context. The interface’s typography is clear and readable, ensuring accessibility for users with diverse backgrounds. Icons and spacing guide users effectively without cluttering the interface.
Specific design decisions, such as large call-to-action buttons and well-defined input fields, prioritize usability. For example, the signature pad is easily accessible, and buttons like "Save" and "Submit" are placed intuitively at the bottom for thumb-reach optimization on mobile devices.
High-Fidelity Prototyping & Usability Testing
To validate the design, we arranged usability testing rounds with the stakeholders .
Key scenarios included:
Adding a new skill,
Inputting supervisor details,
Signing off skills.
Test the prototypeApp Store Preparations
Icon Design
The app icon is the app’s main image and was designed to be simple, professional, and easy to recognize. The goal was to represent the app’s features while making sure the icon looks good on all devices.
The design process started by exploring symbols related to healthcare, such as a checklist, stethoscope, or signature. Different ideas were tested using EDU’s color palette to ensure brand consistency. After several changes, a clean checklist icon with a blue-green background was chosen to represent progress and completion. Soft gradients were added for a little depth, while keeping the icon simple.
Proposed App IconsApp Store Visual Creation
The cover visuals were made to show the app's main features and functions. Screenshots of important tasks, like the skills dashboard and supervisor signature screens were selected to highlight the app’s value.
These screenshots were placed on polished device mockups, with action-driven phrases like “View, Filter and collect your medical skills digitally.” and “Have your skills signed while on the hospital floor.”
A soft, professional color scheme was used to match the expectations of the medical industry. Variations were created for both mobile and tablet App Store displays, ensuring they meet App Store guidelines.
App Store Visuals for Mobile and TabletOutcome
With the app, students save significant time tracking their skills, and supervisors benefit from a streamlined approval process. The app’s polished visuals and seamless user experience position it as a tool that aligns perfectly with EDU’s mission of making medical education more accessible and efficient.