Destination Doylestown Prototype
Over the last several weeks, I’ve been creating a mobile companion app for the website Doylestownborough.org, remaking the site’s architecture from the ground up and finding my audience through user flows and testing. Now, I can finally create my full, high-fidelity prototype
Picking a UI Kit
While I previously created a paper prototype as a way to rapidly make new screens, the final prototype will be a little different. Instead, I’ll be using a UI kit. What’s a UI kit? Well, this quote by enginess should give a rough idea
A user interface (UI) kit is a collection of graphic files (usually PSD) and resources that can help designers with the task of building UIs for their applications.
UI kits typically include the user interface components that convey meaning and provide functionality to users – think buttons, widgets, checkboxes, progress bars, and navigation buttons. Some kits may also provide a framework to underpin your site or app’s layout. Generally speaking, the more you pay, the more extensive the library of UI elements included in the kit will be.
There’s quite a wide variety of different UI kit’s out there. Adobe has their own in the creative suite called Adobe XD. Sketch also has a few different UI kit components itself. In the end though, I ended choosing InVision. It’s the program I’m most familiar with, as I’ve made a few different prototypes with it before.
Creating my prototype
While creating the app, I began by transferring over many of my paper prototype screens. For the main navigation page specifically, they looked quite similar, as I was a fan of those designs and they were liked during user tests.
Full navigation screen set
For other screens in the app, it began to vary a bit on how accurate I kept them. For some, such as the “Snow and Ice Removal” page, I kept the design nearly identical, placing in the content from the same Doylestownborough.com page. For others, like the permits and inspections page, I had to alter the design a bit, as the text would be near unreadable by having three different lines across on such a small screen.
The “Snow and Ice Removal” screen stayed mostly unchanged from the paper prototype
While creating this prototype, I also began adding in certain screens when necessary. The full event calendar at first just displayed the calendar and a list of events. I realized though that a user will likely see the dot marker on a day and want to know that specific day. Due to that, I added in a feature where when you click the day, then that specific event appears, allowing you easier access to that event’s info.
Now you click on the schedule to see that day’s event
Overall, the creation of the prototype went quite well. Many of my screens were able to stay quite similar, with things like hierarchy and color adding what I felt some of the missing elements were. I had to cut corners a tiny bit in certain areas due to time constraints, as well as how in-depth some of the site's content can get, but overall the app is fully functioning.
Thoughts on the project as a whole
Compared to most app’s I made, this was quite different. While I’ve redesigned a few apps and site’s before, making a companion app was a bit different. You still have to follow along the general rules of the original design (color, type, content, target audience, etc…), but it still almost feels like making something completely from scratch, as there’s no original app design to base it off technically.
In some ways, this makes designing a bit easier, as you have all those guidelines to follow. You don’t have to worry about the color of certain objects or what font the header will be. Despite this, some may find it even more challenging. You have to balance both the challenge of creating an original phone app that doesn’t exist, while also remaining consistent with the website that does exist. This can be restricting in many ways for some people, as they may want a certain design for the app, but can’t implement it properly due to what the site chooses as its main colors.
Listed below are all my final documents. This includes a full PDF of my process, a video walk through of the app by me and the link to my full prototype.
Full PDF Part 1 (Page 1-32)
Full PDF Part 2 (Page 33-48)
Full Walkthrough
