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

 

Create

Wireframes

 

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.

 
wireframes
wireframes
wireframes

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

Test

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.

 

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

Refine

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.

 

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

© Chelsea Canlas 2018. Somewhere in Toronto.