2.0 UX

[n13]

Nico just told me the solution to our on/off screen woes and the settings screen

1 - There will be two screens - closed state and open state 2 - The first screen will show, unmistakably, that reminders are now enabled. It will show what the settings are set to, and have an on/off button and a "change settings" button. 3 - The second screen will be to change settings, and will look like our main screen now, but have a "Done" button (easiest to do with a nav bar upper right hand corner button) 3a - Settings in the second screen will change in-line. The separate "Settings" screen we have now will be gone. So for example, changing the time will use standard UX elements like time rollers that spring up from the bottom.

I think it'll be good to have a screen with the sole purpose of showing that the app is running, and reading out what it's doing.

Nico pointed out to me that on the current design it's not obvious whether or not the app is running right now. Users would ask themselves - is that it?

He also wanted some start screens to create the initial settings, like a guided tour. How many reminders per day, when do you get up, when do you go to sleep (or want to stop reminders).

I think that would be pretty much perfect. then we don't have the off state screen issue we have now, and the app will be better in that it's 100% clear what is happening.

Yury: tell me what you think about it. As always in this project, strong opinions are encouraged ;)

I think the advantage on the current design is that it's only 2 screens and fits well together. We can slightly modify the current "Off screen" design to achieve this.

Nico: Does that cover it?

[n13]

mockups

[ytspar]

@n13, moving your comments from the email here (also, there's a channel on http://mvgchat.slack.com for #recognition, if you want to use Slack):

(I'm in Beijing everything is blocked here... even gmail)

Hah, especially Google is blocked.

Uploaded a new build - it's pretty close to UX2.0 - but not quite.

Is this on TestFlight? I'm not clear on how to pull the latest builds.

One issue is numbers: There seems to be absolutely NO way to get them as close together as they are in the design. Not with HelveticaNeue anyway.

I reduced the kerning and that puts them closer together, but that eventually runs into problems where the numbers no longer render correctly.

I noted this on Zeplin, but there shouldn't be any reason not to use SF UI fonts for the numbers. It's kind of a pain to only modify part of a string in Sketch, but I've done some quick tests locally and the SF UI ("text," not "display") numbers blend in fine with Helvetica text.

Known issues:

• Fonts don't look exactly like design even though I used the same settings, e.g. same size, same weight, same font, same color

Can you send the new build or screenshots from it? I can overlay on top of the mocks and see what's up.

• Numbers specifically are totally off

Solvable, I think!

• Settings screen necessarily has a top bar and a done button. I am open to other suggestions but... it needs a done / dismiss button.

This got me thinking. The workflow changed, with the addition of the two new screens, so the on/off toggle on the edit view is no longer needed.

This makes more sense to me now.

! I can't seem to get this uploaded to Zeplin:

Could not export dartboards 😞 - ☝️ Looks like this error is caused by the font "AppleColorEmoji". Try changing the fonts of your emoji text layers to another font, save the document (⌘ + S) and try again.

wtf

To test:

• Check into editing the reminder text - this is new, it's in-line. It's supposed to scroll up which works, more or less, but has some stupid issue when adding/removing lines
• number of reminders and dates edit inline, and update the settings right away. The "cancel" buttons on the pickers are not working, e.g. the settings are applied immediately. I Think that's the way to go, will remove the cancel button.

[n13]

Released 1.0.4 build - I thought that build would automatically go to beta when I upload, but apparently for external testers they don't...

N.

[ytspar]

[ytspar]

Since I still can't push to Zeplin, I'll add the latest screenshots here:

More consistency in layouts (important now that I've seen the animations between states):

---

The screens themselves, at 1x:

[ytspar]

Rethinking this.

[ytspar]

Thinking, more like this:

Notes:

Individual screenshots:

[ytspar]

Tweaked and pushed to Zeplin (successfully)!

[n13]

One thing that kinda sucks about zeplin: No offline mode.

Like it doesn't work at all offline, not even showing things it already downloaded

But other than that... cool

On Mar 1, 2016, at 5:24 AM, Yury Tsukerman notifications@github.com wrote:

Tweaked and pushed to Zeplin (successfully)!

— Reply to this email directly or view it on GitHub https://github.com/n13/Recognition/issues/1#issuecomment-190769446.

[ytspar]

Yeah, it's a wrapper for a web view, I think.

I've cleaned up the Sketch file (better labeling, grouping, labeling - this is good to go for a public release, if need be) and made the relevant assets exportable via Zeplin and modified the workflow slightly, for consistency:

[ytspar]

Workflow

Zeplin updated

[ytspar]

OK, Zeplin updated significantly - all relevant assets are exportable (let me know if you need the lines and dividers in an exportable format, too). Even mopped up the document structure.

[ytspar]

Site's done!

The code isn't exactly elegant, but it works (at least in Chrome and Safari).

[ytspar]

To do

• [ ] Replace the screenshots when I get final copy for home screen
• [ ] Add more detailed copy to bottom of page (@n13, as we spoke about, creating at least an outline - why you would want to do this, some of the details your woo woo expert sent)
• [ ] Put it up on a custom domain - I can do this with AWS S3 or Github pages. The base I used is built around Github pages, so that's my preference.
• [ ] Mop up some of the cruft (I started using some frameworks, dumped them; there's probably some stuff left over), optimize the build. Probably not needed.
• [ ] Working App Store link
• [ ] Customize README (right now it's the Thoughtbot template default)

Website is here: https://github.com/ytspar/recognitionsite

[n13]

Super cool!!!

One thing though, I am going to only have 2 screens - the status screen and the settings screen. I am not sure what/why the first screen is ... but I am pretty sure we should have 2 ;)

I showed the app to Bentinho in Maui and got some tentative approval. And found a way to release this and also work for them, so ... yeah, baby!

Nik

On Mar 9, 2016, at 4:10 AM, Yury Tsukerman notifications@github.com wrote:

Site's done!

https://cloud.githubusercontent.com/assets/365593/13616506/c0ec895e-e5ac-11e5-9da4-34af6063003a.gif The code isn't exactly elegant, but it works (at least in Chrome and Safari).

— Reply to this email directly or view it on GitHub https://github.com/n13/Recognition/issues/1#issuecomment-193967866.

[n13]

This rocks man!

On Mar 9, 2016, at 2:51 PM, Yury Tsukerman notifications@github.com wrote:

To do

[ ] Replace the screenshots when I get final copy for home screen [ ] Add more detailed copy to bottom of page (@n13 https://github.com/n13, as we spoke about, creating at least an outline - why you would want to do this, some of the details your woo woo expert sent) [ ] Put it up on a custom domain - I can do this with AWS S3 or Github pages. The base I used is built around Github pages, so that's my preference. [ ] Mop up some of the cruft (I started using some frameworks, dumped them; there's probably some stuff left over), optimize the build. Probably not needed. [ ] Working App Store link Website is here: https://github.com/ytspar/recognitionsite https://github.com/ytspar/recognitionsite — Reply to this email directly or view it on GitHub https://github.com/n13/Recognition/issues/1#issuecomment-194166979.

[ytspar]

@n13 that's cool!

Yeah, the screenshots will be of whatever the app turns out like. I'd actually prefer one screenshot, animated.

[ytspar]

I made an animation for kicks, but it's missing smooth transitions.

[n13]

old ticket, retiring