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.
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.
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.
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.
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.
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.
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.
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.
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.