:::

products

today
2025
2021
2020
2019
2018
2017
2016
2014

Vitals CRM App

Vital CRM App
Vital CRM App

summary

Vital CRM is a cloud-based customer relationship management system tailored for small and medium-sized enterprises. In 2014, a new version of the app was launched, with a primary focus on helping users efficiently locate clients, record key visit details, manage calendars, and handle follow-up tasks while working in the field.


target

  • Improve the outdated default UI styles from previous versions, which resulted in a lack of product identity, inconsistent user interactions, and poor adaptability to the rise of various mobile device sizes.
  • Enhance convenience for managers and sales representatives working in the field.
  • Introduce a structured design process.

roles

  • UI
  • UX
  • Layout

tools

  • pen adn pepper
  • Illustrator
  • Sketch app
  • 4ourth Mobile Touch Template

process

research

  • Quickly and easily find target individuals.
  • Improve the record-filling process compared to the previous version.
  • Introduce a task management system.
  • Add a sharing system (locations, comments, tasks/appointments, and meetings).
  • Research various mobile device sizes, user interaction patterns, and touch accessibility to inform future layout design.
  • Functional Map, UI Flow, and Wireframe.
  • Ensure alignment with the existing product's visual guidelines and identity while adhering to iOS and Android guidelines as much as possible.
  • Users are often on the move, so the interface must be large and contextually appropriate for various scenarios, such as operating in a car, using one or both hands, tapping, holding, or gripping.
  • Given the large amount of information, avoid unnecessary decorations and focus on presenting data in a clear and easily understandable way.

output

Functional map and wireframe.
Functional map and wireframe.
Key screenshots of the Vital CRM App. Since mobile users typically operate with one hand or by gripping the device, primary actions are positioned centrally and at the bottom (lists, function buttons, and quick actions), while secondary actions (search, menu, and editing) are placed towards the top. The layout adheres to the OS version guidelines at the time. The interface is designed to be equally accessible for both left- and right-handed users, with the quick action button slightly biased to the right, in alignment with system guidelines.
Key screenshots of the Vital CRM App. Since mobile users typically operate with one hand or by gripping the device, primary actions are positioned centrally and at the bottom (lists, function buttons, and quick actions), while secondary actions (search, menu, and editing) are placed towards the top. The layout adheres to the OS version guidelines at the time. The interface is designed to be equally accessible for both left- and right-handed users, with the quick action button slightly biased to the right, in alignment with system guidelines.
Key screenshots of the Vital CRM App (Tablet). In landscape mode, tablets offer a broader operational range compared to portrait mode. Since the central area becomes harder to reach, tasks requiring focus and extended interaction, such as editing customer details, are placed near the center (as the user is more likely to operate with one hand, tapping, or in a stable resting position). For information browsing, the scenario shifts to a two-handed grip with thumb scrolling, so scrollable areas are positioned closer to the edges for better accessibility.
Key screenshots of the Vital CRM App (Tablet). In landscape mode, tablets offer a broader operational range compared to portrait mode. Since the central area becomes harder to reach, tasks requiring focus and extended interaction, such as editing customer details, are placed near the center (as the user is more likely to operate with one hand, tapping, or in a stable resting position). For information browsing, the scenario shifts to a two-handed grip with thumb scrolling, so scrollable areas are positioned closer to the edges for better accessibility.

links