This semester, in my Ideation, Prototyping, and Testing course at Quinnipiac University, I have been creating a companion app to accompany the city of Baltimore website. From assessing the Information Architecture (IA) of the city’s site to creating an IA map for a companion app to naming the app Baltimorean and mapping our user flow diagrams, I got to explore what it takes to truly Ideate, Prototype, and Test a product.
Finally, after paper prototyping and performing usability tests, I present to you Baltimorean’s first high-fidelity prototype.
To view my entire creation process from start to finish, view the PDF below. For now, I will walk you through my high-fidelity prototyping experience.
What is Prototyping?
In UX Design it is imperative to ensure that a product works before releasing it to the public. Prototyping creates the space to “determine whether or not the design (or changes) work the way you intended them to—before they’re out in the world and in the hands of your users.”
A prototype is a scaled-down version of a product, used to sample or simulate ideas and designs. Prototypes provide a quick way to investigate your ideas before investing a great deal of time and money into developing a product. Prototypes come in all kinds of shapes, sizes, and versions, “ranging from simple paper models to fully functional, interactive digital prototypes.”
High-Fidelity Prototypes
CareerFoundry describes high-fidelity prototypes as, “the more detailed, realistic prototypes that look and operate much like the final product.” High-fidelity prototypes are often created once User Experience professionals have a solid idea and understanding of the product they are building. They are often refined versions of paper prototypes and/or low-fidelity prototypes. High-fidelity prototypes are more realistic, typically containing hierarchy, clickable links, and buttons, functional menus, and content that may appear in the final design.
Some prototyping tools utilized to create high-fidelity prototypes include Marvel, Axure, Balsamiq, Sketch, InVision, and Adobe XD. For Baltimorean, I chose to use Adobe XD.
Prototyping Baltimorean
My XD Experience
Generally, I use Adobe’s Creative Cloud software to accomplish my daily tasks as a graphic designer, both professionally and personally. In the past few months, I have become more familiar with Adobe XD. Though I have mostly worked on prototyping websites, this project presented the perfect opportunity to grow my skills and experience in the program. I utilized Adobe XD to create my Baltimorean high-fidelity prototype.
While referencing my work from week 5, I created each screen using XD’s design feature. I linked the pages together and added interaction into the app using XD’s prototyping feature. As I progressed, to test the functionality of my app and gauge my choices regarding the interface, I previewed using XD’s desktop preview feature as well as the XD app on my phone. Once my screens were complete, I used XD to screen record a user journey through the app, exploring all the pages I created and features I added.
Rotato
Although XD provides great previews via the desktop and an external device, this program does not have a feature for viewing the prototype within a device mockup. I used Rotato to complete my prototype.
Rotato is a virtual mockup software that allows users to bring their designs to life. You can upload photos, videos, and audio to your device mockup, customize your device, and add in a few animations to make your product fun and engaging. I uploaded my XD screen recording to Rotato to give my app a realistic feel and complete my prototype.
Screen Captures
Here are screen captures from my prototype, created in Adobe XD and mocked up in Photoshop. You can also view the XD screens here.
App Revisions
While designing my prototype, I considered my findings from usability testing highly. I made sure to pair text with the bottom navigation icons to mitigate confusion. Furthermore, some of the elements that were previously icons became buttons or links with written-out text. In the top navigation, I chose to represent the language selector with an abbreviation instead of an icon. I also incorporated a back button within the app so users can return to previous app screens without having to start their journey over.
To simplify the app, I removed the “more” page entirely. Similarly, I expounded upon some text and limited some text within the app for clarity’s sake.
Overall, I chose to maintain a simplistic approach to Baltimorean’s design.
Not too many photos, but just enough. not too many colors, but just enough. Not too many typefaces, features, transitions, etc., but just enough for the user to be able to accomplish their goal in a convenient and timely manner. Design-wise, I followed one of Baltimore’s brand guides, found online, to keep myself structured.
Final Thoughts
The process of crafting a companion app to accompany a complicated, confusing, and slightly disorganized city or town website is no small feat, especially when a companion app has never been created for that city. User experience design seeks to unearth user’s needs and find viable solutions for those needs.
This Ideation, Prototyping, and Testing course taught me how to do just that: Ideate, Prototype, and Test. Through this project, I was able to gain first-hand experience on iterate aspects and stages of Design Thinking. Although I did not foresee how beneficial a companion app would be for Baltimore City’s website, I now understand that this app would be a great tool for Baltimore’s residents. Instead of spending time searching the city’s website endlessly, an app like Baltimorean would allow users to find what they are seeking swiftly, especially when on the go.
Altogether, I loved the process of building Baltimorean from the ground up. I enjoyed exploring and experimenting with various steps, techniques, strategies, and practices all with one goal in mind: meeting the user’s needs. I have great respect for UX professionals tasked with making complicated products, services, and features more simple, accessible, and enjoyable.
Sola's Thoughts 