Once all of our group members had finished their evaluations, we synthesized the information we gathered and began creating our annotated wireframes. The wireframes were meant to be low-fidelity with minimal color and placeholders for content to let us focus on layout and interaction flow. To create the wireframes, our group used a collaborative interface design tool called Figma.

 

Since the paper prototypes were used to test three of our key paths, or three of the most important pieces to our system, we began our wireframes by using our paper prototype as the starting point. By the time we had finished transferring the paper prototype screens from paper to digital, with our small changes from the evaluations, we had developed a basic layout style that we used for the rest of the system. To ensure we were capturing the whole system in our wireframes, we used the information architecture diagram as a guide.

From our evaluation, we found that some of our testers had issues with the supervisor’s interface. They struggled with some of the language and the overall complexity of the interface caused them to find navigation difficult. To deal with these issues, we designed our wireframes with the idea of simplifying the supervisor’s side of the system. To do this, we redesigned our information architecture to be more straightforward. Originally, our system allowed users to have multiple paths to complete a certain task. After our usability testing, we decided that cutting down paths so that there was only one, straightforward path to complete the task would be better moving forward.