Appurify process

Maya WagonerShivangi Jain MehraUser Experience Design Immersive 2013General Assembly, San Francisco

PRODUCT DESCRIPTION

Appurify is a web-based application that provides mobile developers with the flexibility to test their mobile apps on a variety of locations, memory conditions, networks, and real devices.

TEST AUTOMATION FOR MOBILEON REAL IOS AND ANDROID DEVICES

Dashboard My Apps API Docs [email protected]

Help Getting StartedStep-by-step tutorial & video

You can also run iOS Selenium tests against one or more URLs. Start by adding the primary url below:

Submit

http://example.com/Click or drag and drop to upload

your first app and start testing!

Acceptable formats: .ipa & .zip

Don't have one of these? Use our sample app


Photo Browser Demo

RESULTS MY FILES OVERVIEW

iOS Robot8 days ago

SETUP TEST Select a test suite...

BUILD 3 5 test runs Uploaded 8 days ago

BUILD 2

BUILD 1

Test Suites

2 test runs

3 test runs

Uploaded 11 days ago


JSJS

UIAutomation1 Automaton4 SpecificTest.js TeSting.js6 days ago10 test runs

9 days ago20 test runs


2 monts ago9 test runs

Builds

Click or drag and drop to upload a new builds, test

suites, or apps

more info

iOS RobotYesterday

SpecificTest.jsYesterday

iOS Robot2 hours ago

UIAutomation11 hour ago

Clickable Prototype : http://invis.io/8CJ5IYDH

CORE SCREENS & PROTOTYPE

DASHBOARDMY FILES

ONBOARDING

Applications

Phone Browser Demo

MyCuteFriend

HabitRPG

Applications

Setup a Test for

1. PICK A BUILD OF YOUR APP 2. PICK A TEST SUITE 3. PICK DEVICES TO TEST ON

ADVANCED OPTIONS

Phone Browser Demo

OR UPLOAD A NEW APP

BUILD #10-12_2 IOS ROBOT - Default

Uploaded 1 hour agointelligently crawls and tests your app

Android Phones

iPad

RUN

Android Tablets

iPhone/iPod

4. PICK A NETWORK TO TEST IN 5. ENTER LOCATION PICK MEMORY LEVEL

Enter address, zip, city or region

Use default memory of device

OR

0(MB) 250125

190

275 500

EDGE

2G

3G

4G

DSL

LTE

OR SELECT ANOTHER BUILD

BUILD #10-12_1

Uploaded 2 hours ago

BUILD #10-10_3

Uploaded yesterday

STABLE SUSIE

Uploaded 1 month ago

OR SELECT ANOTHER TEST

AUTOMATION.JS


SPECIFICTEST.JS

Uploaded 1 year ago

SUITE-E.JS

Uploaded last month


Dashboard

Applications

Phone Browser Demo

MyCuteFriend

HabitRPG

Setup a Test for


ADVANCED OPTIONS

Phone Browser Demo

OR UPLOAD A NEW APP



Android Phones

iPad

RUN

Android Tablets

iPhone/iPod


BUILD #10-12_1


BUILD #10-10_3

Uploaded yesterday

STABLE SUSIE



AUTOMATION.JS


SPECIFICTEST.JS

Uploaded 1 year ago

SUITE-E.JS

Uploaded last month


Dashboard

Design Process and Planning

DESIGN RESEARCH

PROBLEM SPACEAlthough potential users are excited about the product, many users currently drop off when they are asked to upload their first app or run their first test. Through usability testing, we were able to discover which specific obstacles developers were running into.

OPPORTUNITIES IDENTIFIED• Make the onboarding process

more clear• Simplify the steps needed to

upload and run a test while still informing the users of the impressive features unique to Appurify

CURRENT APP

Sign in

CURRENT APP

Sign in

Add a build

Add a test

CURRENT APP

Sign in

Add a build

Add a test

Setup & run test

View results(in progress)

CURRENT APP

Sign in

Add a build

Add a test

Setup & run test

View results(complete)

SKETCHES & INSPIRATIONS

METHODSAfter defining the existing user journey, we looked at analogous inspirations of simple flows for onboarding, adding files, and setting up a complex process.

FINDINGS• linear, guided onboarding process of

Flinto.• easy-add on dashboard in Pinterest; • uninterrupted, focussed form flow in

Typeform;

OPPORTUNITIESApply tested UI patterns to simplify the task flow for testing an app on Appurify

Sign in

Add a build

Add a test

Setup & run test

View results

IDEATION SKETCHES

We started applying UI patterns to existing functionality and sketching ideas for uploading an app and running a test.

The process was simplified and made clearer by strategically hiding and showing information.

DESIGN ITERATION 1: PROTOTYPE

METHODSStreamlined and digitized wireframes.Went on to user test with some developers and got feedback from client

FINDINGS• Navigation still needed

further simplification.• Some terms needed to be

redefined like test, test run, test script, test suite and run a test, setup a test run, create a test etc.

• Visual styling of results needed more work, and technical feasibilities taken into account

OPPORTUNITIESRe-look at the flow, visual styles and categorization

DESIGN RE-EXPLORATION: SKETCHES



DESIGN ITERATION 2: PROTOTYPE


Phone Browser Demo

UIAutomation3.24 days agoUIAutomation3.14 days ago

UIAutomation26 days ago

UIAutomation16 days agoiOS Robot8 days ago

Setup test run Select a test suite...


BUILD 2

BUILD 1

TEST SUITES

BUILDS

2 test runs

3 test runs



Click or drag and drop new test suites, or builds to add


JSJS



UIAutomation3.14 days ago

UIAutomation3.24 days ago

+ Upload another test suite

+ Upload a new build

Phone Browser Demo 1 day ago

10 days ago

22 days ago

1 month ago

3 Builds 4 Test Suites




Travel Lite iPhone App

OrderSmarter

Decision Loop

• Redesigned navigation.• Placed ‘Setup a test’ process

on the dashboard for easy access.

• Designed the ‘Setup a test’ flow as a 3-step process, with advanced options.

• Categorized tests and builds into my files for easier understanding for users as they upload files.



Advanced Options

Build #10-12_2 iOS Robot DefaultUploaded 1 hour ago intelligently crawls and tests your app

iPhone/iPod Android Phones

iPad

RUN

Or drag and drop to upload a new

buildmore info

Or drag and drop

to upload your own test script

more info

Android Tablets

TESTS IN-PROGRESS

RECENTLY COMPLETED TESTS

SETUP A TEST FOR PHONE BROWSER DEMO

Build Test Suite Device OS Version

#10-12_2 iOS Robot iPhone 5 iOS 6.1.4

#10-12_2 iOS Robot iPhone 5 iOS 7.0

#10-12_2 iOS Robot iPhone 4S iOS 6.1.3


Phone Browser Demo 1 day ago

10 days ago

22 days ago

1 month ago





Travel Lite iPhone App

OrderSmarter

Decision Loop

Design Specifications

USER ROLES

Developer

Develops app, writes test script,runs automated test,

checks results,fixes bugs and crashes

QA MAnAger (if AvAilAble)Runs automated test for quality check,

checks results,provides feedback to developer to fix code

Appurify ClouD

Runs test as per configurationgives and saves results in the form of

visuals and error logs

CONCEPT MODEL

logins to

OR

DASHBOARD TEST RUN

TESTRESULTS

APP BUILDS

TEST SCRIPTS

add & access

add & access

setup

view & access

view & access

get

Developer QA MAnAger

SITE MAP

Dashboard First run: Welcome, Upload app

Dashboard Returning user

Setup a test run Test Run Results

Individual Result

My Applications My Files

My Apps-Individual App

Sign In

SIgn Up

Marketing site

Recent Results Overview

CORE SCREEN 1 : UPLOAD AN APP




Submit

http://example.com/Click or drag and drop to upload



Don't have one of these? Use our sample app

AB

C

A

B

C

Drag in area to upload appHover over - Darkens grey box Click - opens file browser,Drag and drop app file - Starts app upload process

iOS Selenium TestType in URL, hit Submit to test

Help buttonLeads user to a Tutorial or Sample app test process

TASK FLOW 1 : UPLOAD AN APP


Click or drag and drop to upload





Submit

http://example.com/


Setup your first test

Phone Browser

Demo.ipa

5.4 MB



Submit

http://example.com/


Click or drag and drop to upload





Submit

http://example.com/

Cats.png

+




Submit

http://example.com/

Phone Browser

Demo.ipa

5.4 MB


Woops, looks like that’s a format we don’t support.


Don’t have one of these? Use our sample app



Submit

http://example.com/




Submit

http://example.com/

Phone Browser Demo.ipa

+

Woops, looks like that’s a format we don’t support.


Don’t have one of these? Use our sample app

Sign in - First run

Correct format app file dragged in

Incorrect format file dragged in

Square fills in from bottom to top as app uploads

Clear error message

Square complete blue when app is uploaded, active green button appears: ‘Success! Run your first test”

1

4

2

5

3

6

Applications

Phone Browser Demo

MyCuteFriend

HabitRPG

Applications

Setup a Test for


ADVANCED OPTIONS

Phone Browser Demo

OR UPLOAD A NEW APP



Android Phones

iPad

RUN

Android Tablets

iPhone/iPod

4. PICK A NETWORK TO TEST IN 5. ENTER LOCATION PICK MEMORY LEVEL

Enter address, zip, city or region

Use default memory of device

OR

0(MB) 250125

190

275 500

EDGE

2G

3G

4G

DSL

LTE


BUILD #10-12_1


BUILD #10-10_3

Uploaded yesterday

STABLE SUSIE



AUTOMATION.JS


SPECIFICTEST.JS

Uploaded 1 year ago

SUITE-E.JS

Uploaded last month


Dashboard

Applications

Phone Browser Demo

MyCuteFriend

HabitRPG

Setup a Test for


ADVANCED OPTIONS

Phone Browser Demo

OR UPLOAD A NEW APP



Android Phones

iPad

RUN

Android Tablets

iPhone/iPod


BUILD #10-12_1


BUILD #10-10_3

Uploaded yesterday

STABLE SUSIE



AUTOMATION.JS


SPECIFICTEST.JS

Uploaded 1 year ago

SUITE-E.JS

Uploaded last month


Dashboard

CORE SCREEN 2 : SETUP A TEST

A

E

B

D

F

C

G

H

I

A Pick a buildThree most recent builds, along with any others favorited by the user appear in the list. Any previous builds can be selected from the drop down menu at bottom of the list.

B Pick a test suiteThree most recently uploaded test suites appear on the list along with iOS Robot. Previous test suites can be selected from the drop down menu at the bottom of the list.

C Pick devices to test onClick on one of the four categories - pop up appears with options to multi-select different devices and OS.

E Pick networkClick on one of the 6 categories around the center - gives options in the center for single selection. Highlighted spotlight path indicates which option is selected. Clicking on another category would lead to selection spotlight rotating around the center to selection

F Enter locationAs user starts typing a location or zipcode, auto-suggest options. Selection of an option would lead to reloading of the map with the pin at selected location

G Pick memory levelSlide over to set memory level with visual cues (red, yellow, green) for memory definition. Slider bar fills in to lower transparency as the slider control is moved

H Run buttonGets activated once options A,B,C are selected. On click, user is taken to My Apps>Results page.

I My AppsDirect access to apps - clicking on any one takes user to My Apps>Results page.

D Advanced OptionsClicking this link reveals E,F,G.

TASK FLOW 2 : SETUP A TEST

Applications

Phone Browser Demo

MyCuteFriend

HabitRPG

Setup a Test for


ADVANCED OPTIONS

Phone Browser Demo

OR UPLOAD A NEW APP

BUILD #10-12_2 IOS ROBOT Default

Uploaded 1 hour ago intelligently crawls and tests your app


iPad

RUN

Or drag and drop to upload a new build

more info

Or drag and drop to upload

your own test script

more info

Android Tablets


Dashboard

Applications

Phone Browser Demo

MyCuteFriend

HabitRPG

Setup a Test for


ADVANCED OPTIONS

Phone Browser Demo

OR UPLOAD A NEW APP




iPad

RUN


more info



more info

Android Tablets

Please pick at least one device to test on!


Dashboard3. PICK DEVICES TO TEST ON

SAVE

IPHONE 5 IPHONE 4S

IPHONE 4 IPOD 5

iOS 7.0 iOS 6.1.4 iOS 6.1.3 iOS 6.1.2

cancel or

iOS 7.0 iOS 6.1.4 iOS 6.1.3 iOS 6.1.2

iOS 7.0 iOS 6.1.4 iOS 6.1.3 iOS 6.1.2

iOS 7.0 iOS 6.1.4 iOS 6.1.3 iOS 6.1.2

Applications

Phone Browser Demo

MyCuteFriend

HabitRPG

Setup a Test for


ADVANCED OPTIONS

Phone Browser Demo

OR UPLOAD A NEW APP



Android Phones

iPad

RUN


more info



more info

Android Tablets

iPhone/iPod


Dashboard

After uploading app, user is taken to a simple 3-step process where they can pick builds, test suites (or test with iOS Robot) and devices. Selected state for builds and test suites is a filled in blue box, unselected state would have only the stroke blue

On clicking a device, pop up appears with different models and operating systems of that device for multi-selection. After checking the boxes, user hits the ‘Save’ button to save selection for the test run.

Once options for first three steps are selected, ‘Run’ button gets activated in red.On clicking Run, user is taken to My Apps>Results page.

1 2 3


Photo Browser Demo


iOS Robot8 days ago

SETUP TEST Select a test suite...


BUILD 2

BUILD 1

Test Suites

2 test runs

3 test runs



JSJS

UIAutomation1 Automaton4 SpecificTest.js TeSting.js6 days ago10 test runs



2 monts ago9 test runs

Builds

Click or drag and drop to upload a new builds, test

suites, or apps

more info

iOS RobotYesterday

SpecificTest.jsYesterday

iOS Robot2 hours ago

UIAutomation11 hour ago

CORE SCREEN 3 : SINGLE APP>MY FILES

A

C

E

D

B

A App Navigation: My FilesBuilds are listed in an accordion with most recent results, simple visual indicating results, details about test runs on the build, upload days. When a menu is expanded, option to edit or delete appear on the same bar as icons.

C Easily add test suite or build for the appDrag in area for new test suite or build, similar to welcome screen

D Setup a testSelect a test suite from the dropdown and hit setup test run to test the selected build.

B Test suitesTest suites appear as uploaded files with format icons to make them easily identifiable. Once selected, there would be a blue stroke. Cross to delete appears on top right of the file icon, and file is clickable to download/view

E Other BuildsPrevious builds are collapsed - Visible details are number of test runs and upload days.


Phone Browser Demo


Build Test Suite Device OS Version 10/29/134:54 PM #10-12_2 iOS Robot iPhone 5 iOS 6.1.4

#10-12_2 iOS Robot iPhone 5 iOS 7.0







#10-10 iOS Robot iPhone 5 iOS 6.1.4




CORE SCREEN 4 : SINGLE APP>RESULTS

B

C

B Hover over Single resultTurns dark grey, shows time of test completion and option to delete test result

C Test statusFailed/passed icons and text colour indicate test status. All results are clickable leading to individual results

A Sort by categoryThe test results can be sorted easily by build, test suite, device or OS version in a grid

A

Shivangi MehraUX Designer

Currently studying Experience Design at General Assembly, San Francisco, with work experience in Architecture, Landscape Design, and Visual Design (Print, Web, Marketing collaterals).

A design enthusiast, I love to travel and find inspiration at every step!

[email protected] (650) 532-4691 www.blusquaredesigns.comt @shivangijmehra

Maya WagonerUX Designer

A current student of Experience Design at General Assembly and a longtime student of the world. Experienced with systems design and working with small teams on social web apps and civic projects.

[email protected] (310) 738-6857t @mayamayaw

Q&A