Appurify process
1 like468 views
The document describes the design process for improving the onboarding experience for a mobile testing platform called Appurify. Key steps included: 1. Analyzing the current user journey through usability testing to identify obstacles during onboarding. 2. Inspired by other products, simplifying the onboarding process through a linear, guided workflow and easy file uploading. 3. Further iterations included streamlining navigation, categorizing files, and reducing the setup process to three main steps. 4. The final design prototypes implemented tested UI patterns and addressed usability issues found through user feedback.
Appurify process
- 1. Maya Wagoner Shivangi Jain Mehra User Experience Design Immersive 2013 General Assembly, San Francisco
- 2. TEST AUTOMATION FOR MOBILE ON REAL IOS AND ANDROID DEVICES 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. PRODUCT DESCRIPTION
- 3. Clickable Prototype : http://invis.io/8CJ5IYDH Dashboard My Apps API Docs Tools Dashboard user@gmail.com You can also run iOS Selenium tests against one or more URLs. Start by adding the primary url below: Help Getting Started Dashboard Setup a Test for Phone Browser Demo 1. PICK A BUILD OF YOUR APP BUILD #10-12_2 Uploaded 1 hour ago BUILD #10-10_3 Uploaded yesterday ONBOARDING STABLE SUSIE Tools user@gmail.com MY FILES RESULTS Dashboard BUILD #10-12_1 Uploaded 1 year ago 2G Uploaded yesterday 3G 4G Automaton4 9 days ago 20 test runs SpecificTest.js TeSting.js 15 days ago 12 test runs more info 2 monts ago 9 test runs 3. PICK DEVICES TO TEST ON 5. ENTER LOCATION IOS ROBOT - Default PICK MEMORY LEVEL intelligently crawls and tests your app AUTOMATION.JS Uploaded 2 hours ago STABLE SUSIE LTE Uploaded 1 month ago SUITE-E.JS Uploaded last month DSL OR SELECT ANOTHER BUILD Click or drag and drop to upload a new builds, test suites, or apps OR iPad UPLOAD A NEW APP Android Tablets ADVANCED OPTIONS 2. PICK A TEST SUITE EDGE JS 190 Uploaded 2 hours ago JS SPECIFICTEST.JS Uploaded 1 year ago OR SELECT ANOTHER TEST ADVANCED OPTIONS MyCuteFriend HabitRPG RUN Builds 5 test runs Uploaded 8 days ago iOS Robot 2 hours ago SpecificTest.js Yesterday iOS Robot Yesterday iOS Robot 8 days ago BUILD 2 2 test runs 3 test runs Applications Applications Uploaded 11 days ago BUILD 1 UIAutomation1 1 hour ago BUILD 3 Uploaded 13 days ago Select a test suite... SETUP TEST MY FILES CORE SCREENS & PROTOTYPE Phone Browser Demo MyCuteFriend (MB) 0iPhone/iPod 125 250 Android 275 Phones 500 OR Use default memory of device Enter address, zip, city or region Phone Browser Demo Android Phones SPECIFICTEST.JS Applications BUILD #10-10_3 Test Suites iPhone/iPod Uploaded last month user@gmail.com SUITE-E.JS 4. PICK A NETWORK TO TEST IN BUILD #10-12_2 OVERVIEW Tools Uploaded 2 hours ago OR SELECT Test for OR SELECT ANOTHER Setup a ANOTHER BUILDPhone Browser DemoTEST Uploaded 1 hour ago API Docs AUTOMATION.JS 1. PICK A BUILD OF YOUR APP Photo Browser Demo - Default intelligently crawls and tests Uploaded 1 month ago API Docs IOS ROBOT 3. PICK DEVICES TO TEST ON My Apps your app Uploaded 2 hours ago OR UPLOAD A NEW APP 2. PICK A TEST SUITE Dashboard BUILD #10-12_1 Don't have one of these? Use our sample app UIAutomation1 6 days ago 10 test runs user@gmail.com Tools Step-by-step tutorial & video Acceptable formats: .ipa & .zip API Docs Submit your first app and start testing! My Apps http://example.com/ Click or drag and drop to upload Dashboard My Apps HabitRPG DASHBOARD iPad Android Tablets
- 4. Design Process and Planning
- 5. PROBLEM SPACE Although 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 DESIGN RESEARCH
- 7. Sign in Add a build Add a test CURRENT APP
- 8. Sign in Add a build Add a test Setup & run test View results (in progress) CURRENT APP
- 9. Sign in Add a build Add a test Setup & run test View results (complete) CURRENT APP
- 10. METHODS After defining the existing user journey, we looked at analogous inspirations of simple flows for onboarding, adding files, and setting up a complex process. Sign in FINDINGS • linear, guided onboarding process of Flinto. • easy-add on dashboard in Pinterest; • uninterrupted, focussed form flow in Typeform; Add a build Add a test OPPORTUNITIES Apply tested UI patterns to simplify the task flow for testing an app on Appurify Setup & run test View results SKETCHES & INSPIRATIONS
- 11. 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. IDEATION SKETCHES
- 12. METHODS Streamlined 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 OPPORTUNITIES Re-look at the flow, visual styles and categorization DESIGN ITERATION 1: PROTOTYPE
- 16. • • Dashboard My Apps Dashboard My Apps API Docs Tools user@gmail.com 1 day ago 4 Test Suites Travel Lite iPhone App 10 days ago 2 Test Suites 10 days ago 1. PICK A BUILD OF YOUR APP OrderSmarter OrderSmarter 5 Builds 22 days ago 3 Test Suites 2. PICK A TEST SUITE 3. PICK DEVICES TO TEST ON 22 days ago 3 Test Suites Decision Loop 2 Builds Phone Browser Demo 2 Test Suites MY FILES API Docs SETUP A TEST FOR PHONE BROWSER DEMO 8 Builds Travel Lite iPhone App 8 Builds RESULTS user@gmail.com 1 day ago 4 Test Suites Phone Browser Demo 5 Builds Tools 3 Builds Phone Browser Demo 3 Builds 1 month ago OVERVIEW Build #10-12_2 Uploaded 1 hour ago 4 Test Suites Decision Loop 2 Builds 1 month ago iOS Robot 4 Test Suites Default intelligently crawls and tests your app BUILDS BUILD 3 Uploaded 8 days ago UIAutomation3.2 4 days ago Or drag and drop to upload a new build Click or drag and drop new test suites, or builds to add UIAutomation3.1 4 days ago UIAutomation2 Or drag and drop to upload your own test script more info 5 test runs more info iPhone/iPod Android Phones 6 days ago iPad Android Tablets UIAutomation1 6 days ago iOS Robot Select a test suite... 8 days ago Advanced Options Setup test run • 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. BUILD 2 2 test runs BUILD 1 3 test runs RUN Uploaded 11 days ago • Uploaded 13 days ago TESTS IN-PROGRESS + Upload a new build TEST SUITES RECENTLY COMPLETED TESTS JS JS UIAutomation1 UIAutomation2 UIAutomation3.1 UIAutomation3.2 6 days ago 6 days ago 4 days ago 4 days ago + Upload another test suite DESIGN ITERATION 2: PROTOTYPE Build #10-12_2 Test Suite iOS Robot Device iPhone 5 OS Version 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
- 18. QA Manager (if available) Runs automated test for quality check, checks results, provides feedback to developer to fix code Appurify Cloud Developer Develops app, writes test script, runs automated test, checks results, fixes bugs and crashes USER ROLES Runs test as per configuration gives and saves results in the form of visuals and error logs
- 19. OR Developer QA Manager dd a logins to & ss ce ac view setup DASHBOARD ad d APP BUILDS & ac ce ss TEST SCRIPTS CONCEPT MODEL view & access s cces &a TEST RUN TEST RESULTS et g
- 20. Marketing site SIgn Up Sign In Dashboard First run: Welcome, Upload app Dashboard Returning user Setup a test run My Applications My Apps-Individual App Recent Results Test Run Results Individual Result SITE MAP My Files Overview
- 21. Dashboard My Apps Click or drag and drop to upload your first app and start testing! API Docs Tools user@gmail.com You can also run iOS Selenium tests against one or more URLs. Start by adding the primary url below: http://example.com/ A B Submit Acceptable formats: .ipa & .zip Help Getting Started Step-by-step tutorial & video A Drag in area to upload app Hover over - Darkens grey box Click - opens file browser, Drag and drop app file - Starts app upload process C B iOS Selenium Test Type in URL, hit Submit to test Don't have one of these? Use our sample app C Help button Leads user to a Tutorial or Sample app test process CORE SCREEN 1 : UPLOAD AN APP
- 22. Dashboard My Apps API Docs Tools Dashboard My Apps user@gmail.com You can also run iOS Selenium tests against one or more URLs. Start by adding the primary url below: Submit Help Getting Started Step-by-step tutorial & video Tools user@gmail.com You can also run iOS Selenium tests against one or more URLs. Start by adding the primary url below: http://example.com/ Click or drag and drop to upload your first app and start testing! API Docs http://example.com/ Submit Click or drag and drop to upload your first app and start testing! Help Getting Started Step-by-step tutorial & video + Acceptable formats: .ipa & .zip Acceptable formats: .ipa & .zip Dashboard My Apps Woops, looks like that’s a format we don’t support. API Docs Tools user@gmail.com You can also run iOS Selenium tests against one or more URLs. Start by adding the primary url below: http://example.com/ Submit Help Getting Started Step-by-step tutorial & video Acceptable formats: .ipa & .zip Cats.png Don’t have one of these? Use our sample app 1 Sign in - First run Dashboard My Apps API Docs Tools Dashboard My Apps user@gmail.com You can also run iOS Selenium tests against one or more URLs. Start by adding the primary url below: http://example.com/ Submit Woops, looks like that’s a format we don’t support. Acceptable formats: .ipa & .zip 2 Incorrect format file dragged in Phone Browser Demo.ipa Help Getting Started Step-by-step tutorial & video + 3 Clear error message API Docs Tools user@gmail.com You can also run iOS Selenium tests against one or more URLs. Start by adding the primary url below: http://example.com/ Submit Help Getting Started Step-by-step tutorial & video 5.4 MB Phone Browser Demo.ipa Phone Browser Demo.ipa API Docs Tools user@gmail.com You can also run iOS Selenium tests against one or more URLs. Start by adding the primary url below: http://example.com/ Submit Help Getting Started Step-by-step tutorial & video 5.4 MB Setup your first test Don’t have one of these? Use our sample app 4 Correct format app file dragged in Dashboard My Apps 5 Square fills in from bottom to top as app uploads TASK FLOW 1 : UPLOAD AN APP 6 Square complete blue when app is uploaded, active green button appears: ‘Success! Run your first test”
- 23. Dashboard My Apps API Docs user@gmail.com Tools A B Setup a Test for Phone Browser Demo 1. PICK A BUILD OF YOUR APP BUILD #10-12_2 Uploaded 1 hour ago 2. PICK A TEST SUITE Dashboard BUILD #10-12_1 IOS ROBOT BUILD #10-10_3 Uploaded yesterday STABLE SUSIE Dashboard A B iPhone/iPod E C SPECIFICTEST.JS OR iPad UPLOAD A NEW APP Android Tablets D 5. ENTER LOCATION IOS ROBOT - Default EDGE 2G Uploaded yesterday 3G 4G PICK MEMORY LEVEL intelligently crawls and tests your app AUTOMATION.JS E Uploaded 2 hours ago LTE Uploaded 1 month ago OR SELECT ANOTHER BUILD F SUITE-E.JS Uploaded last month STABLE SUSIE DSL SPECIFICTEST.JS Uploaded 1 year ago OR SELECT ANOTHER TEST (MB) 0iPhone/iPod 125 250 Android 275 Phones 500 Use default memory of device iPad Android Tablets H Run button Gets activated once options A,B,C are selected. On click, user is taken to My Apps>Results page. ADVANCED OPTIONS MyCuteFriend HabitRPG RUN Applications Applications Phone Browser Demo Pick memory level Slide 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 G OR Enter address, zip, city or region Phone Browser Demo Enter location As 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 3. PICK DEVICES TO TEST ON 190 Applications BUILD #10-10_3 F Uploaded 1 year ago ADVANCED OPTIONS 2. PICK A TEST SUITE Pick network Click 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 G Android Phones Uploaded last month Uploaded 2 hours ago Advanced Options Clicking this link reveals E,F,G. user@gmail.com SUITE-E.JS 4. PICK A NETWORK TO TEST IN BUILD #10-12_2 Tools Uploaded 2 hours ago 1. PICK A BUILD OF YOUR APP BUILD #10-12_1 API Docs AUTOMATION.JS OR SELECT Test for OR SELECT ANOTHER Setup a ANOTHER BUILDPhone Browser DemoTEST Uploaded 1 hour ago Pick devices to test on Click on one of the four categories - pop up appears with options to multiselect different devices and OS. - Default intelligently crawls and tests Uploaded 1 month ago C 3. PICK DEVICES TO TEST ON My Apps your app Uploaded 2 hours ago OR UPLOAD A NEW APP Pick a test suite Three 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. D Dashboard Pick a build Three 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. MyCuteFriend H I HabitRPG CORE SCREEN 2 : SETUP A TEST I My Apps Direct access to apps - clicking on any one takes user to My Apps>Results page.
- 24. Dashboard My Apps Dashboard API Docs Tools My Apps user@gmail.com API Docs Setup a Test for Phone Browser Demo OR UPLOAD A NEW APP 2. PICK A TEST SUITE iOS 6.1.4 iOS 6.1.3 iOS 6.1.2 BUILD #10-12_2 Or drag and drop to upload a new build iPhone/iPod Android Phones OR UPLOAD A NEW APP 3. PICK DEVICES TO TEST ON Tools user@gmail.com 1. PICK A BUILD OF YOUR APP 2. PICK A TEST SUITE iOS 7.0 iOS 6.1.4 iOS 6.1.3 iOS 6.1.2 IPOD 5 Or drag and drop to upload your own test script iPhone/iPod Android Phones iOS 7.0 iOS 6.1.4 iOS 6.1.3 iOS 6.1.2 3. PICK DEVICES TO TEST ON IOS ROBOT Default Uploaded 1 hour ago intelligently crawls and tests your app OR UPLOAD A NEW APP intelligently crawls and tests your app Or drag and drop to upload a new build iPhone/iPod Android Phones Or drag and drop to upload your own test script more info more info more info more info more info iPad iPad iPad Android Tablets ADVANCED OPTIONS ADVANCED OPTIONS RUNcancel or RUN SAVE MyCuteFriend HabitRPG Applications 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 Phone Browser Demo MyCuteFriend HabitRPG 2 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. TASK FLOW 2 : SETUP A TEST RUN Please pick at least one device to test on! Applications Applications Phone Browser Demo Android Tablets Android Tablets ADVANCED OPTIONS 1 API Docs Setup a Test for Phone Browser Demo BUILD #10-12_2 IOS ROBOT Default IPHONE 4 Or drag and drop to upload a new build Or drag and drop to upload your own test script more info iOS 7.0 iOS 6.1.4 iOS 6.1.3 iOS 6.1.2 2. PICK A TEST SUITE Uploaded 1 hour ago intelligently crawls and tests your app 3. PICK DEVICES TO TEST ON IOS ROBOT Default Dashboard IPHONE 4S Setup a Test for PhoneiOS 7.0 Browser Demo 1. PICK A BUILD OF YOUR APP Uploaded 1 hour ago My Apps 3. PICK DEVICES TO TEST ON IPHONE 5 BUILD #10-12_2 Dashboard user@gmail.com Dashboard Dashboard 1. PICK A BUILD OF YOUR APP Tools Phone Browser Demo MyCuteFriend HabitRPG 3 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.
- 25. Dashboard My Apps Tools user@gmail.com App Navigation: My Files Builds 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. Test suites Test 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 C Easily add test suite or build for the app Drag in area for new test suite or build, similar to welcome screen D API Docs A B Setup a test Select a test suite from the dropdown and hit setup test run to test the selected build. E Other Builds Previous builds are collapsed - Visible details are number of test runs and upload days. Photo Browser Demo MY FILES RESULTS Test Suites OVERVIEW A B JS JS C Click or drag and drop to upload a new builds, test suites, or apps UIAutomation1 6 days ago 10 test runs Automaton4 SpecificTest.js TeSting.js 9 days ago 20 test runs 15 days ago 12 test runs 2 monts ago 9 test runs more info Builds 5 test runs Uploaded 8 days ago iOS Robot 2 hours ago SpecificTest.js Yesterday iOS Robot Yesterday iOS Robot 8 days ago BUILD 2 2 test runs Uploaded 11 days ago BUILD 1 3 test runs Uploaded 13 days ago UIAutomation1 1 hour ago BUILD 3 Select a test suite... SETUP TEST D E CORE SCREEN 3 : SINGLE APP>MY FILES
- 26. Dashboard My Apps API Docs Tools Phone Browser Demo RESULTS MY FILES C Sort by category The test results can be sorted easily by build, test suite, device or OS version in a grid B Hover over Single result Turns dark grey, shows time of test completion and option to delete test result C Test status Failed/passed icons and text colour indicate test status. All results are clickable leading to individual results A OVERVIEW Build 10/29/13 4:54 PM A user@gmail.com 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 #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 B CORE SCREEN 4 : SINGLE APP>RESULTS
- 27. Q&A Shivangi Mehra UX Designer Maya Wagoner UX 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 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. A design enthusiast, I love to travel and find inspiration at every step! shivangijainmehra@gmail.com (650) 532-4691 www.blusquaredesigns.com t @shivangijmehra mayawagon@gmail.com (310) 738-6857 t @mayamayaw