MyMontclair
role
founding designer
time
february 24 - present
tools
figma, figjam, miro, jira, adobe suite
create a visually stunning mobile app with accessible design for a govtech startup
goal
provide local governments a scalable, fully-customizable platform to engage the community and present various resources
impact
ConnectedCity is a sector of PNJ Tech that emphasizes creating a modern, easy-to-use platform for local governments to connect with their community and provide their resources all in one place.
My role within ConnectedCity was to create a mobile app from scratch, centered on a clean and simple design that a wide demographic can access. My goal was to incorporate a multitude of features such as Crime Tip, Report an Issue, and a Knowledge Base section to enable users a platform to solve their municipal issues digitally and remotely. Furthermore, it was part of my goal to build a design that would stand out amongst our current competitors as well as integrate efficient design thinking throughout the process.
Before initiating the ConnectedCity project, I conducted a quick competitor analysis and background research to observe current market trends and designs. I looked specifically for design weaknesses in competitor builds to analyze where I can strengthen those points in our own design, followed by immediate high fidelity designing due to the time constraint.
introduction
To start the pre-design process, I looked at the old version of a city app (MyMontclair) that we were working on updating. I discovered various holes in design principles such as a lack on consistency, user control, and hierarchy. I then researched a variety of apps that I liked in regards to their flow, overall aesthetic, and location of information. My main focal points I discovered from this stage of research included:
research
Hierarchy - Navigating the old Montclair app was difficult and misleading as key features like Report an Issue were nested within other pages. Furthermore, looking for answers to commonly asked questions were hidden and required users to aimlessly dig for their solution.
User-centricity - The flow of the previous MyMontclair app required users to already be familiar with the layout in order to quickly find what they were looking for. Exploring the app made it apparent that the user’s needs were not prioritized, like including a Search function to reduce the amount of clicks for a user’s issue to be resolved.
Usability - Overall, there seemed to be a high learning curve leading to reduced efficiency and low memorability, causing low satisfaction for users of the previous app. Due to lack of maintenance, the app was also rarely updated leading to outdated information and errors throughout the platform.
Pictured above is a competitor app, City of Irvine, and other apps with design features that I gleaned inspiration from. I modeled our current navigation bar after Disneyland’s as the functionality was grouped efficiently, separating main features that the target demographic would use into an always-present feature. I also really liked the card carousel displaying highlights for users to scroll through, which I used in my own designs. Task Rabbit similarly uses cards and visual information to capture the user’s eye and make specific flows easy to find. For City of Irvine, I liked the unique Home page focusing on highly used features, but wanted to build upon it with my own vision.
Combining both background research and competitor analysis, I looked through other existing municipal apps to observe what features were common to see and what current design trends are.
From my observations, I concluded that many of the apps are lacking in UX; the designs are muted, dull, and unengaging. There was a lack of visual appeal as well as prioritization of the user as important features would be hidden under other pages. However, I also discovered features that would be beneficial to include in my own designs, such as Job Opportunities and Event Calendars. I cross-examined this with consultations with City IT Managers, allowing me to finalize what features will be priority in the final design.
In summary, I aimed to create a design that would be modernized and pleasing to look at while also centralizing the main features in locations that typically would have high traffic. I also aimed to make the flow as intuitive as possible to ease any possible frustrations on the user while still being accessible according to WCAG AA 2.0 standards.
After completing the preliminary research stage, I had to quickly move on to the design stage as the executives desired. Unfortunately, I was not able to conduct further UX research such as usability testing, user interviews, or surveys due to the time constraint.
With the key themes in mind, I started designing my initial low fidelity wireframes. I created multiple variations with slight differences. All versions have the search bar at the top for ease of access and functionality. I designed a smaller and larger preview to compare whether seeing more articles or more content was preferred.
With a limited timeframe, I skipped over the low-fidelity wireframing + prototyping and moved directly into hi-fidelity mock-ups. I worked very closely with our developer team so I skipped over prototyping as well, and instead organized my screens into the flow that they travel in.
designing
Style Guide
Primary Screens
01. Home
The Home page is shown when users first open the app. Users can quickly view upcoming events and public meetings, as well as access commonly used features like Crime Tip, Issue Report, and more.
With dynamic elements such as a scrolling home slideshow, current date, and a feature carousel under Quick Access, I consolidated the most commonly used features in the home page.
The Navigation Bar is organized into Home, Explore, More, Search, and Menu and is a sticky feature that stays on the bottom of the screen throughout all pages of the app.
02. Explore
The Explore page harbors a calendar with upcoming events relevant to the city. Users can also find different amenities like parks, landmarks, or a map with geolocation.
Users can quickly see at a glance what days have events related to Montclair, and find more information on said events as well. Information regarding city infrastructure like parks, landmarks, and facilities can be discovered with hours, directions, and descriptions - or it can be found in a map using the user’s geolocation.
03. More
Within the More page, users can report a Crime Tip, Report an Issue, use Bill Payment, or find Public Meetings.
Choosing what features was based on the executive decision from a client, reasoning that local citizens used the old app most for these features.
04. Search
For easy and quick access, users can look for features in the Search page.
Users will be displayed popular searches that are frequently used, as well as auto-complete when typing in the requested search item.
In the instance that a user is unable to quickly locate the feature for their intended use-case, we implemented a search engine within the app to help speed up this process and eliminate any possible frustration.
05. Menu
Users can find more features within the Menu page and explore the current members in office as well as discover new job opportunities. Admin can also update and add information like in the All Departments page.
MyMontclair features other capabilities like exploring municipal job opportunities, finding more information for economic development or permits, and more. App users will be able to locate whatever they intend with the search feature as well.
Once the primary screens were complete, I moved on to create the rest of the app - totaling 44 screens. I worked directly with the development team and communicated with our client to finalize what we wanted included in the final product, what needs to be adjusted accordingly, and what needs to be removed.
About 20+ screens were scrapped or needed to be readjusted to the client’s desire. Many decision choices and research points were given in a final product presentation to the client.
At this current stage, the app is in it’s final development. There were more than two phases of a design QA to locate any bugs and design inconsistencies using TestFlight, as shown here.
final designs
Additional to the standard design are premium themed designs available to clients as well. Proposed by our CEO as another product add-on, I designed primary screens for 6 holiday themes as well.
My process on how to create these themes was to embody the colors that people envision when they think about the holiday. After selecting a simple color palette to abide by, I standardized which features would be modified and created a design style sheet catered to the developers.
Primary, secondary, tertiary, and quaternary colors were highlighted and their hex codes were visible so the dev team can quickly modify the design to the desired theme.
All the themes I have designed have been WCAG 2.0 AA tested and passed their accessibility checks.
MyMontclair is in its final stages of development and soon to be released on both iPhone and Android devices. As of right now, my role as founding designer is complete and awaiting the next steps to continue moving forward.
Besides the UX work for the mobile app, I also designed the ConnectedCity website; ConnectedCity is the brand over MyMontclair, offering other cities, districts, and government sectors a clean, customizable mobile app. You can explore the website by clicking here.
currently
I also designed promotional pieces for the product, ranging from a product brochure to App Store screenshots to logo design and general branding. For any questions or if you’d like to see more of my work, feel free to contact me!