Introducing the Gull

Developing the Long Beach Gull (called The Gull for short), has been a multiple weeklong process. Starting from redesigning the sitemap for the Long Beach, Washington town municipalities website; the Gull was developed as a companion app to the Long Beach website. While the website offers resources for government purposes, residents, and visitors; the app focuses on providing resources for residents and visitors.

Over the weeks of working on the Gull, I created a sitemap for the current Long Beach website then reworked it. Based upon my reworked sitemap, I created a sitemap for the app. Using the app sitemap, I created a physical paper prototype that was all aesthetic with no real function. With prototyping on paper (POP) software, I was able to upload the different pages of the paper prototype to create a functioning prototype of the Gull, which can be found here.

I tested the Gull POP with real users to observe the user experience. Based on the feedback from the user testers as well as my own observations, I was able to use app development software to create a medium to high fidelity prototype of the Gull. Before this medium to high fidelity prototype is discussed, the word fidelity itself should be defined.

What is Fidelity?

In a previous post, a summary of the differences between the low, medium, and high-fidelity prototypes was given. This was only a brief introduction to the usefulness of these testing methods. To go in greater detail; the word fidelity refers to how something, usually a product, conveys the look and feeling of the final product. The level of fidelity can vary in visual design, content, and interactivity. This variation is why there are different levels of prototypes.

Low to High Fidelity

Low Fidelity Prototypes are simple, rough representations of the product. They are sketched with paper or created with basic digital tools to create click through mock-ups. Like the physical paper prototype or the digital one made for the Long Beach Gull App. Low fidelity prototypes are made with basic tools to focus on the basic structure and functionality rather than design. Due to this, it is useful for early-stage feedback.

Medium Fidelity Prototypes are created with digital prototyping tools and have more accurate layouts with limited interactivity for the user. They usually also include basic user interface elements, such as working buttons for navigation. The goal of this prototype is to balance a realistic experience for the user, but to still have flexibility to make changes based on feedback. This flexibility makes medium fidelity prototypes useful for testing the flow of the user’s experience and to gain feedback on specific interactions.

High Fidelity Prototypes are also created with digital prototyping tools but are highly detailed with realistic user interface elements with content and interaction. This type of prototype is meant to represent the final product as closely as possible. Having the prototype mimic the final product allows for accurate user testing and help with validating design, usability, and functionality of the product.

Since medium and high-fidelity prototypes are both created using digital prototyping tools, the same software can be used to make both types of prototypes.

Creating Medium to High Fidelity Prototypes

Due to medium and high fidelities being digital products, there are many different types of software a developer can use to create prototypes. Such as Figma, an app development software that is best for creating interactive programs. Marvel, an app development software that is good for beginners. UX, which is known to be best for quickly creating prototypes. Adobe XD, which is best for creating simple and interactive designs. As well as Sketch, which is known to be best for Mac users.

All these programs provide similar tools, what will work best for a developer depends on the person and the goals of the app. For my own purposes, I ended up using two different programs to create prototypes for the Gull.

Prototyping for the Gull

For the previous POP for user testing, I used Marvel since this was my first experience developing an app prototype. I had planned to use Marvel again to create the next prototype, but the software would not allow me to create another project without either deleting my current one or buying a subscription to the website. I currently pay for an Adobe subscription, so I decided to use Adobe XD for my medium-high fidelity prototype. The design plan I have for the Gull is simple, so I thought that Adobe XD would be a fitting program to create it.

What has Changed?

In designing the final prototype of the gull, I wanted to create something that is in between medium and low fidelity. There were not many changes in design between the different prototypes, elements have been kept consistent throughout. One thing that changed in the design was the element of the home and back buttons on most of the pages. In previous designs those elements were not included, and it was found in user testing that users were able to navigate the app fine without them. It also gives the user multiple options in ways to navigate the app. However, the design was found to seem empty without these buttons. The user can still use the buttons on their phone to navigate, but it assists the user flow to give both options for navigation.

To demonstrate the Gull, I recorded a walkthrough of the app where I complete a few tasks that are possible in the app. The tasks I complete are based on the ones asked of the user testers. The exact tasks being demonstrated in the walkthrough have been changed to better showcase all the hubs of the Gull. In the original tasks asked of the user testers, they only entered the News Hub and Visitor Center. Two of the tasks have been changed to things that can be completed in the Resident Center, such as checking the local map and making their water/sewage payment. By having the tasks take the users through all three hubs of the app, it shows the viewer more of what the app can do.

While there have only been minor changes to the design of the Gull, there were more changes to the content of the app itself. Certain elements that were previously underdeveloped in their use were able to be refined into more useful tools. For example, a user tester suggested having the local map shows markers for things like public restrooms and parking. Other markers were also added to the map that will be useful to both visitors and residents such as water fountains and convenience stores.

 Another development is that the weather page was fleshed out to go into greater detail on the local weather, to be more useful to both residents and visitors. The user can now look at an hourly forecast for each day of the week, instead of just the one overview of average temperatures for the week; like a real weather app does! These expansions of the elements of the Gull help to finalize a functioning app that will be useful.

Reflecting on the Gull

It has been an interesting process to take a town municipality website, redesign it, then create a companion app for it. While I have had experience developing websites designs, I have not done prototyping before. I have drawn out things like wireframes but have not made functioning programs.

Admittedly, when designing websites in the past, I have not made prototypes prior to me designing. I usually would go right in and just start putting things together, skipping past planning and going right to experiment with design. While there is nothing wrong with my prior methods, the process of creating the Gull has shown the value in planning and going through multiple stages of not only ideation and prototyping.

The multiple methods of ideation and prototyping used to create the Gull helped to fully develop the idea of the companion app into a functional prototype. While the prototype is still far from complete, as many pages still say things like “Bleep blop bloop bleep” repeatedly. The current prototype could be filled out with genuine content to be a useful app. Developing the Gull has still been a great exercise in how these methods can be used to create a functional and useful product.

Closing Thoughts

The final prototype of the Gull still needs work before it is to the point of a working app that can be offered in app stores. The process of development gone through for the app shows how a product can be developed.

Overall developing this app has been great practice at using multiple methods of ideation, testing, and prototyping to change a product from just an idea to something functional.

While the Gull is a digital product, these same methods of ideation, testing, and prototyping could be applied to any project, be it for a physical or digital item, to mold the idea into a complete product.

References

Clark, H. (2025, April 24). 20 best mobile app prototyping tools to iterate on designs in 2025. The Product Manager. https://theproductmanager.com/tools/best-mobile-app-prototyping-tools/.

Sorodoc, I. (2024a, November 13). Low-fidelity vs. high-fidelity prototyping: Key differences explained. ProtoPie. https://www.protopie.io/blog/low-fidelity-vs-high-fidelity-prototyping.