Approach and Initial Sketches

Added by carriestiens over 4 years ago

Hello Team!

I have a google doc started that talks about the design approach. This approach is rooted in discussions that Dave and I have had so far to simplify the app, as well as feedback from workers, Bryan and GLSP.

https://docs.google.com/document/d/1ho-lJ1Oh_SatQqzMCJsw_hj-compQZVbVsh1iPSQq24/edit

Some important considerations include:
- Logging time is the primary and only required action for workers
- Forgetfulness of workers to clock in and/or out
- Illiteracy of workers
- Workers have a need to be discreet
- Workers are unfamiliar with scrolling
- Workers need to carry their phones with them (rather than leaving them in the truck) for accurate location tracking
- Legibility outdoors
- Feedback on actions within the app (haptic, visual, confirmations)
- Smart Notifications to remind workers to clock in/out

*The google doc expands on each of these concepts.

The sketches below are a first take at the design. In these mock-ups, the worker takes a photo of himself to clock-in and out. The goal is to have a very simple, nearly child-like UI, with basically one action on each screen. Dave and I have been referring to this as a 'Teletubbies' UI.


Replies (6)

RE: Approach and Initial Sketches - Added by ocdavid over 4 years ago

I think we're really making progress here.

Comments:

(1) I like that the focus is clock-in-by-taking-a-picture. That unifies the InformaCam and time-keeping aspects of the app.

(2) I'd like to see even less text on the call-lawyer, lunch and timesheet screens

(3) For call-lawyer, I'd like to make the phone icon very prominent, and have a photo of the actual lawyer underneath (or some other arrangement). The text (name and number) should be drastically reduced in prominence but available.

(4) For the timesheet, is there any way we can reduce the words (if not the numbers) to zero using symbology?

(5) For Take Pictures, I'd like to make the camera icon very prominent, and reduce the prominence of the pictures themselves. I'd also like to put sample pictures of workplace activities in here as "examples".

(6) In the diagram above, can you make clear that the lunch screen is only reached by clocking-out, and that "confirm" means "go to timesheet screen".

(7) NAVIGATION: I'd say that Navigation Option A is the "Secondary actions" idea, Navigation Option B is the "dots and swipe" idea, and that Navigation Option C is the "menu bar". Of these, I currently prefer the "dots and swipe" idea because it is only a single action to train the user. Secondary actions requires training on the "?" button (tap or swipe) and requires training to use the "back" button. It introduces a hierarchy and the idea of into/out-of the hierarchy. That is I think harder than swipe.

RE: Approach and Initial Sketches - Added by carriestiens over 4 years ago

Here are the 3 navigation options:

RE: Approach and Initial Sketches - Added by n8fr8 over 4 years ago

carriestiens wrote:

Here are the 3 navigation options:

I think (A) but it should be on the bottom - a slide up drawer, as opposed to a slide down shade. I think that is easier for the thumb, and more Android like.

This is somewhat how the Orbot "Log" drawer works now - it slides up and over the main screen, as high as the user drags it, or up a certain amount if they tap the log button.

RE: Approach and Initial Sketches - Added by ocdavid over 4 years ago

Nate, how do you address the BACK function once you have then menu open, select a secondary function and then complete that function? Android BACK button? On-screen BACK button?

This is my problem with the hierarchical approach - you have to introduce TWO UX concepts: (a) that the secondary "level" of functions exists, and (b) how to return to the primary level. Options B and C don't require that.

RE: Approach and Initial Sketches - Added by n8fr8 over 4 years ago

Can they be dialog box type screens with an explicit confirm/close action? If you press the hardware back button, it will cancel, if you press the confirm/close, it will process any user input, then close.

This is how the new account screen/activity works in ChatSecure.

RE: Approach and Initial Sketches - Added by carriestiens over 4 years ago

Nathan, thank you for your speedy feedback. I'm going to give this a bit more thought, then pick a solution.

(1-6/6)