After creating, testing, and making revising low-fidelity prototypes, designing the high-fidelity prototype is the next step. A high-fidelity prototype is highly functional, interactive, and realistically close to what the finished product would look like. This means high-fidelity prototypes include images, color schemes, and font choices that will be displayed in the final app.

App Updates:

After the user testing I conducted with the low-fidelity paper prototypes, I discovered a few things that could be improved. The user’s struggled with a couple of things and the tests revealed two key flaws with the app. These include the placement of the private chat button, as well as the icon for the news page. I added the private chat button to the homepage as well as having it remain on the community chat page. This allowed access from a main page instead of just the secondary page, which provides the user easier access to their chats. The news icon also got changed. With the icon, I maintained a similar style as the original so it would still fit with the style of the other icons. Although, I did change the fold and content of the icon to make it look a little more like a newspaper.

Creating the High-Fidelity Prototype

When creating high-fidelity prototypes, there are a number of different programs you can use, including Sketch, InVision, Adobe XD, and more. For this app, I decided to use Adobe XD. Having made two app prototypes in the past, Adobe XD is what I am most familiar with and that is the reason I decided to use it for this app. In total, there are 48 prototyped screens I created and linked together to create a function high-fidelity prototype.

In Adobe XD, I designed each page of the app, as well as having linked icons and pages to create a functional prototype. Above is a screengrab of some of the linked pages. It is important to make sure each page is functions and that the icons are linked to the correct places so the user can easily navigate.

Prototype Walkthrough