Fujie Design
Visual | UX | Experience
omsArtboard 3.png

OMS Calculator | Web app

Project overview

OMS Calculator is an internal sale tool for Microsoft Virtual Machines. This web app is designed to be utilized for sales teams to calculate quotes based on the amount of client's needs of virtual machines. The web app can then be connected to existing portal to compose an estimate of cost for sales persons to send out to the potential client. 

omsArtboard 3.png

Design Challenge

As an internal sale's tool, the daily users will be sales personnel that deals with sales pipelines, data, costs and negotiation. They are not trained to be tech-savvy or guaranteed to be highly-adaptable to nuances of visual languages. Thus, the interface should maximum the usability and clarity of the functionalities of the tool, with minimum interference and overwhelming visual elements

My Role & Timeline

Week 1-2: UX design - User flow; black and white wireframes; clickable digital prototypes; 

Week 2-3: Visual designer - Color palette decision; iconography; html-ready visual composition; visual style direction and design; guideline generating for handoffs to front-end development.

Phase 1: Translating business requirement into user flow

I was briefed by business analysts with the business requirement and the algorism they have acquired from the client.

The algorism will calculate the costs of three tiers of services based off four initial input of the data:

1) If the buyer has access to System Center;

2) amount of standard license buyer has already owned;

3) amount of Data-center licenses buyer has already owned

4) amount of Virtual Machines buyer intends to use.

Then the algorism will process and display three tiers of service costs tailored with installation plans. The sales person can further edit the input based on client's needs to generate estimate of costs for buyer to compare among the plans. 

Artboard 7.png

Wireframe 1.1

For the first round of wireframe, I mapped out three variations of layouts to show a series of four questionnaire-based input fields that allow sales person to input initial data points.

Artboard 9.png

Wireframe 1.2

Visual variation of display of questionnaire and input fields.

Artboard 10.png

Wireframe 1.3

Visual variation of display of questionnaire and input fields.

| Review and Feedbacks

Artboard 1.png

Review, Feedbacks and Decisions

The design was then reviewed with my art director and cross teams with business analysts. We decided to proceed with v 1.1 with iteration. The decision was made for two main reasons:

1) Less page space is used to display the same amount of information. Users don't need to scroll  down for more information and can see CTA button in the same view. 

2) The layout is visually clear to users about the length of the questionnaire. The tool tip for explaining technology terms is also displayed with the question to add clarity. 


| Wireframe for Result page 

The next phase of wireframe stage was to design the result page that shows calculated costs and comparison of  tiers of services. The result page will also have capabilities of editing original inputs for further customization of buyer's needs. 

For example, the result page will show three tiers of services with costs, included services and marked out services that are not available in lower-tier offerings. Users can then change inputs to see immediate change of costs (such change includes with change of license ownerships, storage capacities and a series of related offerings) 

Artboard 16.png

Wireframe for result page

This mockup shows the calculation result for price and service comparison purpose. Three tiers of prices are laid out side by side, with indication of included services or additional costs for extra services.

Each of the service can be further modified for customization. Most of the services can be customized with single-choice from no more than three options (e.g.: Storage can be a single choice chosen from "20GB", "50GB" or "100GB".)

This page is also required to have legal information such as disclaimers, basis of calculation, notes and further resources of product. 

This page can also be exported into PDF files by sales person to be shared with buyers.

Artboard 2.png

Variation of mockup

Calculated result page

| Review and feedbacks

The team reviewed the design with client, art director and business analysts to make sure all the business requirements have been met. After getting satisfied feedback from the client, I proceeded with implementation of color, iconography and visual design.

Change of request: 

One change of request came in on the second day of visual design process. Sale scripts was added to the scope and was required to be displayed with each of the service offerings so that sales person can access and leverage this information when talking to the buyer about certain service. 

I decided to implement and reflect this change with incorporation of typography to address proper reading hierarchy. On one hand, I did not want add more complexity into an already content heavy page with intensive information. On the other hand, these scripts are short paragraphs that serve the purpose of tool tips. It could be hidden or manually tuned on for display when needed. 

| Phase Two: Visual Design and iconography 

Utilizing the brand's visual guideline in font usage, I assigned reading hierarchy to different levels of content with emphasis on active/inactive fields. The goal was to make clear to users about which services are included in the package, whether certain service is customizable or optional, or is disabled based on current input. This version of iteration also incorporated improvement on input field design.

hifiArtboard 16.png

| Phase three: Final handoffs for front-end development

hifiArtboard 15.png
hifiArtboard 46.png
With sales script expanded

With sales script expanded