In my last post, I created a low-fidelity paper prototype of the app I am working on by the name Town of Randolph. In this post, I am presenting you with a much better high-fidelity prototype of the app. There are many changes to the prototype I first created.
With the user testing being done in the low-fidelity prototype, I’ve had numerous comments on what needed to be changed and better ways to design the app for users to use. Last week’s low-fidelity prototype included 20 screens but this week includes 25+ screens to view and look at.
Before we get into my project, I want to remind you of what a high-fidelity prototype is. According to Mockplus a high-fidelity prototype:
“provides more visual details; it is almost equivalent to a UI effect picture, and only needs to replace the actual data and materials in the development process” (Mockplus).
A low-fidelity prototype:
“focuses on functions, structures and processes; it only provides the most simple frameworks and elements; it generally does not provide color” (Mockplus).
Making a low-fidelity prototype helped me create the high-fidelity prototype in many ways. For one, it helped me organize where I wanted to place buttons and widgets on the high-fidelity app. Second, it helped me in a way come up with the colors for the app. The tool that I used to create my high-fidelity prototype was Adobe XD. This application is fairly easy to use and get used to.
Changes
While designing the high-fidelity prototype I made a lot of changes from the low-fidelity. When you take a look at the homepages from both high and low fidelity there is a difference. In the high-fidelity prototype, there is more color and a status bar. I also made a slight mistake in naming the high fidelity app “Town of Randolph” instead of “All About Randolph”. I used the color blue in both fidelities.
Another change I made to the app was the navigation bar at the bottom of the screen. In the low-fidelity prototype, there wasn’t much of a navigation bar to click and get around to. I thought that users viewing the app would want to see a navigation bar at the bottom that allowed them to see notifications and etc.
A major change that I made to the app was I added a new section for newcomers to the town of Randolph. This was a suggestion from one of the participants in the user study. The participant thought it would have been beneficial to add a newcomer’s section to the app so the new residents can view and look at the town information. I did decide to eliminate a screen called “Document Center” because I felt as though it didn’t fit in an app. The participants from the user study also mentioned that some of the app links and sections didn’t really make sense. This prompted me to remove the section. Along with this, I took parts of the sections out from the Home screen and the Resident’s screen.
High-Fidelity Screen
While creating the high-fidelity screen I made many more screens so users in a test will feel as though it is the real app. The new screens I included were the Login, Newcomers, Police Station, Where To Vote, Notifications, Contact, Search, and Events This Month pages. Creating the high-fidelity pages was easy to make due to the repetitiveness of the buttons and widgets. When trying to build the prototype in Adobe XD I had to copy a few of the pages so that I can link pages back to them. This is because I had some screens that had the same information on the screen as the next. Though it was rare in my prototype the screens that had copies were Farmers Market, Parks and Recreations, and Where to Vote. I found out I needed copy screens because when I linked the back button to the previous screen it wouldn’t go to the screen I wanted it to. I am not sure if Adobe has a rule for certain screens but that would have been helpful so I didn’t have to make a copy of the original screen.
Though it has taken me a while to create my screens I am happy with the outcome. The app works like it is supposed to when I click on different options. Some of the information on the prototype isn’t a working feature due to time and how much I could make in a short amount of time. Here is a video down below of the walkthrough of my app.
NATURALLY BRI 