In the past month, I’ve set out on a journey to develop a functional cell phone application prototype. The app, ‘Visit NBMA,’ seeks to provide information for visitors and residents of New Bedford, Massachusetts.
The city’s poor website informed the decision to develop an application that could better tell the story of New Bedford, including the restaurants, businesses, shops, galleries, artists, and more.
The process included:
- Mind-mapping cell phone application purposes
- Analyzing the information architecture of New Bedford’s website
- Developing information architecture of an application
- Creating a paper prototype
- Gathering feedback from usability testing
- Refining the application’s design
- Finally developing a high-fidelity prototype.
I’m so excited to share that a high-fidelity prototype exists! I chose Adobe XD to develop this prototype. I haven’t used Adobe XD before, and within an hour, I felt completely comfortable with the program. I’m impressed. Adobe knocked it out of the park with this program.
The program is intuitive, easy to understand, and extremely powerful. The software also allows real-time monitoring and testing on an actual device. With my iPhone X at the ready, the prototype began to feel and look like an existing application.
Adobe XD made linking and coding the behaviors of the application reasonably straightforward. I’m grateful for the software’s click and connect approach. I’ve never made an application prototype before and found the connection process to be a breeze.
While the software is excellent, I found myself wishing Adobe XD had an iPhone Skin for presenting the application. A minor detail like this could go a long way. I ended up ‘Faking’ it by overlaying a cellphone skin in the below presentation I developed in OBS.
I also wish I could simply export this project and have a fully functional app to upload to the Apple App Store simply. However, I understand and respect the complexity of back-end development. I can only imagine how much easier app development will be as technology advances continually.
Visit NBMA: Prototype
Click to begin.
The prototyping process was pretty straightforward. I developed a series of screens, templated the visual elements and layout, and began capturing photography of New Bedford. Luckily the weather cooperated and captured images needed for the app. It also helped that I have developed an extensive photo library of The Whaling City.
I wanted the app to be easy to navigate, and operate light on text. I envisioned the images to ease the user experience in a media immersive app.
The prototype features five main header pages, five subheaders, sample paths to core content, and a navigational flyout menu, and a mocked-up search panel.
‘Visit NBMA’ demonstrates its usefulness with events, businesses, restaurants, mural locations, maps, links to websites and allows users to integrate the application with the geo-location and personal calendars.
Prototyping leads to User improvements.
Developing a high-fidelity prototype offered me many changes that improved the usability and user experience of ‘Visit NBMA.’ The prototyping process allowed me to experience the app first hand and gave me critical insight on how the app should respond.
I realized I needed to develop a ‘back button on my sub header pages. This added button allows users to navigate to the main pages easily. I also found that it was essential to create a fixed header element that did not scroll with the screens.
The prototype process also inspired me to adjust the sequence of the main headers, subheaders, and scrollable elements. I also reconfigured the hamburger menu, allowing users to learn about COVID 19, and gave users the ability to find New Bedford’s social media platforms. A hamburger menu features on all pages instead of the main headers in the paper prototype.
The addition of a search overlay demonstrates how users can quickly locate information.
I am not an app developer, and this was my first experience with UX. This process was fascinating to participate in, and I’ve learned so much from this project. This project was genuinely exciting.
Information architecture and high fidelity prototyping was the most enjoyable process of app development. I found structuring information fully rewarding and felt satisfied once information became organized.
I’m surprised to see how poorly designed many websites and applications are. My curiosity piques, challenging the status quo of web development.
Often I found myself creating a screen and immediately testing the design. Frequent testing allowed me to clean up the design and insight into how an application would work. I also found having a usability testing session to be invaluable in app development. The feedback promoted a more robust design and forced me to confront my app’s weaknesses.
Overall, this project inspired me to rethink the app development process and bolstered my confidence in UX.
I’m incredibly proud of this project and would love to pitch it to the city of New Bedford. I’d love to see it fully developed and in the hands of visitors and residents of The Whaling City.