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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
An inventory of colours, typography, component styles, as well as page templates and layout specifications. This section also includes the Kinundrum brand identity.
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.
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.