![\"design](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/08\/case-study-ui-design-mobile-app-2.jpg\")
<\/p>\nAmong various functions provided by the growing pool of mobile applications today, more and more options are appearing to deal with various safety and security issues. Our today’s case study is here to show you one of them: let us unveil the creative process for the mobile user interface design of Pazi, the app dealing with the problem of car safety. This project was assigned to Tubik designer Valeria Marusetchenko. Below we will tell about the idea behind the app, user scenarios, UX wireframing and UI design for the project.<\/p>\n
<\/p>\n
Millions of drivers in the world face a problem of car vandalism, damage to a parked car or lack of information about safety issues in different locations.\u00a0The client had an idea to create a community of drivers so that they could easily get and exchange actual information about car accidents in specific areas, find a safe place for parking and get news about their cars left on the parking spaces.<\/p>\n
The application had quite a diverse target audience<\/a> of various age, gender, physical abilities and level of tech literacy. What’s more, in most cases the users would use it on the go on different devices and in diverse conditions of lighting, noise, and other factors influencing user experience. So, the user interface had to be highly intuitive and employ well-recognized patterns of user behavior.<\/p>\n The app had three scenarios:<\/p>\n Let’s have a look at the screens and navigation<\/a> aimed at covering the goals and scenarios mentioned above.<\/p>\n The map on the main screen allows a user to track all of the close incidents and gets fast access to all of the app features.<\/p>\n Search field<\/strong>: aims at the search of the safe parking place and view of all reports in the needed area. The reports screen has two tabs.<\/p>\n All reports<\/strong>: History of all added reports in the current city<\/p>\n My notifications<\/strong>: Reports indicated with the user\u2019s license plate. The user is immediately notified when the report on his car is done.<\/p>\n Traditionally, at the stage of UX wireframing<\/a>, the designer developed the layout, navigation elements placement and flow of interactions in clear monochrome screens.<\/p>\n <\/p>\n Adding a new report is a primary CTA<\/a> on the main screen. The user can choose the type of accident to classify their report. Then a new report screen opens, and the user has to indicate the circumstances of the accident. The address is set automatically by the user\u2019s location, but they can change it in case of a report delay.<\/p>\n The license plate field is a piece of the required information, it activates the opportunity to notify the car owner about the accident that happened with their car. Comment field lets users describe the details of an accident, but it is optional: the main goal is to make the report as fast as possible, so giving details is not obligatory.<\/p>\n Also, the client asked to make the photo\/video attachment as required, so the camera was designed with fast access to the latest photo in the gallery. The recording of the short video is possible by long tap on the camera button.<\/p>\n Also, the designer offered the client to add the possibility to contact the accident witness, but there was a problem with confidentiality and personal data security. So, an optional checkbox was added to the New Report screen: it allows opening the user\u2019s contact info, but only the car owner can do it.<\/p>\n A driver parks his car in any area and turns on the parking mode by pinning the location. The app remembers where the car is left and starts monitoring this area so that the driver could be notified not only with reports with his car plate number but also other accidents reported nearby.<\/p>\n The driver is going to visit a new place and park there. He uses the search to see how many accidents have happened there recently and decide if it is safe to leave the car there, or maybe there is a reason to find another place.<\/p>\n The color scheme is based on light and airy background<\/a> that makes the text content highly readable while the color accents<\/a> easily caught in different conditions of the app use. The client requested the turquoise color as primary, so it helped the designer to understand his vision of the visual style. The idea was to make the app friendly and easy, and round the corners of unpleasant situations by elegant style not provoking any tension or over distraction.<\/p>\n Continuing the style, there was made a decision to illustrate every incident type by a specific\u00a0icon<\/a> and assign a color<\/a> for fast identification of the reports on the map and other screens. Color marking is a well-checked way to reduce the user’s memory load<\/a> and make the interaction patterns quicker and simpler. It helps the user to scan<\/a> and understand the content even before reading about the type of accident.<\/p>\n Simple and handy camera screens and interactions were also included to provide functionality for the core app needs: fast photo or short video. Minimalistic layout and clear navigation allow a user to take a picture instantly right on the accident spot.<\/p>\n Here are some more of the final app screens<\/a>: sign-up\/log-in popup window, interactions with a map, profile and user contact information, etc.<\/p>\n In general, all the user interface design for the mobile app was built around simplicity, intuitiveness, and readability as core issues of positive user experience.<\/p>\n Welcome to review other case studies on UX design process and solutions for a variety of digital products:<\/p>\n CashMetrics. UX Design for Finance Management Service<\/a><\/p>\n Bitex. UX Design for Stock Analysis App<\/a><\/p>\n Inspora. Brand and UI Design for Virtual Stylist<\/a><\/p>\n Nature Encyclopedia. UI Design for Education<\/a><\/p>\n Perfect Recipes App. UX Design for Cooking and Shopping<\/a><\/p>\n Tasty Burger. UI Design for Food Ordering App<\/a><\/p>\n Slumber. Mobile UI Design for Healthy Sleeping<\/a><\/p>\nUser Scenarios<\/h2>\n
\n
![\"design](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/08\/design-case-study-mobile-app-2.jpg\")
<\/p>\n\n
![\"design](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/08\/pazi-app-design-ui-case-study-2.jpg\")
<\/p>\n\n
![\"design](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/08\/pazi-app-design-case-study-2.jpg\")
<\/p>\nUX Design<\/h2>\n
Main Screen<\/h3>\n
\nTab bar<\/strong>: provides fast access to profile and reports screen.
\nAdd button<\/strong>: lets a user add a new report of an accident
\nFeatures<\/strong>: pinning the place allows for tracking the area around a parked car when you are far from it.<\/p>\nReports Screen<\/h3>\n
User Flow<\/h2>\n
Scenario 1<\/h3>\n
![\"UX](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/08\/UX-design-pazi-mobile-app-3.png\")
<\/p>\nScenario 2<\/h3>\n
![\"UX](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/08\/UX-design-pazi-mobile-app-2-2.png\")
<\/p>\nScenario 3<\/h3>\n
![\"UX](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/08\/UX-UI-design-pazi-mobile-app-3-2.png\")
<\/p>\nUI Design<\/h2>\n
Color palette and style<\/h3>\n
![\"UI](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/08\/UI-design-pazi-mobile-app-1-2.jpg\")
<\/p>\n![\"UI](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/08\/UI-design-pazi-mobile-app-2-2.jpg\")
<\/p>\nIcons for accidents<\/h3>\n
![\"\"](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/08\/UI-design-pazi-mobile-app-3-2.jpg\")
<\/p>\nCamera<\/h3>\n
![\"UI](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/08\/UI-design-pazi-mobile-app-4-2.jpg\")
<\/p>\n![\"UI](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/08\/UI-design-pazi-mobile-app-5-2.jpg\")
<\/p>\n![\"UI](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/08\/UI-design-pazi-mobile-app-6-2.jpg\")
<\/p>\nUX Design Case Studies<\/h2>\n