App Prototype: Final Steps

Over the past several weeks, I have slowly been putting together an app for my hometown’s website. Using several steps in the design thinking process, I have finally gotten to the final stages of the project. 

Paper prototype of the login, welcome, and home screen.

Last week, I tested my low-fidelity prototypes, and after receiving my final round of feedback, it’s time to put everything together. 

To get started, I needed to find software that would serve my needs. I have never created a prototype like this, so I had to conduct some research into the appropriate tools to get the job done. I used the combination of Sketch and InVision

Next, I had to learn how to use each software. Luckily, there were many sources and videos that answered most of my questions. After multiple test runs, it was time to start designing my final app.

The Process

Full view of all pages of the prototype.

To stay on track and organized, I started with the design on the main screens. I then created multiple rows for each step in a certain process. For example, all the pages associated with the residence tab are in one area, while all the pages for the business page are in another. This kept me organized, and I was able to locate everything efficiently. 

Original color palette for the app.

I then started to play with different pallets to see which one fit with the app. I found one on colorhunt that looked similar to the website and decided to give it a try. After a couple of hours, I realized that this pallet was not going to work. The color combination looked awkward and not very modern. 

So, I decided to switch it up and go for the colors on Merrimack high school, blue and white. I took the dark blue from the pallet I had already selected and got to work. The layout of each page became sleek, clean, and provided a better presentation.

But then, the page started to look empty. To fill the space toward the top, I added the letter M from the login screen but added a blur effect and placed it in the background. It added a subtle piece of color but didn’t distract from the title of each page. 

Navigation bar found throughout the app.

Next, I started to work on the navigation bar. I scrapped what I was originally working on and started fresh. First, I needed to decide where I was going to place the icons. During my notes from my user testing, I needed to make room for the search bar and decided to have a five-button design. I knew I wanted the home button in the middle and the search bar on the right. I then had to determine where the other icons would go. I concluded that I wanted the calendar all the way to the left and alerts on the right, then I placed the remaining icon. 

Now that I knew where everything was going to be placed, I needed to come up with my own designs. I wanted something smooth with no harsh edges. I mostly used the rounded rectangle tool or manually curved each edge. I choose to stick with icons that I knew the users would understand. For example, for the home screen, I chose a house icon, and for the alert page, I decided to do a bell. This will help new users of the app navigate where they need to go quickly and efficiently. 

Second draft of the “welcome” screen (later renamed the home screen).

To remain consistent across screens, I used the rounded tool for almost every feature on the app. From buttons to icons, I wanted a smooth and clean look throughout the app. 

After creating some of the main symbols, it was easy to apply them throughout each page. Symbols like the navigation bar, back arrow, or background images were easy to apply to every page. After everything was created, it became a process of adding symbols, text, and formatting. 

Overall, the process took a lot longer than I initially thought. Every day I worked on the project, I changed something that improved. Through trial and error, I was able to come up with the prototype you see today. 

Major Changes

Like I mentioned above, I moved the search button to the bottom of the navigation. I also removed another major element that I thought the user would need. 

I removed the account feature because, in reality, it was unnecessary. There are no public chat features, forums, or any other function requiring the user to provide any additional information besides a login. 

I also switched around some of the titles to fit the icons on the bottom navigation. For example, the “welcome” screen became the home screen because it is the main screen the user will use to navigate the app. I then renamed the “home” screen to the date in which the user is logged on to the app.

Conclusion

This high-fidelity prototype is an excellent start for creating a real mobile application. I learned throughout this experience that something that I think needs to be changed might not apply to other people. For example, I thought it would be easy to locate the town hall hours of operation. One of my users found it without trouble, while the other user would have used the search bar function. 

Prototype Walkthrough

All Final Screens

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: