top of page

Kinundrum UX/UI Design

An iterative process

A major phase in our project timeline is the UX/UI design. It occurs before and in conjunction with the production phase. This is where the bulk of my responsibilities as Lead Designer comes in

To get a closer look at our MRP design adventures, check out the project blog.

Ideate and Research

We conducted a needs assessment, and surveyed anatomy lab and tutorial TAs to better understand what concepts and skills Dr. Laprade's students need. We found that:

  • students struggle the most with dysfunction

  • students have trouble creating mental 3D models

  • some students don't participate because they are embarrassed about their lack of knowledge

  • TAs find it difficult to accommodate for different learning styles 

User personas and context scenarios


With these findings and Dr. Laprade's feedback, we developed first-year student personas who are pre-PT, surface or deep learners, with varying degrees of visuospatial ability. We wrote context scenarios where each user was given goals/tasks in specific environments and situations. This exercise helped us better empathize with our users which informed our application design.

Design requirements


The context scenarios allowed us to identify what functions and content were needed to help users complete tasks. These requirements were collected into a matrix which we referred to for building wireframes.

View an early iteration of our Scope Document to see more.


Back to top





This stage began with a sitemap, which listed all the application pages and their relationship to one another. Rough sketches of wireframes were created to determine content structure. The more wireframes we went through, the more we realized that features should be grouped semantically and according to user task.


High-fidelity visual mock-up


With an interface structure worked out, I built wireframe mock-ups annotated with the kind of feedback users should be receiving before and after completing a task. I used existing UI pattern libraries and design systems such as Material Design and Salesforce's Lightning Design System, as a guide to determine microinteractions and interface components.

Check out our High-fidelity Visual Mock-up Document.

mock-up of wireframes
mock-up of wireframes

Adobe XD prototype


To test our design, I built a prototype on Adobe XD and conducted an informal user test. I wrote a series of tasks that gave us insight in whether or not we had designed efficient paths for users to follow to complete tasks. We were also able to test graphic interface elements such as colour contrasts and text sizes. Lastly, after assessing user feedback, we decided to gamify the application to encourage user engagement.

screenshot of Adobe XD
screenshot of Adobe XD

Wireframe revisions


After the prototype test, several changes were made to the UI design and application structure. I created user flow diagrams with annotated versions of the redesigned wireframes.

user flow diagrams
user flow diagrams

Interactive animatics


In Adobe AfterEffects, I animated an animatic of two user tasks: 1) completing a checkbox exercise, and 2) earning a badge. This exercise was useful in determining microinteractions, and transitions.

Back to top


Usability testing


We conducted usability tests with 4 first-year Kin students, 1 Kin TA, and 3 first-year BMC students. We developed 15 test tasks, along with conditions for success.


A paper prototype was designed to mimic a desktop screen. Users were asked to use their finger as a mouse and tap on the prototype to click. The design of the prototype was optimized so that the puppeteer can easily slide wireframes through (to mimic scrolling), and manipulate UI elements cut out and pasted on foamcore.

prototype schematic
prototype schematic
prototype schematic
photo of paper prototype setup

Test results


Certain tasks were completed successfully throughout all 3 rounds. Failed tasks informed our changes to the prototype after each round of testing. Although our results are not statistically significant due to our small sample size, the users provided insightful, qualitative feedback that helped inform our design decisions moving forward.

Check out our Usability Test Report.

Back to top


Final wireframes and user flow diagram


After the usability tests, I built a user flow diagram to communicate how users will navigate through the application. I also made changes to the interface based on the test results.

user flow diagram

Design documentation


Before we can begin the development phase, comprehensive design documentation needed to be produced to serve as a guide for our developer team. This living document contains the following:

Application architecture

This section includes the user flow diagram.

User journey and wireframes

The bulk of the document, and will be what the developers will refer to. This section will include annotated wireframes that specify functionality, content, interactions and behaviours.

Style guide

An inventory of colours, typography, component styles, as well as page templates and layout specifications. This section also includes the Kinundrum brand identity.

Pre-production assets

This section includes graphic assets like achievement badges, icons, and animation assets such as characters, background design, and storyboards.

Front and back-end specifications*

This section will be added during the development phase.

annotated wireframe
annotated wireframe
page layout specifications
font styles

Next steps


The UX/UI process continues through to the production and development phase. Once the application is built, and have gone through several rounds of cross-browser testing and debugging, we will be running usability tests with the functional application.

Check out our Design Document.

Back to top

bottom of page