MyMaryville is a proposed app that acts as an information hub for residents of Maryville, Tennessee. The city’s current municipal website is not optimized for user interaction and would greatly benefit from the development of a companion mobile app. Maryville City is looking to develop an app that prioritizes accessibility and usability.
I began with creating a site map for their current website, proposing a new website structure, and developing a site map for an app to complement the website.
I then created flowcharts to help understand the usability of the app based on hypothetical user scenarios.
After this, I created and improved paper prototypes that would be used for testing.
Using the paper prototypes I developed, I imported each screen into Marvel to make the app interactive and functional. This allowed me to test the app’s usability and receive feedback from two users.
UX/UI Design
Duration: 7 weeks
Tools: Adobe Illustrator, Marvel, Pen & Paper
Upon completion of mapping out Maryville City’s current website, I noticed the overall IA of the site was distributed poorly and could use reorganization.
A few of my main goals when creating the proposed site map were:
Distributing information from the Home section to other sections of the website
Making the navigation bar reflect groups rather than specific functions
Consolidating links and regrouping information to display more evenly across the navigation bar
Eliminating external links
With the use of my proposed site map, I created a companion app for the website. I focused on making payments, finding information for different departments, updates on events and news, and resources for activities in the area.
PURPOSE
MyMaryville would focus on the services and resources offered by the City of Maryville and provide residents a platform to stay informed on latest news and events, make payments online, and explore what the city has to offer.
AUDIENCE
MyMaryville’s audience would include anyone born and raised in Maryville to those who are new residents just settling in. Any resident of Maryville can benefit from what this app offers.
NEED
MyMaryville would meet their resident’s following needs in a convenient manner:
Making online payments
Staying informed on latest news and events
Finding activities in the area
Finding contact information
App Overview:
Home: Automatically opened after the welcome splash screen. Includes daily weather and news.
Events: Past and upcoming events, event calendar
Services: Make online payments, voting information, human resources, and financial services
Departments: Fire & Police department information, utilities information, report an outage, area schools, and connect with social media platforms or individual contact information
Search function: Search bar available at the top of every page
Once I determined the general layout and flow of the app with rough sketches, I refined my concepts and created paper prototypes to import into Marvel, a prototyping platform.
Both users provided excellent feedback. While both were able to assume the meanings of each icon on the bottom navigation bar, each shared that there could be better icons to describe each section.
One user found that multiple "Submit" buttons within the first task created some confusion and suggested that the buttons be labeled more specifically, such as "Proceed to Payment."
Another suggestion was to include the ability to create an account and save important links and events to their profile. By watching others use the app in real-time and explain their experience, I can return to my designs with a fresh perspective and continue to optimize my app to provide seamless user experience.
Finally, with the user feedback I gained from testing, I created a high fidelity prototype that can be navigated like a standard app.
The process of creating a companion app to accompany a complicated municipal website is no small feat. User experience design seeks to reveal user's needs and find the best, most well-received solutions for those needs. The final app allows residents of Maryville City to access and pay bills, add upcoming events to their calendar, and find contact information for numerous departments. With a simple, refined interface, this app transforms the way Maryville residents interact with their community.