Service Broker Mobile A Service Broker Solution at Your Fingertips
Service Broker Mobile. A Service Broker Solution at Your Fingertips.

Why Mobile App?

Since 2014, a comScore report pointed out that smartphones and tablets combined account for 60 percents of all online traffic. Therefore, HPE Propel is designed and built with responsive UI based on HTML5, so that users can interact with Propel with their tablets or mobile phones as well. However, from our customers' visits, there were lots of conversations keep popping up for the mobile experience. Given that, "Service Broker Mobile" app is designed for filling up the gap in response to our customers' feedback. In additional, for HPE internally, "Service Broker Mobile" project was also considered as the leading project for next-generation HPE Service Broker product by having one mobile client that works with both HPE Propel and HPE Service Anywhere (SAW) backend.

Research and Project Visions

Based on our customers' workflows, I worked with HPE SAW team and narrowed out below cases that a mobile app will be handy:

  1. User works in an outdoor environment.
  2. User is on the go.
  3. User doesn't have a laptop/desktop nearby.
  4. User is in the need of using a photo to describe his/her issue.

A clear sample case from the customer is that:

An employee set up a print job, left his desk and headed toward the printer, and then found the printer was not working. He has to walk back to his desk, and access the web portal on his laptop for filing the support ticket. And chances are the ticket asks for printer's model and serial number, so he has to walk back to the printer, capture the info, and return to the desk for completing the ticket.

Even in this kind of situation, the user still preferred to create the support ticket with the laptop instead of on the mobile browser, is simply because he feels using the laptop is still easier. This reveals that the interaction design on mobile still has rooms for improvement. Hence, we believe a native mobile app with dedicated mobile experience design can deliver additional benefits in terms of Convenience, Speed, and even Personalization, to help users achieve their goals on mobile with ease.

Project Visions

Based on our internal discussions, here are our visions that Service Broker Mobile should:

  • help users solve their problems ASAP.
  • mitigate their frustration.
  • keep users updated with their request status.
  • inform users about the pending tasks.
  • serve as users' personal assistant, especially (but not limited) when users:
    • prefer not to communicate with IT persons.
    • overwhelmed by the massive information.
    • need recommendations for the services.

Also, from HPE SAW team's data, we found that "Over 40% of the requests are covered by less than 1% of the service offerings." And the popularity among the service offerings shows certain similarity and trending within the same organization. And from our side, other than typical "self-services portal" functionalities, HPE Propel's customers are also interested in tracking "Approval" type of events, and they are happy with the "My Workstream" smart feed capability. So we highlighted the primary features of "Service Broker Mobile" are:

  • Provide a self-service portal:
    • Order service offerings
    • File support tickets
  • Keep track of your action items or requests' update (smart feed similar to "My Workstream"):
    • Pending approvals
    • Service/support request update
  • Recommend useful/relevant services based on HPE's smart algorithm:
    • Popular Services
    • Trending in your organization

Design for Mobile

Per our managements, the pilot product will be targeting on Android platform. Hence, I studied the latest practice of mobile design practices and went through the comparative analysis on multiple consumer- facing apps for evaluating the pros and cons. I designed the user interface from wireframing, and try finding ways to help easier streamline the interactions on the mobile. I started from "flow of creating support ticket", the primary use case that customer shared us.

Wireframes

Wireframe, Quick access for ticket creation 1: Add widget on the home screen.
Quick access for ticket creation 1: Add widget on home screen.
Wireframe, Quick access for ticket creation 2: Add hook in Android Gallery app.
Quick access for ticket creation 2: Add hook in Android Gallery app.

I designed two extra quick access routes in addition from the app's home screen. One is allowing users to add the quick access widget on their Android's home screen; the other is added a hook in Android native Gallery app so that users can easily take a photo and directly attach it to the support ticket.


Wireframe, Ticket Creation, first step: quick categorizing the issue types.
Ticket Creation, first step: quick categorizing the issue types.
Wireframe, Ticket Creation, main UI: intelligent agent chat interface.
Ticket Creation, main UI: intelligent agent chat interface.

The first screen of the ticket creation process, the UI presents a grid of issue categories to help the backend system roughly dispatch it to the correct divisions. For the main ticketing UI, I envisioned it like a chat interface and having the intelligent/robot assistant to interact with users and guide through the process.


Wireframe, Intelligent assistant prompt questions to help users avoid typing on mobile.
Intelligent assistant prompt questions to help users avoid typing on mobile.
Wireframe, Users utilize various native capabilities to streamline the process.
Users utilize various native capabilities to streamline the process.

Intelligent/robot assistant should prompt questions, and potentially embedded quick toggle options in messages to help users avoid typing and filling up the long list of questions on the mobile screen. Users can also utilize various native Android capabilities to attach more files, capture photos, geo-tag location, voice-to-text, etc to streamline the ticket creation process.


Wireframe, Based on keyword, intelligent assistant will create support ticket.
Based on keyword, intelligent assistant will create support ticket.
Wireframe, Ticket Creation, main UI: intelligent agent chat interface.
Users can manage all support request on the main page - List View.

By entering/selecting the particular keyword, the intelligent assistant will go ahead and create the support ticket for the user. User can click back key (top left corner) to navigate to the Support Request main page to get the full lists of support requests. Support Requests are grouped by states (i.e. "OPEN", "CLOSE", "ALL"). And on the list view page, UI supports "swipe-to-close ticket", "select multiple and close", "pull-down-to-refresh", and other latest Android native interaction patterns (see details in Ticket Creation Flow Chart below).

Flow Chart - Support Ticket Creation
Flow Chart - Support Ticket Creation.
See full flow chart in a separate browser tab.

High-fidelity Mockups

Hi-Fi mockup: Support Request UI - List View
Support Request UI - List View
Download Hi-Fi Mockup
Hi-Fi mockup: Support Request UI - Swipe-to-close ticket
Swipe-to-close ticket
Download Hi-Fi Mockup
Hi-Fi mockup: Support Request UI - Pull-to-refresh
Pull-to-refresh
Download Hi-Fi Mockup

Your Mobile Home Screen

Mobile home screen - version 1: Leverage HPE Propel launchpad design (better learnability but
										less innovative).
Mobile home screen - version 1: Leverage HPE Propel launchpad design (better learnability but less innovative).

Recall that our project visions include:

  • a self-service portal
  • keep track of action items
  • recommend useful/relevant services

A straightforward approach is to leverage the existing HPE Propel launchpad design as close as it can, but only keeps the essential features that fit the mobile context. Since the UI layout between desktop and mobile app is similar, the learnability should be great for all kinds of users. However, users won't benefit much with this home screen design, since it makes too little differences comparing to Propel's responsive web UI. So this design could be considered as less innovative.


So in the next iteration, I came up a proposed design that provides a more personalized experience. In our internal meetings with HPE SAW team, we both agreed the "Smart Feeds" (HPE Propel: My Workstream-like) capability should be placed on the home screen for proactively bringing user-specific information.

Hi-Fi mockup: My latest home screen design.
My latest home screen design: Action toggles on Smart Feed and a re-designed information architecture.

In addition to the alerting capability, the card now also supports two to three quick actions toggles so that users can respond right away without entering the source app.

And then the "Popular Services" or "Trends in your Organization" is directly placed right below the smart feed section on the home screen. This way, based on HPE SAW team's data analysis and research, the UI should be able to help users discover the services or the supports, and sort of giving the impression of "guessing" what they are looking for.

Also, a floating action button is added to the home screen for easier creating a support ticket.

I also reviewed the information architecture for seeking a new unified UX between HPE Propel and HPE SAW. In my first design, the home screen simply lists out all the micro apps: "Shop", "Request Support", "Knowledge", "Approvals", and "Workstream Inbox" similar to HPE Propel launchpad. While in my latest design, I followed HPE SAW's approach by merging the "Shop" and "Request Support" apps into a single "filing request flow" through categorizing the request types properly. To achieve that, an additional "sliding-up" panel is added with all the high-level categories of the request types. And the "Knowledge" app is replaced by smartly pushing the relevant knowledge-based articles to users during the support ticket filing process.

By now, we only left "Approvals" and "Workstream Inbox" micro apps, and these two are more "event-driven" in nature. So I put them under the hamburger menu along with the red-badge alert for improving the discoverability. When there are pending events/actions in "Approvals" or "Workstream Inbox", the red badge will show up and serve as an additional approach to alert users other than the "Smart Feed" on the home screen.

Hi-Fi mockup: My Latest Mobile Home screen design.
When multiple feeds/alerts, cards are stacked in horizontal to indicate you can swipe right or left for viewing the next feed/alert.
Download Hi-Fi Mockup
Hi-Fi mockup: Scroll up from the home screen.
When scrolling up, the "New Ticket" floating button is dismissed and "BROWSE CATEGORIES" panel moves down for more viewing space.
Download Hi-Fi Mockup
Hi-Fi mockup: Tab on the BROWSE CATEGORIES panel.
Tab on "BROWSE CATEGORIES", the panel slides up and merges into the status bar along with the "back button" for dismissing this panel.
Download Hi-Fi Mockup