appurify: automated testing platform for mobile applications (ux student project)
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. Our design challenge was to make the onboarding process clearer and simplify the steps needed to upload and run a test while still informing the users of the impressive features unique to Appurify. Clickable prototype: http://invis.io/8CJ5IYDH by Maya Wagoner and Shivangi Jain Mehra Note: This project is part of the coursework for the User Experience Design Immersive program (Fall 2013) at General Assembly, San FranciscoTRANSCRIPT
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.
CHALLENGE:Redesign the processes of onboarding and adding and running a test, while informing the users of the impressive features unique to Appurify
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
Dashboard My Apps API Docs [email protected]
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
Uploaded 13 days ago
JSJS
UIAutomation1 Automaton4 SpecificTest.js TeSting.js6 days ago10 test runs
9 days ago20 test runs
15 days ago12 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
Uploaded 2 hours ago
SPECIFICTEST.JS
Uploaded 1 year ago
SUITE-E.JS
Uploaded last month
Dashboard My Apps API Docs [email protected]
Dashboard
Applications
Phone Browser Demo
MyCuteFriend
HabitRPG
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
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
Uploaded 2 hours ago
SPECIFICTEST.JS
Uploaded 1 year ago
SUITE-E.JS
Uploaded last month
Dashboard My Apps API Docs [email protected]
Dashboard
Design Process and Planning
DESIGN RESEARCH
PROBLEMAlthough 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• 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
PERSONA
AGE 28
OCCUPATION Mobile Developer - Currently working on a travel app
TECH LIFE Owns a MacBook Air and an iPhone 5. He also recently got the Pebble watch to check out how it works.
ENJOYS Backpacking, Hiking, Biking, Hackathons, Trying out new tech products, Going to the movies and live music concerts with his girlfriend.
SCENARIO Danny is working on a new iOS mobile travel app with his friend Jack, and is planning to launch it in 3 months. As a startup, their budget is low, and while they develop, they are trying to find an iPad to manually test the app. Danny has iPhone 5, and Jack has iPhone 4, so they will need to test it manually on both devices.However, they’re also in a time crunch to launch their app, and are afraid there might not be enough time to test and debug thoroughly, unless they push the deadline by a couple of weeks.
“We need to test our apps on as many devices as possible, but we have neither the time nor the budget to do it manually”
Developer Danny
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
Upload test file
Test config file
Device selection
Browse
Browse
UI Automation
iPhone 4 iOS 6.1.2 iOS 6.1.4 iOS 6.1.3 iOS 7.0
iPhone 5 iOS 6.1.2 iOS 6.1.4 iOS 6.1.3 iOS 7.0
iPad 2 iOS 6.1.2 iOS 6.1.4
iPhone 4s iOS 6.1.2 iOS 6.1.4 iOS 6.1.3 iOS 7.0
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 RE-EXPLORATION: SKETCHES
DESIGN RE-EXPLORATION: SKETCHES
DESIGN ITERATION 2: PROTOTYPE
Dashboard My Apps API Docs [email protected]
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 3 5 test runs Uploaded 8 days ago
BUILD 2
BUILD 1
TEST SUITES
BUILDS
2 test runs
3 test runs
Uploaded 11 days ago
Uploaded 13 days ago
Click or drag and drop new test suites, or builds to add
RESULTS MY FILES OVERVIEW
JSJS
UIAutomation16 days ago
UIAutomation26 days ago
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
8 Builds 2 Test Suites
5 Builds 3 Test Suites
2 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.
Dashboard My Apps API Docs [email protected]
1. PICK A BUILD OF YOUR APP 2. PICK A TEST SUITE 3. PICK DEVICES TO TEST ON
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
#10-12_2 iOS Robot iPhone 4S iOS 6.1.2
Phone Browser Demo 1 day ago
10 days ago
22 days ago
1 month ago
3 Builds 4 Test Suites
8 Builds 2 Test Suites
5 Builds 3 Test Suites
2 Builds 4 Test Suites
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
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
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
Dashboard My Apps API Docs [email protected]
Click or drag and drop to upload
your first app and start testing!
Acceptable formats: .ipa & .zip
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/
Dashboard My Apps API Docs [email protected]
Setup your first test
Phone Browser
Demo.ipa
5.4 MB
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/
Dashboard My Apps API Docs [email protected]
Click or drag and drop to upload
your first app and start testing!
Acceptable formats: .ipa & .zip
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/
Cats.png
+
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/
Phone Browser
Demo.ipa
5.4 MB
Dashboard My Apps API Docs [email protected]
Woops, looks like that’s a format we don’t support.
Acceptable formats: .ipa & .zip
Don’t have one of these? Use our sample app
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/
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/
Phone Browser Demo.ipa
+
Woops, looks like that’s a format we don’t support.
Acceptable formats: .ipa & .zip
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
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
Uploaded 2 hours ago
SPECIFICTEST.JS
Uploaded 1 year ago
SUITE-E.JS
Uploaded last month
Dashboard My Apps API Docs [email protected]
Dashboard
Applications
Phone Browser Demo
MyCuteFriend
HabitRPG
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
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
Uploaded 2 hours ago
SPECIFICTEST.JS
Uploaded 1 year ago
SUITE-E.JS
Uploaded last month
Dashboard My Apps API Docs [email protected]
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
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 ago intelligently crawls and tests your app
iPhone/iPod Android Phones
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 My Apps API Docs [email protected]
Dashboard
Applications
Phone Browser Demo
MyCuteFriend
HabitRPG
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 ago intelligently crawls and tests your app
iPhone/iPod Android Phones
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
Please pick at least one device to test on!
Dashboard My Apps API Docs [email protected]
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
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 ago intelligently crawls and tests your app
Android Phones
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
iPhone/iPod
Dashboard My Apps API Docs [email protected]
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
Dashboard My Apps API Docs [email protected]
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
Uploaded 13 days ago
JSJS
UIAutomation1 Automaton4 SpecificTest.js TeSting.js6 days ago10 test runs
9 days ago20 test runs
15 days ago12 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.
Dashboard My Apps API Docs [email protected]
Phone Browser Demo
RESULTS MY FILES OVERVIEW
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-12_2 iOS Robot iPhone 4S iOS 6.1.3
#10-12_2 iOS Robot iPhone 4S iOS 6.1.2
#10-12_1 iOS Robot iPhone 5 iOS 6.1.4
#10-12_1 iOS Robot iPhone 5 iOS 6.1.4
#10-12_1 iOS Robot iPhone 5 iOS 6.1.4
#10-12_1 iOS Robot iPhone 5 iOS 6.1.4
#10-10 iOS Robot iPhone 5 iOS 6.1.4
#10-10 iOS Robot iPhone 5 iOS 6.1.4
#10-10 iOS Robot iPhone 5 iOS 6.1.4
#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 Jain 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