UI

CXR Builder: CXR Builder is an X-ray simulator app that allows users to experience and practice using X-rays in a virtual environment.

Client: Students & Professors at Central Michigan University

Programs Used:Adobe Illustrator, Photoshop, Invision, and Figma

Class: Art 385 - Ui Design

Step 1 - Define

The first step in designing the CXR app was to determine what needs to be designed, and why. Why does this product need to exist? Who am I creating this for? What business problems will this solve?.

Step 2 - Research

The second step in designing the CXR app was to conduct a usability study. This was done by interviewing multiple nursing students and asking them what key features and characteristics the app should have.

Step 3 - Analysis & Planning

The third step in designing the CXR app was to go back through the information that I collected from my research and map out what elements will be needed in this app.

Step 4 - Prototyping

The fourth step I took in designing this app was to create mockup sketches (shown left). By using the elements I had previously mapped out, as well as using the information from the usability study, I was able to come up with a solid idea for this app before going digital with it.

Step 5 - Designing

After going back through my mockups and changing a few things, I was able to go to the fifth stage in my design process, which was to digitally design this app using Illustrator and Photoshop.

Step 6 - Publish

Finally, after fully designing the CXR app in Illustrator and Photoshop I was able to put each screen in Invision and make it a working app.

Icons & Navigation bar

Show below are my Icons and my navigation bar that I designed for this app. When each of the icons is tapped by the user a dropdown menu will appear with a list of specifications. For my navigation bar I ended up changing it from a three icon navigation bar to a five icon navigation bar once I started designing it in Illustrator. (from left to right) Reset, Undo, Home, Forward, and Settings.
Image 1

CXR App Logo

Click on the CXR App Icon to test the app out for yourself!