Case Study Banner

Project Summary

The AgilePoint NX app helps to view and manage tasks on mobile devices and access our customer's enterprise applications running on the AgilePoint Platform. The app provides similar functionality to the Modern Work Center (one of the platform components). Our customers can customize the app based on their brand: change the logo, themes, and images that match their company branding with a paid add-on functionality of the AgilePoint NX product - Mobile App Accelerator. The original app was designed five years before this redesign.

Key Features:

  • Access enterprise apps on your mobile device

  • View and execute your business tasks

  • Manage your team’s activities, and collaborate

  • Reassign, delegate or cancel tasks

  • Manage tasks efficiently using the day planner

  • Visualize live business process flow and user participation

Project Details

Role :

UI/UX Designer

Team :

Myself /  Naveed Akhtar (UX Designer) / Manoj Chandola (Software Engineer)  / Harish Lakshman (Project Manager) / Nishant Shrivastava (Head of Product Development)

Tools :

Sketch, InVision, Figma

Duration :

3 months

Problem Definition

Problem Icon
  • The app needed a visual refresh and an improved User Experience
  • A team wanted to focus on bringing everything our customers know and love in the Modern Work Center to mobile devices
  • We wanted to keep a delicate balance between the existing app and new capabilities and features without adding obstacles such as additional training.
Solution Image
Use flow Image

Inventory/Audit

When I joined this project, the team had already started exploring the ideas. I was onboarded with some documentation and thoughts they began coming up with to understand the background better. After all opinions and ideas were collected, we made a document that includes medium fidelity screens with an explanation to review with stakeholders:

Use flow Image

Visual Explanation

Based on the feedback collected, I started creating UI Screens. I wanted to focus on simplicity and functionality, so I have chosen white and light grey as base colors, adding blue as a primary. Also, I defined adding some visual language as illustrations to our app with the hope of creating delight and emotional connection with our customers. At first, I created UI for the five main app screens:

Concept Image

1. My Apps

Provides a list of apps that have been published for your use.

02. My Tasks

Manages business tasks assigned to you with options to reassign, delegate or cancel tasks.

Concept Image
Concept Image

03. Home

Provides tasks summary statistics, shortcuts, and frequently used apps.

04. My Team

Manage your team’s activities, and collaborate.

Concept Image
Concept Image

05. Outbox

Shows eForms and tasks that have been submitted in offline mode. Once the mobile app is online, these forms are synchronized with the AgilePoint NX system.

Then I presented them to the stakeholders for review and got positive feedback, so I was able to finalize the rest of the screens (in total 60+):

Outcomes

Problem Icon

I worked closely with the engineering team to ensure that there was no inconsistency between the design and app implementation. After a few rounds of build review and testing on devices, we were able to update it on App Store - link

As a result of this redesign, our app got consistent aesthetics with improved accessibility. Also, our users got full feature parity with the desktop experience.

One of our new features, a powerful day planner to set reminders to work on tasks, start new requests, or make a note to yourself, got very useful based on what we hear from the customers.

Key Learnings

Problem Icon
  1. Create a user journey and identify points to introduce little delights (illustrations, feedback screens). Forming a personality for a product is not only fun, but it will engage your users in a whole different way.

  2. Implementing new tools during a live project can overwhelm you, but you don’t always have the time to try them out beforehand. If you have a clue that another tool might work better, use it and avoid the infinite loop of “coulda-shoulda-woulda.”

  3. During the design phase, it is essential to include the engineering team as early as possible to validate the feasibility of the design.