DockAwile
Native Web App Project
My Role
UI & Visual Design
Duration
2 Months
Tools Use
Figma, InVision, & Illustrator
Overview
DOCKAwile is a native app designed to offer simple and easy-to-find storage solutions for your boat or to offer up your own space to someone looking for a storage solution.
Problem
There aren’t many app options available for marine owners looking for storage space for their boats and/or boat trailers. The apps that are on the market are typically offering other options as well, like RV/trailer storage and general storage units.
DOCKAwile is a native app, designed for both iOS and Android offering boat storage solutions as well as options or renting out a user’s own space. The primary objective of this mobile app is the solve the largest problem users face – easily finding local storage solutions.
Objective
Visual Identity
Once the UX portion of this app design as well as wireframes were completed, I focused on the branding and visual identity of the interface. Since this UI design is for a native mobile app, I made sure to use all of the components, typography, icons and styles required by the Human Interface Guidelines as well as the Material Guidelines.
The visual components were decided upon after my competitive analysis was done and also taking into consideration the theme of the app being a marine app. The blues and shades of tan made sense in this UI to convey the sense of water, a cool breeze or a sandy beach. The colors are fresh and the typography used satisfied both the iOS and Android requirements.
User Testing & Feedback
I created a set of high-fidelity wireframes in order to create a prototype which was created in Invision. I wanted to conduct some good user testing to see how potential users might move through the screens and pinpoint and potential issues or pain points that might arise.
There was a good amount of positive feedback that I received on the layout and design in terms of the color palette, look and where certain features were placed. However, I was most interested in seeing what the constructive critiques were so that I could enhance the user experience.
I separated the feedback into categories so I could make sure that I was making changes to anything considered critical.
Final UI Designs
After multiple preference tests were conducted on a few screens and final changes were made to the layout based on the user feedback I received, I created the final UI Screens for the iOS and Android versions of the native app. In the final stages, I made sure everything was pixel perfect and my files were clearly named and organized so any development handoff would be simple.
iOS Screens
Onboarding
Home
Messages
Profile
Android Screens
Onboarding
Home
Search Results
Messages
Search Results
Profile
Mockups
Reflections
What Went Well
Through research, user interviews and testing, I believe I was able to create an app that satisfied a need in the market that could not be found anywhere else. It is simple to use and allows the user to find quick, friendly and local storage solutions for their boat. I feel like the overall clean and friendly color scheme and layout is simple to navigate and will be easy for the user to learn.
The Challenges
My initial challenge with the design of this app was during the research phase when comparing other apps on the market today. There are a number of apps for renting spaces but they are primarily centered around real estate. The industry is really lacking apps for storage spaces and those that are out there are storage facility locators. I never did come across an app that was designated soley for boat/marine storage or for land owners to rent out their own space which made it difficult to really navigate to any pain points in other apps out there.
Another challenge in the design process was the learning curve of using Figma. This is the first app I have designed in Figma so learning how to natvigate the interface as well as learn the short cuts and plugins was a bit of a challenger to overcome.
Moving Forward
Moving forward, I need to gain more knowledge on using Figma and will continue to learn more about designing in this software that is so widely used in the industry. I also will perform more preference testing on various screens to gauge the overall feeling of potential users.