UI Design - Customer Mobile App Demo Pages

Austinauth commented 8 years ago

Both UX and Visual passes are needed.

Required Pages

User Login Page: User should be able to quickly login to the demo.
Landing Page: Insurance categories are immediately available. Emulating real existing insurance pages, the user should be able to invoke chat straight from the landing page. No need to dive into a category first. Long-term we can spend more time fleshing out this page.
Chat Bot Page: User should be able to chat freely with the chat bot. User should be able to easily navigate back to their point-of-origin (landing page).
Existing Designs

Landing Page

box-image

Health Page (Is this needed?)

box-image-1

Chat Bot

box-image-2

Austinauth commented 8 years ago

@kingtraceyj @darinduvall @colbycheeze @rvennam @antonmc

Mobile App UX Wireframe Concepts

Below are some UX concepts of the mobile app portion of the insurance bot scenario.

Login Screen

v1-mobile_login

Items to Highlight:

Basic login screen
Room for branding
Secondary options like forgotten password & sign-up
One-time login

Mobile Dashboard Default

v1-mobile_home

Items to Highlight:

Profile section makes scenario seem personal and real
Placeholder settings icon
Simple and clear hierarchy of choices
Clear call to action for concierge
User should not be required to dive into a category to initiate a chat

Open Questions:

What term are we using for the chat bot? Concierge?
Are there other items we can include on this page to make it seem more real?
What should our call-to-action be for initiating a chat?

Chat Bot

v1-mobile_chat

Items to Highlight:

Common chat pattern
Option to return to home
Watson branding can be replaced with insurance company branding

Open Questions:

Should chat offer/support actionable items (see below)

Mobile Dashboard Chat Initiated

v2-mobile_home-existing-chat-alert

Items to Highlight:

Chat icon module on the bottom right provides the user with a way to return to an open chat if they've returned to the dashboard. It also provides a way to indicate to the user when a response has been made.

Potential Variations

Dashboard Variation

v2-mobile_home

Mobile Dashboard Chat Initiated Variation

v2-mobile_home-existing-chat-alert

colbycheeze commented 8 years ago

does it have to say Concierge? I don't think that would make sense to most people. Maybe something like, "Ask a question" or...I don't know we could brainstorm.

Austinauth commented 8 years ago

@colbycheeze

does it have to say Concierge? I don't think that would make sense to most people. Maybe something like, "Ask a question" or...I don't know we could brainstorm.

Agreed. Something like "Ask a Question" seems a lot clearer.

kingtraceyj commented 8 years ago

hi-fi comps

our goal is to keep everything legible and clean since it will presented in a large room.

log-in: keeping it pretty simple right now. the logo is coming soon so we can choose to put that here or choose to do a background imageor leave it.

1_insurancebot_login

home screen: 2_insurancebot_home

chat: we decided to go with a speech bubble like a text message to help differentiate the two chatters.

3_insurancebot_chat

for the ana avatar do we want to go with watson branding or a robot illustration?

sharpstef commented 8 years ago

Since I expect looking in here will turn into combing through comments, we may need to move comments specific to the dialog to another thread. Dialog isn't to be generated by the mobile app but by the service itself.

antonmc commented 8 years ago

Hi - I made an invision preview ...

https://projects.invisionapp.com/share/D28UEG7FY#/screens

You can click the buttons to get a feel for how this plays

if you turn comment mode on you'll see some comments but I'll write more here ...

Austinauth commented 8 years ago

@antonmc Thank you for making the Invision prototype!

@kingtraceyj and I are going through the feedback together. Responses below reflect both of our opinions.

Comments in response to invision prototype: https://projects.invisionapp.com/share/D28UEG7FY#/screens

General Feedback

On contrast issues.

Contrast as been tested for accessibility. We will project comps on various monitors and sizes and adjust accordingly.

Home Screen Feedback

(Home Screen // Comment 3) We don't currently have a way in our demo to upload photos. I don't want to make this a hard coded demo.

We'll either have to implement a way to add photos to accounts, handle when they don't have one, or hand manage the database to include one.

Lets try to make photos happen. First and foremost this is a demo that will be shown to many people on stage.

Avatar images are very useful for the demo presentation. Not only do they assist in identifying who is speaking at any give time, but they help the audience build empathy for the user going through the scenario. @rvennam and @colbycheeze both agree with this sentiment.

(Home Screen // Comment 4) We don't have ids in the demo version of the site yet either - see comments for photo.

Placeholder/dummy content to make the scenario seem more real. We can remove this if it is a big issue.

On settings icon (Home Screen // Comment 2): What is the interaction model behind this? Where does it lead? Is it necessary?

This is a placeholder icon to make the app seem real. This is an on-stage demo and a happy path. We will be including some placeholder/dummy content to make the presentation seem real. @rvennam and @colbycheeze both agree with this sentiment. If absolutely necessary we can remove these items in the future.

On chat icon (Home Screen // Comment 1): What is the navigation model behind this? does this lead to the same place as 'ask a question'? I don't think this fits with iOS interaction convention.

@kingtraceyj: it does lead to the same place as ask a question. it is a little different than most apps but some apps, like snapchat, do have chat on the left. i'll go ahead and remove it and stick to austin's original wireframes.

Chat Screen

(Chat Screen // Comment 1) I think this breaks with iOS convention a bit - it's too fiddly in any case - let's not do this.

Can you elaborate on what you mean by fiddly? From what we have seen this is a common IOS pattern (see below).

screen shot 2016-10-05 at 2 04 21 pm

screen shot 2016-10-05 at 2 04 57 pm

(Chat Screen // Comment 4) Where does this take us?

Back to the home screen. We should move this to the left side.

(Chat Screen // Comment 3) so - as a matter of urgency, we need to see the framework we're using for chatting ... for one thing the keyboard needs to be on here so we understand the ux around typing and sending - we likely won't have a lot of say about how that looks/behaves.

We can default to standard IoS icons if needed.

antonmc commented 8 years ago

I'm really unhappy about any disposable demo content.

antonmc commented 8 years ago

to the point where I should probably step out and leave you to it

rvennam commented 8 years ago

I see it as a placeholder, not disposable content. As we continue to build this out, these are all features that are realistic and possible to implement.

antonmc commented 8 years ago

This iPhone app, I'll be honest is not what I had in mind - and I don't know what to do about that right now.

What I had in mind was an iPhone app dedicated to the health insurance - with views for policy, claim history and chat - and to build on that for the future. I know the CloudCo site has more services, but I wanted to concentrate on the insurance service.

In general now, I want to think about Cloud Co's fictional mission. I didn't give as deep thought to the concept as it probably needed. Not many insurance companies have the breadth of services it offers. My health benefits don't also offer car insurance.

antonmc commented 8 years ago

I'm not part of the demo. I should step aside.

I do have to think of the future of the app and probably will not go this direction.

Austinauth commented 8 years ago

@antonmc I think most of us agree with your overall sentiment. I understand the frustration around wanting to make the sample app as close to real as possible.

Right now we are purely focused on telling the best story we can via the demo presentation. In the future we would love to help make the sample app as robust and near to your vision as possible. Its just not in scope for what we are trying to accomplish for the World of Watson demo.

l2fprod commented 8 years ago

about

We'll either have to implement a way to add photos to accounts, handle when they don't have one, or hand manage the database to include one. Lets try to make photos happen. First and foremost this is a demo that will be shown to many people on stage.

A simple way to handle photos is to grab the gravatar from the email address: https://en.gravatar.com/support/what-is-gravatar/

No need to handle any uploads in our app. Just create a gravatar, register your email. Then in our code, pick the image from gravatar for the email address of the user account.

kingtraceyj commented 8 years ago

updated hi-fis for mobile

1_insurancebot_login 2_insurancebot_homescreen 3_insurancebot_chat

l2fprod commented 8 years ago

@Austinauth @kingtraceyj we can close that one right? We have enough of the design for our first public target.

rvennam commented 7 years ago

@VidyasagarMSC

IBM-Cloud / insurance-bot