XD | Photoshop
Honk is a mobile parking app that simplifies the parking experience by enabling users to find and pay for parking spots using their smartphones. With real-time information on available parking spaces and seamless mobile payments, Honk streamlines the often frustrating process of parking. Users can also receive notifications to ensure they never forget to renew their parking sessions, offering added convenience and peace of mind.
Unfortunately, the application's layout, features and design falls short when it comes to usability and convenience.
In this project, the objective was to redesign an application, while maintaining the overall brand. As well as making upgrades to the overall usability and features.
In the first part of the case study, I designed the UI kit that would inform the rest of the design. I chose a colour palette that aligned with Honk’s current branding and changed the font to a more rounded typeface to complement the roundedness of the buttons, tags, and icons. I also chose to create a flat UI so that the app would be simple to navigate. Likewise, I added a navigation bar to the kit to make the most used screen more accessible and functional.
For the login screen, I changed it to open as a full-screen view since it is the first screen you see when opening the app. This highlights the company name and tagline with less distraction and pushes the buttons to the center of the screen to make them more apparent.
Once logged in or registered, the app opens to the map screen. In the old version, it gave the user too many options, making it inconvenient to quickly choose a parking spot in the area. In the new version, I chose to display the map with icons of the nearest parking spots with the price to simplify the hassle of selecting an option and then figuring out the pricing. Additionally, I added a search bar for a more specific selection.
The zone screen functions to search parking rates and time limits in the specified area. In the old version, it almost seemed like a payment screen rather than a search screen. In the new version, I combined the nearby parking option from the original map screen and the search bar from the search zone ID screen to create a more seamless transition to finding parking options nearby.
Next is the payment screen. The old version of the screen was anything but simple. It requires going through three different screens to finally pay for your parking. In the new version, I combined elements from all the screens into one and displayed the time duration in a more visual manner so that it would be easy to understand and know when your parking was running out.
The last screen that I chose to redesign was the profile screen. In the old profile screen, the screen is very busy with multiple text boxes with too much information and a lack of hierarchy or personality. In the new version, I added a place for a profile image and reduced the amount of text boxes to what is necessary. Additionally, I varied the sizes of the boxes to give the overall screen more white space.
Overall, I learned the importance of iterative design and the impact of small adjustments in app development. The constraints required small changes to the layout and features rather than a complete overhaul to enhance the user experience.
