1063699 - Design overall UI and flow for "Event Wizard"

Status: RESOLVED FIXED

(Webmaker Graveyard :: Events, defect)

Description

[Matt Thompson (@OpenMatt :OpenMatt)]

* Zahra: do you have a link to current mock-up you can add here?

Comment 1

[Matt Thompson (@OpenMatt :OpenMatt)]

* Zahra: can you post link to prototypes here as you go? 

* Wex: is this correct way to scope and assign this ticket?

Comment 2

[Simon Wex :wex]

OpenMatt, WFM.

Comment 3

[Matt Thompson (@OpenMatt :OpenMatt)]

* Any progress to report here?

Comment 4

[Matt Thompson (@OpenMatt :OpenMatt)]

* Aki: once you have a version of this that you think pulls as much from the other tickets as you can... 

* can you put this on staging somewhere so we can more easily see it? 
I think we're at a point in the process where we need a prototype we can visualize and make the rest of the work concrete -- even if it's still very rough

Comment 5

[Matt Thompson (@OpenMatt :OpenMatt)]

* Here's the work on this to date: 
https://github.com/ZeeJab/mozilla-dawnstar 

* Zahra is on PTO this week, so unassigning from her

Comment 6

[Matt Thompson (@OpenMatt :OpenMatt)]

* DESIGNER? We'll want to try to assign this to another designer, if possible, so that we can make progress in Zahra's absence

* Flagging Wex, Hannah, Cassie and Erika D for thoughts on who might be able to take this on this week

Comment 7

[Matt Thompson (@OpenMatt :OpenMatt)]

DESIGN BRIEF & SUMMARY:

** BRIEF: https://wiki.mozilla.org/Webmaker/Wizard
** PROTOTYPE: https://github.com/ZeeJab/mozilla-dawnstar 
** COPY: https://etherpad.mozilla.org/descriptions
** VISUAL ASSETS: 
graphics: https://party.webmaker.org/resources
photos: http://mzl.la/photos
Popcorn video (optional): https://openmatt.makes.org/popcorn/29l1

Comment 8

[Erika Drushka]

Scheduled a session at the Engagement Team Work week to help with this. Currently Tuesday Sept 23 from 3:15-5:00 (schedule may change).

Comment 9

[Matt Thompson (@OpenMatt :OpenMatt)]

* sounds good! pushing to next train

Comment 10

[Matt Thompson (@OpenMatt :OpenMatt)]

* New prototype on staging: https://welcome.mofostaging.net/event/start/
* Still needs UX & UI over top

Comment 11

[Simon Wex :wex]

Cassie, it feels like the next step is to do a pass at UX with some redpen feedback. Thoughts on how we should tackle that?

Comment 12

[Cassie McDaniel [:cassiemc]]

Assigning this one to Ricardo. 

Ricardo, let me know if you want to talk this through, or if you want to just jump in with some mockups.

Comment 13

[Matt Thompson (@OpenMatt :OpenMatt)]

* Ricardo, here's an updated brief:

DESIGN BRIEF & SUMMARY:

** BRIEF: https://wiki.mozilla.org/Webmaker/Wizard
** PROTOTYPE: https://github.com/ZeeJab/mozilla-dawnstar
** PROTOTYPE ON STAGING: https://welcome.mofostaging.net/event/start/
** COPY: https://etherpad.mozilla.org/descriptions
** VISUAL ASSETS: 
graphics: https://party.webmaker.org/resources
photos: http://mzl.la/photos
Popcorn video (optional): https://openmatt.makes.org/popcorn/29l1

Comment 14

[Matt Thompson (@OpenMatt :OpenMatt)]

This user story might also be helpful:
https://foundation.etherpad.mozilla.org/wmuserstory

Comment 15

[Matt Thompson (@OpenMatt :OpenMatt)]

* Ricardo: you mentioned you'd have a design in Redpen -- can you paste the link here?

Comment 16

[Ricardo Vazquez [:ricardo]]

My bad Matt, I have to get better at integrating BZ with my workflow. Here is the Red Pen that I posted on the Engagement Etherpad: https://redpen.io/p/sf9968ce9c68c6e351. I demoed this on the Engagement Work Week demo day. Copy and illustrations are not 100% yet.

Comment 17

[Ricardo Vazquez [:ricardo]]

Attachment: https://redpen.io/p/sf9968ce9c68c6e351

I would like your thoughts on a different design language for the Event wizard. I started iterating based on the colour contrast concern you brought up, but then I realized that all this colour might overwhelm a person that is already splitting their attention while being on the phone with a Mozilla Rep.

Highlights of this iteration:

Iterating on a minimal UI approach, using colour only to focus.
Focusing the form on the center of screen. 
Adding visual progress bar. 
Removing text and boxes that might otherwise de-rail the experience.

Comment 18

[Matt Thompson (@OpenMatt :OpenMatt)]

* The [oct3] train has now left the station. So please update the whiteboard with [oct17], or whatever train you're now planning to put this on. Thanks!

Comment 19

[Cassie McDaniel [:cassiemc]]

Comment on attachment 8500058 [details]
https://redpen.io/p/sf9968ce9c68c6e351

This looks awesome Ricardo, I think it's a drastic improvement and very nearly there. Some details to address in Redpen.

Comment 20

[Ricardo Vazquez [:ricardo]]

Attachment: https://redpen.io/p/sf9968ce9c68c6e351

Comment 21

[Ricardo Vazquez [:ricardo]]

Attachment: https://redpen.io/p/sf9968ce9c68c6e351

Comment 22

[Cassie McDaniel [:cassiemc]]

Comment on attachment 8501273 [details]
https://redpen.io/p/sf9968ce9c68c6e351

Super close! Just some final details to address.

Comment 23

[Ricardo Vazquez [:ricardo]]

Attachment: https://redpen.io/p/sf9968ce9c68c6e351

Final Wizard review

Comment 24

[Cassie McDaniel [:cassiemc]]

Comment on attachment 8502552 [details]
https://redpen.io/p/sf9968ce9c68c6e351

R+ woohoo!

Comment 25

[Ricardo Vazquez [:ricardo]]

:D

Comment 26

[Aki Rose Braun [:akirose]]

I'm seeing more comments on the redpen & heard mention in demos—should I be waiting on this build?

Comment 27

[Ricardo Vazquez [:ricardo]]

Hi Aki, the comments on Red Pen are not show-stoppers. The build can continue :)