p5 ontarget

50
OnTarget Mobile App General Assembly UX Team: Elizabeth, Caterina, John V.

Upload: elizaveta-kulikova

Post on 26-Jan-2017

35 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: P5 Ontarget

OnTarget Mobile App General Assembly UX Team: Elizabeth, Caterina, John V.

Page 2: P5 Ontarget

OnTarget UX App Analysis General Assembly Team: Elizabeth, Catarina, John V.

Project Goals:

OnTarget asked for help in redesigning the existing mobile app.

- Field users need an easy way to communicate- Users need to be able to update progress from the field - Users should be able to make comments or upload images - Should still get all features of existing onTarget app

- User Flow should be focused on tasks and communication - All relevant categories should be accessible in the app

Page 3: P5 Ontarget

OnTarget UX App Analysis General Assembly Team: Elizabeth, Catarina, John V.

Our 3 Week Design Plan:

1. Discovery: Competitive Landscape Analysis, Current App Analysis

2. Research: Survey, Research Data, User Interviews, Competitive Analysis, Heuristics Analysis, Feature Analysis

3. Iteration: Storyboard, User Flow, Hand Sketches, Medium Fidelity, High Fidelity Prototypes, User Testing

4. Delivery: App Map, High Fidelity Final Prototype, Next Steps

Page 4: P5 Ontarget

PHASE 1: DISCOVERY

Competitive Landscape, Current App Analysis

Page 5: P5 Ontarget

OnTarget UX App Analysis General Assembly Team: Elizabeth, Catarina, John V.

Initial Client Meeting

Initial Observations

Competitive Landscape

Page 6: P5 Ontarget

OnTarget Initial Observations

Previous Web App

- Design is clean and simple, using both iOS

and Material Design elements - Alerts on top right - Dashboard is the Main Page - Global nav changes based on page - Native app requires a login to continue - No on boarding process for new users - Cloud based appeared to be “Freemium”

Page 7: P5 Ontarget

Tablet Version

Specific Version for iPad or Android?

What does the Tablet app provide that the online does not?

Will it be able to do anything when offline?

How does the 4D integrate into the Tablet version?

OnTarget Initial Observations

Page 8: P5 Ontarget

- Tagline: helps firms drastically increase project efficiency and accountability by streamlining and mobilizing project communication and documentation.

- The world’s #1 widely used construction management tool - Wide array of products - Steep learning curve - Targeted at GC, PMs

OnTarget Competitive Landscape

Page 9: P5 Ontarget

- Tagline: The Construction App for the Field Join over 50,000 projects who trust Fieldwire every day to save time and money on-site.

- Robust Ipad/Mobile/Web functions - Fastest floor pan viewer - Free to Try

OnTarget Competitive Landscape

Page 10: P5 Ontarget

- Tagline: BIM 360™ is the perfect tool for Project, Field and BIM Managers to accelerate delivery, save money and reduce risk.

- Recently released - Autodesk powered - Free to Try

OnTarget Competitive Landscape

Page 11: P5 Ontarget

- Tagline: Join The Building Revolution: Turn simple field updates into game-changing insights. Finish projects faster.

- Specific for GC’s and for Subs - $500/month pro pricing - No free access or demo

OnTarget Competitive Landscape

Page 12: P5 Ontarget

- Tagline:Viewpoint is built on a foundation of Rock Solid Collaboration. Smoother, Easier & More Profitable Results

- Increased efficiency with field data-capture - Anytime access with or without internet connection - 35 years in business - Easy-to-use native app

OnTarget Competitive Landscape

Page 13: P5 Ontarget

- Tagline: Smart, Powerful, Easy-To-Use Construction Management Software Accessible Wherever Work Takes You

- business management for small & large construction companies - fully-integrated web-based document management - 35 years in business - Easy-to-use native app

OnTarget Competitive Landscape

Page 14: P5 Ontarget

OnTarget Current App Overview

- Dashboard Home Page

- Opportunities:- Start New Project being so large

and prominent may be unnecessary.

- Need to focus on what the field worker would want to see first.

- Color and contrast can be used more effectively to differentiate the main areas of the app.

Page 15: P5 Ontarget

OnTarget Current App Overview

- Project Home Page

- Opportunities:- Circles are off center - Client requested a change involving

the projected date vs the actual date. - Info can be set side to side and still

give the same detail without taking up the entire mobile app real estate.

- A bottom nav, or any kind of nav would me more helpful than relying on a very long scroll and the Hamburger menu to Navigate to the areas.

Page 16: P5 Ontarget

OnTarget Current App Overview

- Project Home Page 2 (Scroll down)

- Opportunities:- RFI information could be a small

bar, as it does not require 50% of the screen.

- When there is 0, the information should be dynamically pushed to the bottom

- RFIs are project manager only

Page 17: P5 Ontarget

OnTarget Current App Overview

- Project Home Page 3 (Scroll down)

- Opportunities:- Critical and Paste Due tasks

should be more prominent and higher on the screen.

- Adding models should not even be available on mobile as its not possible to accomplish.

Page 18: P5 Ontarget

OnTarget Current App Overview

- Project Home Page 4 (Scroll down)

- Opportunities:- Safety information can be a

smaller infographic rather than a large box, or be contained in its own page.

- A current hazards/roadblocks window might be more informative for the field worker.

- Scheduling is done by only select few users so should not be shown to those without admin privileges.

Page 19: P5 Ontarget

OnTarget Current App Overview

- Project Home Page 4 (Scroll down)

- Opportunities:- Hamburger menu acts as the

main navigation. - With only 5 choices, can be

better accomplished by a bottom nav bar.

- Hamburger menu can still exist but for things like account settings, models, deeper functions that are not accessible to the layman.

Page 20: P5 Ontarget

PHASE 2: RESEARCH

Competitive Analysis, Heuristics Analysis, Feature Prioritization, User Surveys, Affinity Mapping, User Personas

Page 21: P5 Ontarget

Competitive Analysis

To evaluate OnTarget’s competitive environment, we surveyed a number of onTarget’s direct competitors, their features and market position.

Page 22: P5 Ontarget

Competitive Analysis

• onTarget’s most interesting feature is it’s mobile integration of 2D and 3D models. It completely differentiates them from all other apps in the market.

• All of the apps we analyzed had opportunities for improvement to their navigation and user flows.

• FieldLens’s use of familiar Facebook formatting works to their advantage in that there is a very small learning curve to use their newsfeed feature. It also facilitates effective communication.

KEY TAKEAWAYS

OPPORTUNITY

“We must create the mobile product that offers a more focused navigation, with better communication.”

Page 23: P5 Ontarget

Heuristic Analysis

Heuristic analysis to determine how usable each app compared to onTarget. This shows where to focus our efforts in regards to usability.

KEY TAKEAWAYS: onTarget has the greatest opportunities for improvement in regards to learnability and error management. Overall minor improvements to efficiency, memorability and satisfaction would make onTarget a market leader.

Page 24: P5 Ontarget

User Survey

We formulated a User Survey to allow us to identify potential candidates for User Interviews. We sent this out on a number of social media channels in order to receive variety in terms of respondents.14 responses were recorded. Some example questions and results:

How long have you worked in Construction?

What was your role in the company?

Page 25: P5 Ontarget

Survey Results

What kind of devices do you use on the job?

How do you communicate your project progress to coworkers on the job site?

Page 26: P5 Ontarget

Feature Prioritization

KEY FINDINGS:

• 3 user types had different needs and permissions.

• Unavailable or unused features are still shown to all users.

• Big difference between Field Worker feature need and the other two user types.

OPPORTUNITY:

• Simplified User Flow

• Activity Log Focus

• Hide unused features

Page 27: P5 Ontarget

User Interviews

We posed questions about job related behaviors, experiences and pain points…USER QUOTES

Page 28: P5 Ontarget

User Interviews

We posed questions about job related behaviors, experiences and pain points…USER QUOTES

“Good communication helps us set up realistic goals. Like if a job is at 45% we can figure out what we need to hustle on the next day.”

“I still have my notes on an old school index pad, using pen and paper to track my tasks.”

“I wrote out a list of tasks for my workers each day and post it up. They cross off and initial the tasks as they complete them.”

“We need to improve the scheduling. A daily task list would be great, even a whiteboard on the jobsite would be better than nothing.”

“I need a way to know what my tasks are going to be.”

Page 29: P5 Ontarget

Affinity Mapping

Affinity mapping the results would help us to identify any patterns and common themes, helping us to further identify the most important features, and the situations in which they would be used.

MAPPING THE DATA

• texting and phone calls were the main forms of communication

• all users had at least a cell phone on site.

• nothing was able to replace the effectiveness of an on site visit.

• miscommunication was the biggest threat to the success of a project

• the bigger the work crew, the bigger the communication problems.

We then used these insights to create user personas.

KEY TAKEAWAYS

Page 30: P5 Ontarget

User PersonasWe discovered that onTarget mobile has 3 distinct user personas: Administrators and Project Managers who had top level access, Foreman and GCs, having power user access, and the Field Worker, who had view but no edit access on many features.

Page 31: P5 Ontarget

User Personas

FIELD WORKERS:

• Most of onTarget’s mobile users would be those field workers on the job site.

• Field workers do not care much about the analytics, but do care about things such as weather, tasks, task completion, and deadlines.

• Field workers wanted the ability to see and communicate progress on tasks.

• Safety Alerts were requested by the Field Workers.

Page 32: P5 Ontarget

PHASE 3 : ITERATION

Storyboard, User Flow, Hand Sketches, Medium Fidelity, High Fidelity Prototypes, User Testing, A-B Testing

,

,

,

! ,

Page 33: P5 Ontarget

Storyboard

Storyboards help to visualize the way in which the user might use the application. In our scenario, a carpenter named Sergio, checks his tasks using onTarget and is able to complete his tasks ahead of schedule. His project manager is happy that the project is running ahead of schedule.

, !

Page 34: P5 Ontarget

User Flow

User flow dictates the 5 bottom nav choices with the Activity Log being the primary landing and destination.

Page 35: P5 Ontarget

Hand Sketching

We started from the brainstorming. We

created some ideas in hand sketches

Using Marvel program we tested our paper

wireframes and get some good feedback

Page 36: P5 Ontarget

A-B Testing

onTarget has many features to navigate through and as a result one of our bigger decision points was to find out whether the app needed a hamburger menu to guide navigation or if a bottom navigation bar would suffice.

We took the opportunity to test our medium fidelity wireframes on 5 users, one of whom is a current onTarget user. This would help us decide what type of navigation made the most sense to users.

Hamburger menu Bottom menu

“I find the hamburger menu confusing.”

“I like the bottom navigation better, it’s more visual.”

“I don’t want to have to go back to the menu.”

“I feel like three out of the six icons on the web app mean the same thing.”

Page 37: P5 Ontarget

• 3 out of 5 users preferred the bottom navigation.

• The hamburger menu was too complex for users who mainly needed to update tasks or create posts.

• All 5 of the users were unable to identify the Schedule, RFI and Files icons. Users either thought they meant the same thing or signified what stage of completions a document was at.

A-B User Testing Key Takeaway

With these observations and pain points we were able to move onto a high fidelity iteration of the app with a clear idea what changes to make. Including using a bottom navigation and making the iconography clearer.

Opportunity

• Hand A/B Testing Takeaways

Page 38: P5 Ontarget

User testing on the Field

“No, I never saw something like this, but it

looks very clear to understand!”

Have you ever used this kind of

construction app?

Page 39: P5 Ontarget

Mid to Hi Fidelity

Page 40: P5 Ontarget

Mid to Hi Fidelity

Page 41: P5 Ontarget

From Mid to Hi Fidelity Make ups

Page 42: P5 Ontarget

From Mid to Hi Fidelity Make ups

Page 43: P5 Ontarget

From Mid to Hi Fidelity Make ups

Page 44: P5 Ontarget

From Mid to Hi Fidelity Make ups

Page 45: P5 Ontarget

The photos assigned with the task

Users can slide the progress line to change complite job %

User can see the person or team the task is assigned to

NotesThis is the screen users see choosen task information like photos, whom assigned to, progress, dates, status, comments. Users can add comment or just come back on the previous screen

5.04 View task Screen

Start and due dates of the task

Users can see priority, but only project manager can change

Users can see status, but only project manager can change 6

Users can see subject, but only project manager can change

User Can see comments of the users, who posted it and the date. User can also add his own comment in the new comments box

Tap on the post botton user post new comment to task

28

67

29

9

5

UXDI P5: onTarget Mobile AppJohn VukusicElizabeth KuklikovaCatarina Abballe

UX DesignerUX DesignerUX Designer

4

1

2

3 3

3

1

2

78

7

6

9

4

5

3

100%9:41 AMVerizon

Tuesday

65 ºF 63.5 ºF 58.5 ºF 43.5 ºF 61.5 ºF

Wednesday Thursday Friday Saturday

Plumbing 80% CompleteBathroom plumbing complete on 10th Floor. Waiting for audit.

Nick Tejada 8:45AM

Drywall Install 70% CompleteAll drywall installed on 9th Floor.

Umberto Masci 8:35PM

Roofing Install 50% CompleteTar Northeast corner of roof.

Fernando Lam 10 Hours Ago

Landscaping 70% CompleteAll sod and trees planted on North side. South side will be completed 10/12.

Arien Hall 12 Hours Ago

ACTIVITY LOGExposed live wiring on 10th Floor, Northeast corner. Please use caution when working in the area.

Windows need to be reordered. Size is incorrect.

David Delgado 9:00AM

Install Doors10 doors on the 4th floor.

Cut and Measure Wood for doorframesWood being delivered 10/31.

Install FramingMaterials will be on the 4th Floor

My Critical Tasks

Due in 1 Week

Due in 2 Weeks

TEAMGRAPHSFILESDATESLOG

100%9:41 AMVerizon

New Comment

Progress

Comments

SubjectInstall Framing

Due DateStart Date

Assigned To

Install Framing

See plans for details. Suppliesarrive day before.

David Delgado 10/8/2016

Carpentry Team 1

Post

CriticalStatusPriorityActive

80%

TEAMGRAPHSFILESDATESLOG

PHASE 4 : DELIVERY

App Map, High Fidelity Prototype, Next Steps

MODELS Sort by

Submittals16

Tasks32Uploaded Date: Febraury 11, 2016

Model Name

Alerts3

Submittals16

Tasks22Uploaded Date: Febraury 11, 2016

Model Name

Alerts3

Submittals19

Tasks28Uploaded Date: Febraury 11, 2016

Model Name

Alerts5

Submittals5

Tasks14Uploaded Date: Febraury 11, 2016

Model Name

Alerts2

Submittals19

Tasks28Uploaded Date: Febraury 11, 2016

Model Name

Alerts5

100%9:41 AMVerizon

TEAMGRAPHSFILESDATESLOG

TEAMSantiago CalatravaOwner

Michael Musk

Michael Musk

Manager

Nick SheenUser

Shawn ConnorUser

Gorana VukusicAssistant PM

100%9:41 AMVerizon

TEAMGRAPHSFILESDATESLOG

Page 46: P5 Ontarget

The photos assigned with the task

Users can slide the progress line to change complite job %

User can see the person or team the task is assigned to

NotesThis is the screen users see choosen task information like photos, whom assigned to, progress, dates, status, comments. Users can add comment or just come back on the previous screen

5.04 View task Screen

Start and due dates of the task

Users can see priority, but only project manager can change

Users can see status, but only project manager can change 6

Users can see subject, but only project manager can change

User Can see comments of the users, who posted it and the date. User can also add his own comment in the new comments box

Tap on the post botton user post new comment to task

28

67

29

9

5

UXDI P5: onTarget Mobile AppJohn VukusicElizabeth KuklikovaCatarina Abballe

UX DesignerUX DesignerUX Designer

4

1

2

3 3

3

1

2

78

7

6

9

4

5

3

100%9:41 AMVerizon

Tuesday

65 ºF 63.5 ºF 58.5 ºF 43.5 ºF 61.5 ºF

Wednesday Thursday Friday Saturday

Plumbing 80% CompleteBathroom plumbing complete on 10th Floor. Waiting for audit.

Nick Tejada 8:45AM

Drywall Install 70% CompleteAll drywall installed on 9th Floor.

Umberto Masci 8:35PM

Roofing Install 50% CompleteTar Northeast corner of roof.

Fernando Lam 10 Hours Ago

Landscaping 70% CompleteAll sod and trees planted on North side. South side will be completed 10/12.

Arien Hall 12 Hours Ago

ACTIVITY LOGExposed live wiring on 10th Floor, Northeast corner. Please use caution when working in the area.

Windows need to be reordered. Size is incorrect.

David Delgado 9:00AM

Install Doors10 doors on the 4th floor.

Cut and Measure Wood for doorframesWood being delivered 10/31.

Install FramingMaterials will be on the 4th Floor

My Critical Tasks

Due in 1 Week

Due in 2 Weeks

TEAMGRAPHSFILESDATESLOG

100%9:41 AMVerizon

New Comment

Progress

Comments

SubjectInstall Framing

Due DateStart Date

Assigned To

Install Framing

See plans for details. Suppliesarrive day before.

David Delgado 10/8/2016

Carpentry Team 1

Post

CriticalStatusPriorityActive

80%

TEAMGRAPHSFILESDATESLOG

PHASE 4 : DELIVERY

App Map, High Fidelity Prototype, Next Steps

MODELS Sort by

Submittals16

Tasks32Uploaded Date: Febraury 11, 2016

Model Name

Alerts3

Submittals16

Tasks22Uploaded Date: Febraury 11, 2016

Model Name

Alerts3

Submittals19

Tasks28Uploaded Date: Febraury 11, 2016

Model Name

Alerts5

Submittals5

Tasks14Uploaded Date: Febraury 11, 2016

Model Name

Alerts2

Submittals19

Tasks28Uploaded Date: Febraury 11, 2016

Model Name

Alerts5

100%9:41 AMVerizon

TEAMGRAPHSFILESDATESLOG

TEAMSantiago CalatravaOwner

Michael Musk

Michael Musk

Manager

Nick SheenUser

Shawn ConnorUser

Gorana VukusicAssistant PM

100%9:41 AMVerizon

TEAMGRAPHSFILESDATESLOG

Page 47: P5 Ontarget

App Map

6 7 8 9

54

2

3

1

New Post. User can tap here from the Activity log to create a new post.1

Tasks. User can tap here to view task details or filter their tasks.2

Activity Log. User can scroll to view important updates and alerts. Can also tap on entries to comment on them.

3

Activity Log. User can scroll to view important updates and alerts. Can also tap on entries to comment on them.

4

New Post. User can fill out form to add a new post to the Activity Log.5

Dates. User can view the project schedule along with the completion percentage for the various tasks/schedules.

6

Files. User can view the 3D Models, blueprints and other files. 7

Graphs. User can view the onTarget’s project analytics. 8

Team. User can view the different project contacts as well as call and text.

8

Page 48: P5 Ontarget

High Fidelity Prototype

https://invis.io/TG8YIMR93

Page 49: P5 Ontarget

Short termCreate a iPad version of the mobile app.Modify the mobile app for different access, specifically super users and admins

Next Steps

Page 50: P5 Ontarget

Next StepsLong termCreate a Material Design Android version.Create a robust Chat function for the Mobile, Website and iPad versions.