Walled Lake: A Mobile Experience (Prototype)
Overview:
As a designer, I had the pleasure of creating the prototype for the "Walled Lake" companion app, which aims to serve the residents of a small town in Michigan. With a population of around 7,000, Walled Lake is known for its serene surroundings and is a favorite spot for summer getaways. My main goal with the app was to provide the town's residents with an easy way to complete clerical tasks and engage with the community, including local events and government functions. The prototype I created shows the app's ability to provide residents with waste management information, including collection schedules and recycling guidelines. The design is interactive and user-friendly, and I had to work on creating new component states for similar design pieces, which I figured out through watching tutorial videos. Overall, the Walled Lake companion app prototype demonstrates the potential of an app designed to benefit small-town residents.
Tools Used:
-
Adobe XD, Usability testing
My Role:
-
UX Designer, UX Researcher, Designer, App Developer
Prototyping?
First and foremost, a prototype is “an expression of design intent” as remarked by Nick Babich in a blog posted to Adobe’s website.
These expressions of design intent can come in a plethora of different mediums, colors, sizes, and all come with varying amounts of designer effort. Designers must weave three core themes to successfully implement their prototypes:
-
Efficacy
-
Influence
-
Effort
Efficacy: Designers must show that their design can tangibly be made into a real product. Prototypes are like the taste tests at Costco. The customer has the opportunity to get a taste of what the final product is, and have the opportunity to either buy-in or continue on.
Influence: Presentation of the prototype should be impactful enough to support your case for implementation. We must use available tools to influence our stakeholders into understanding the use-case and benefits of what the final product will be.
This leads us to effort…
Building prototypes can often times require a huge amount of effort. Working at a major tech company— I’ve seen my colleagues product test a few different new phones and services. I’ve also seen some of these phones and services completely fail. What is the cost? What were the learnings? Were they worth it?
It is here where designers must balance the three core themes through the lens of effort. Sometimes a simple paper prototype can be enough to influence stakeholders that there is true efficacy to a new design. Sometimes much much more is required— and it needs to be painstakingly user tested over and over and over again (and market tested too!). This then leads designers to developing situational prototypes that are nuanced for each pitch.
Lo-fi vs. Medium-fi vs. High-fidelity prototypes
In many cases it can be beneficial to build a low-fidelity prototype. Something that requires light lifting and can support claims of efficacy while also impressing stakeholders with a scrappy and thought-out approach. These prototypes are usually done to present the bare roots of an app— in the case of mobile design, often by hand.
Medium-fidelity prototypes are typically one step above low-fidelity. They show a more robust application (usually in a digital setting) and can demonstrate UI with easy-to-read designs and more defined visual pieces. Medium-fidelity prototypes still, however, lack functionality and are more of visual representations. I often consider basic web wireframes to be medium-fidelity. An example is shown below.
High-fidelity prototypes are typically incredibly realistic and close to the final product. In the case of a mobile design, a high-fidelity prototype will often demonstrate the functionality of an application as well as visual aesthetics including motion to each screen. These elements are typically produced using advanced software like InVision, Sketch, Figma, or Adobe XD.
paper prototypes used for usability testing
My Prototype, Results, and Learnings
Walled Lake, Michigan is small town in Oakland County that is a western suburb of Metro Detroit. The 2010 census concluded that the city houses roughly 7000 people. It is a quaint town that moves at a slow and peaceful pace, with many of its residents enjoying summers on the lake. The goal of a companion app is to provide residents with the ability to complete clerical tasks and engage in the community (events, government, etc).
The Walled Lake App (known affectionately in the app store as just “Walled Lake”) was built using Adobe XD. The prototype itself is mostly a high-fidelity prototype with elements of medium-fidelity mixed in as to not take away from the interface of the application visually. The video below demonstrates a walkthrough of some of the app’s core features.
Prototyping is a skill that I am still incredibly rough on. I find myself getting frustrated often when I can’t get a small or seemingly insignificant feature to work the way I want it to at first pass. Fortunately I found that a major resource for these troubles can be support documentation online and video walkthroughs. This is very reminiscent of the way I taught myself how to use Photoshop. I also realized that while softwares will each have their own learning curve— they will also each have their own benefits and challenges. It is wholly possible I may have not yet found the software that fits my working and prototyping methodology the best.
Beyond this, I am grateful to see an application for Walled Lake come to life in this format. It is a gentle reminder how much the user experience and information architecture are such prevalent design pieces when building new tools and products for users in the digital space.
final presentation of my interactive prototype