Completely redesigned one of the existing modules in the system. Crafted a user experience and a visual design for a new, second module through all phases of
product design.
Completely redesigned one of the existing modules in the system. Crafted a user experience and a visual design for a new, second module through all phases of product design.
Completely redesigned one of the existing modules in the system. Crafted a user experience and a visual design for a new, second module through all phases of
product design.
Completely redesigned one of the existing modules in the system. Crafted a user experience and a visual design for a new, second module through all phases of product design.
Getting familiar with the system
What is Expertfolio, and how does it work?
Expertfolio is a multi-module online portfolio for medical training. The system is built up of separate modules (resident portfolio containing form submissions and EPA, ultrasound portfolio, medical devices multimedia uploads). Depending on what modules the user is paying for, these modules will be enabled in his
own Expertfolio.
What is Expertfolio, and how does it work?
Expertfolio is a multi-module online portfolio for medical training. The system is built up of separate modules (resident portfolio containing form submissions and EPA, ultrasound portfolio, medical devices multimedia uploads). Depending on what modules the user is paying for, these modules will be enabled in his own Expertfolio.
What is Expertfolio, and how does it work?
Expertfolio is a multi-module online portfolio for medical training. The system is built up of separate modules (resident portfolio containing form submissions and EPA, ultrasound portfolio, medical devices multimedia uploads). Depending on what modules the user is paying for, these modules will be enabled in his own Expertfolio.
What is Expertfolio, and how does it work?
Expertfolio is a multi-module online portfolio for medical training. The system is built up of separate modules (resident portfolio containing form submissions and EPA, ultrasound portfolio, medical devices multimedia uploads). Depending on what modules the user is paying for, these modules will be enabled in his own Expertfolio.
Design process
Research + extract insights
Research + extract insights
The research and insights I conducted were based on the valuable information the product owner and the stakeholders already had. Since the product owner and the stakeholders are former medical students and doctors, I had numerous detailed interviews with them in order to get the fundamental information about
the potential audience.
To strengthen the information up, I decided to come up with a persona which could help me to get a broader picture of the audience, user goals and needs, any pain points, and preferences and behaviors of our users.
The research and insights I conducted were based on the valuable information the product owner and the stakeholders already had. Since the product owner and the stakeholders are former medical students and doctors, I had numerous detailed interviews with them in order to get the fundamental information about the potential audience.
To strengthen the information up, I decided to come up with a persona which could help me to get a broader picture of the audience, user goals and needs, any pain points, and preferences and behaviors of our users.
The research and insights I conducted were based on the valuable information the product owner and the stakeholders already had. Since the product owner and the stakeholders are former medical students and doctors, I had numerous detailed interviews with them in order to get the fundamental information about the potential audience.
To strengthen the information up, I decided to come up with a persona which could help me to get a broader picture of the audience, user goals and needs, any pain points, and preferences and behaviors of our users.
Persona
Ideate + sketch
Even though the idea phase was already implemented before, there still was lack of iterations of the product. Through multiple brainstorming and various sketches and prototypes the design solutions became more unique and engaging.
Even though the idea phase was already implemented before, there still was lack of iterations of the product. Through multiple brainstorming and various sketches and prototypes the design solutions became more unique and engaging.
Early stage of a Self-reflection form
Early stage of a Self-reflection form
Defining dashboard essentials
Design + prototype
Through multiple iterations the high-fidelity prototype helped me to test a workflow, specifc UI components, and graphical elements such as page hierarchy and
type legibility.
Through multiple iterations the high-fidelity prototype helped me to test a workflow, specifc UI components, and graphical elements such as page hierarchy and type legibility.
Through multiple iterations the high-fidelity prototype helped me to test a workflow, specifc UI components, and graphical elements such as page hierarchy and type legibility.
Through multiple iterations the high-fidelity prototype helped me to test a workflow, specifc UI components, and graphical elements such as page hierarchy and type legibility.
User flow
Delivering high-fidelity prototypes
UI design
Since my design work consisted of more then 200 screens for both roles (student + teacher), I had eventually built a UI kit that helped me to define my design process more efficiently and productive. Doing so, I increased a value in time-to-market reduction, design consistency, and alignment of teams.
UI kit
Design mockups
Challenges
The challenges I faced while designing the dashboard
- Provide a clear overview about the current progress of the portfolio for both roles
- Define the highest prirority items, so the user could quickly figure it out what is missing and what needs to be improved for specific assignments
- Create an effective and intuitive page hierarchy, so the most important links could be reached
out effortlessly
- Provide a clear overview about the current progress of the portfolio for both roles
- Define the highest prirority items, so the user could quickly figure it out what is missing and what needs to be improved for specific assignments
- Create an effective and intuitive page hierarchy, so the most important links could be reached out effortlessly
- Provide a clear overview about the current progress of the portfolio for both roles
- Define the highest prirority items, so the user could quickly figure it out what is missing and what needs to be improved for specific assignments
- Create an effective and intuitive page hierarchy, so the most important links could be reached out effortlessly
Solutions
Defined solutions which could work out
- The overall composition was divided into 4 main parts, so the user could easily switch back and forward on specific tasks
- In order to quickly grasp the user’s attention, high-contrast colors were choosen with the additional visual representation of charts
and graphs - To maximize the perceived affordance of clickability, the key elements of the dashboard were used in colors and underlined text links
- The overall composition was divided into 4 main parts, so the user could easily switch back and forward on specific tasks
- In order to quickly grasp the user’s attention, high-contrast colors were choosen with the additional visual representation of charts and graphs
- To maximize the perceived affordance of clickability, the key elements of the dashboard were used in colors and underlined text links
- The overall composition was divided into 4 main parts, so the user could easily switch back and forward on specific tasks
- In order to quickly grasp the user’s attention, high-contrast colors were choosen with the additional visual representation of charts and graphs
- To maximize the perceived affordance of clickability, the key elements of the dashboard were used in colors and underlined text links
Dashboard
Mockups
Because Expertfolio is a multi-module product, there was a need to easily maintain the flow of the required assignments, upload submissions, and comments from
both sides.
So small details like hovers on the table rows, or little icons could speed up the content scanning, and process the data table more efficiently.
Because Expertfolio is a multi-module product, there was a need to easily maintain the flow of the required assignments, upload submissions, and comments from both sides.
So small details like hovers on the table rows, or little icons could speed up the content scanning, and process the data table more efficiently.
Because Expertfolio is a multi-module product, there was a need to easily maintain the flow of the required assignments, upload submissions, and comments from both sides.
So small details like hovers on the table rows, or little icons could speed up the content scanning, and process the data table more efficiently.
IOP form
Mobile app (iOS)
Besides the web application, I got a task to provide a couple of screens for a native mobile app for iOS. Even though this task didn’t require a lot of effort and time, I still went through some sketching
and iterations.
Besides the web application, I got a task to provide a couple of screens for a native mobile app for iOS. Even though this task didn’t require a lot of effort and time, I still went through some sketching and iterations.
Besides the web application, I got a task to provide a couple of screens for a native mobile app for iOS. Even though this task didn’t require a lot of effort and time, I still went through some sketching and iterations.
Low-fidelity prototypes
Flow and prototyping
Mobile app