If you want to create a new program or game, you can’t just jump straight into Unity and start working. First, you need to make prototypes and mock-ups using either pen and paper or a digital drawing program. Sketching out your ideas and figuring out how things will function and visually look is an important first step that can sometimes be overlooked. In this blog, we will discuss the process we take when making mock-ups; especially with the Clinical Encounters user Interface in mind.

The Mock-Up Process

When we approach UI design, we normally don’t think of it as a stagnate step-by-step process. Thinking that way, especially in design, can trap you in a linear way of thinking and make it hard to realize you can revisit step 1 without necessarily having to redo all the steps between that and where you are now. Steps are great when you are doing something like making a cake, but for design, we like more of an overall process that has some linear structure, but won’t break if you want to jump around a bit. Here, we’ve outlined our process:

• Write out what the design needs to accomplish. What information does it need to display and in what ways you want the user to navigate through and interact with the program?
• Sketch out any ideas. Draw the placement of menus and buttons, write down ideas for colors, where to add in icons, etc. We also like to draw different arrows and lines over our sketches, following the path we imagine the user’s eye would take and what navigational path we want them to take. Keep in mind, depending on for what and where you are making, your mock-ups can limit how much of the sketch you can translate. We were only working with pre-made icons and buttons and with whatever we could make with the pre-programmed Unity Canvas features. While we still had a lot of freedom, we also had to be realistic about what we would be able to do with the tools provided. In the image, you can see where we made a small sketch on how to handle giving feedback from quizzes and wrote notes what we thought was the best way to hook it up for purposes of showing off functionality.
• Make your mock-ups! Adapt your pen and paper designs, if needed, to work with what you have.
• Get feedback from your team. Show your team your mock-ups and make notes on what they like/don’t like. Some versions will probably get thrown out during this stage (like in the third round of our mock-ups, Version 1 of the Reader was thrown out).
• Make more mock-ups! Take the feedback gathered and start to either rework already-made versions or make new ones.
• Repeat. Keep showing your mock-ups and reworking them as many times as it takes to get everyone to agree on one design. Do make sure to show the design and get opinions from people not on the team from time to time. They might point out things that you and the team miss or have completely new ideas

This was the process we went through to work on the Clinical Encounters Reader. The real challenge was that the Clinical Encounters Writer was already created – so we needed to make something that displayed all the correct information, functioned in a way that was congruent with the ideas that went into the Writer, and visually looked similar. You can see our process in action in my next blog post about actually making the Clinical Encounters Reader!

Come back next week to read the conclusion to our process and how we reached the final visual version of Clinical Encounters. You can read more about the Clinical Encounters platform at its website.