WorkflowsUX

How we do

UXExperience MapsFunctional MapWorkflow MapWireframesPrototypesGraphicsQA

WorkflowsWhat we do

WorkflowsStep 1UX

Installation

Stages

Application

Expected

Doing

Comments

First MDS Installation UX Map

Buying Box

Installation package

deployment

Boot

Provides ready to boot CD from a box

or being copiend to Flash drive

Switch booting priorities

7YV]PKLZ�HU�PUZ[HUJL�VM�-LKVYH���

�ř��Command line menu, with an option to install

New MDS as a default, with time out.

Selecting “Start New Storage”

BIOSRead User Guide

Preparebare metal system

matching user guide

requirements

Install CD / Flash

Waiting for 45 sec

timeout for default action

OR

i

User needs to obtain installed copy of

(JYV:JHSL��^P[O�WYLKLÄULK�WHYHT

L[LYZ��

web interface that will be reachable at de-

fault IP inside the same network.

User already has "bare metal" computer,

ready to install AcroScale.

User have the image on USB / CD,

plugged to the targeting system.

User launches clean system with USB

Flash / CD Drive installed.

Loads to comment prompt menu, and se

lects Install AcroScale.

Acceptance- User Guide should describe all neces-

sary steps and parameters for succesfull

installation.-

CD / Flash should include Bootable ISO

^P[O�H�JVW`�VM�(:JHSL�HUK�-LKVY

H����_����

that will load installator, when system

boots from corresponding device.

Command line menu should include an

options to convert bare metal to new

MDS, STS, reset to defaults, change IP

and be selectable with entering numbers

of menu points. Default action should in

clude timeout (45 sec).DEVELOPMENT

PRELIMINARIESExperience Mapis visual representation of user’s goals and expectations that application needs to support. Mapping visible stages to system feedback allows to track user experience between IN and OUT points.

Includes:preliminariesgoals definitionprocessesfeaturesexpectations

UXFunctionality Overview

SuperAdmin Options

User

Account

Event

Contest

Questions

Air Search

QuestionDescription (HTML)

Answers

Contest Custom Content

Custom Text

Name

Sponsor

Description

Terms

Custom HTML

Prize (?)

Image

Quantity of Prizes

Description

Time

Time Limit

Start Time

End Time

Twitter

URL

Message

Location Radius

Map Marker

Winner Value (?)Winner Rule

Logo

Questions

Question Order

Contest Results

Air Search

Competitors prVÄSL

Export CSVMap (Radius)

Event OptionsEvent Status

Name

Custom CSS

Event Details

Description

Top Placeholder

Disclaimer

Banner

LogoSharing Settings

Functional mapstructurized system functionality, links,transitions and available actions. Allows to monitor and prioritize UI elements and interactions.

Includes:logical pagesactionsexternal connectionscontent blocks

WorkflowsStep 2

UX

Login

Primary Screen

(Review Events)Create New Event

New Contest

Questions

Edit Event

Review Users

Add New User

9LHZ�8VHUV�3URӾOH

Edit User Info and Permissions

Options

Customer Admin

(Events and Users

EHORQJV�WR�KLV�DFFRXQWV�

Secondary Screen

(Review Users)

Add New User

9LHZ�8VHUV�3URӾOH

Edit User Info and Permissions

Review Events)XOO�(YHQW�0DQDJH

PHQW

)XQFWLRQDOLW\�6LPLODU�WR�&XVWRP

HU�$GPLQ�

SuperAdmin

�$OO�(YHQWV�DQG�8VHUV

�ZLWK�$FFRXQWV�ӿDJV�

$FFRXQW�6HOHFWLRQ�6WHS�LV�PLVVHG��Z

KHQ�

RQO\�RQH�DFFRXQW�DYDLODEOH�

Primary Screen

(Review Accounts)

Edit Accounts

Create New Account

Add Users

6HOHFW�8VHUV

View / Edit Contest 5HVXOWV

Options

Event Options

3ULPDU\�:RUNӿRZ

6HFRQGDU\�:RUNӿRZ

Super Admin

Customer Admin

/RJLFDO�/LQNV

Primary and Secondary

WorkflowsSuperAdmin and Customer Admin

Workflow mapcross-role connection map, allowing to define exact pages and interactions necessary to archive user’s goal. Also is useful to track actions affecting other system roles and states.

Includes:primary and secondary workflowsystem rolesgoals implementationexact system pages and actions

WorkflowsStep 3

UXUser Story:

User reviews the event through

the included contests list.

All the Event settings are on the

left panel, that can be switched to

edit mode.

User actions allowed:

Ordered by experience priority

Contest Details

Search for contest

Create New contest

Edit Event Info

Delete Contest

Account Change

Sign Out

Page name:

Event Details and contests list

GILD Account 1 > Event Name

Contests

Hello Customer AdminSign Out

Id Name

Sponsor

Start Time

End time Actions

031 Test Visa

Gild

31 May 20:05 31 Jul 22:05 D

etails | Delete

031 Test Visa

Gild

31 May 20:05 31 Jul 22:05 D

etails | Delete

031 Test Visa

Gild

31 May 20:05 31 Jul 22:05 D

etails | Delete

031 Test Visa

Gild

31 May 20:05 31 Jul 22:05 D

etails | Delete

031 Test Visa

Gild

31 May 20:05 31 Jul 22:05 D

etails | Delete

031 Test Visa

Gild

31 May 20:05 31 Jul 22:05 D

etails | Delete

031 Test Visa

Gild

31 May 20:05 31 Jul 22:05 D

etails | Delete

Edit Event Info

Status

Active

Description

Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Vestibulum sem mauris,

semper a tincidunt at, rhoncus vel metus.

Sed quis felis non tortor placerat adipisc-

ing quis sed.

Top Placeholder

Lorem ipsum dolor sit amet, consectetur

adipiscing elit.

Logo

Banner

Diclaimer

Lorem ipsum dolor sit amet, consectetur

adipiscing elit.

Custom CSS

style45.css

Sharing Settings

Enabled

Search

Create New

Понеділок, 13 серпн

я 12 р.

Wireframesactual transformation of functional requirements to user interface. Means layouts, grids and element dependency. Action types clarification and transition management.

Includes:ready-to-development screensprepared to actual designfunctional components

WorkflowsStep 4

UXPrototypesis built feature-by-feature using all the maps and wireframes built in the early stages. Allows to obtain UI metrics, such as speed, acceleration, bottlenecks and points of no return.

Includes:clickable feature-based prototypestrackable transitionsfeature demonstration

WorkflowsStep 5

UXGraphicsactual beauty of the product. Pixel-perfect, optimized typography, colors, textures, shadows and everything needed to achieve ‘The Look and Feel’ of the particular app.

Includes:typographyiconscolorsbuttonslabels

WorkflowsStep 5

UX

Acronis Enterprise Web Console Style Guide

Change History

�� Version 0.1 Alexander Fokin 21.03.13Initial version

Guidesnot every team member has a design skills, so it needs to be supported by Visual styleguide that will declare all the rules used by graphic design, and ease implementation process, allow devs to make independent decisions and check the product quality in QA stage.

Includes:paddingsmodule gridstypographycolorscss

WorkflowsStep 6

UXQAfinal quality is where it needs to be completely same with the mockups and have the same look and feelings as the prototype did. Styleguide, maps and prototype should be referenced at this stage.

Includes:designers involved to QA processquick fixes upon requestboth-side supportsharp eye monitoring

WorkflowsStep 7

UX WorkflowsTimeline and members mapping

Project Start

Functional Map

Experience Map Workflow Map

UX Engineer Project Manager

DevelopersProduct Management

Designer

Feature Instructions

Wireframes

Feature Prototype

Graphics

QA

Project End

QA

DevelopmentFeature Description