Create a default app design for all frameworks

[jholt1]

Outcome

To design a journey that all frameworks can follow. This will allow for easy comparison and allow for a number of apps to be used for testing. Similar to https://todomvc.com/

Scope

• Decide the app journey
• Create using a framework
• Design user journey
• Wireframe the first iteration of the example
• consider using only existing components
• identify next candidates
• create tests for the example

!! We are designing the component first, then we add it to the example app, to avoid designing for a cake company.

Designing the app

• Task Model
• User flow
• Wireframe

Building the app

Iteration 1:
Breaking down the iteration in 4 steps of the journey:

• Default app: Initiation - Starting point #213
• Default app - Cake configuration version 1 #214
• Default app - Adding to basket and buying #215
• Default app - Order confirmation #216

Candidates for the next components

• muon-form: we'll need it to have functional forms (Create form component #29)
• muon-colunmns: this will allow us to have more layout options (Create column component #22)
• muon-hero: for the homepage (Create hero component #27)
• muon-card: to display options, frame content that needs a visual container (Create card component #26)

[RobTobias123]

Following refinement, we decided on the Cake Configurator concept as it is removed from the biases of our energy business.

[RobTobias123]

In order to design the example User journey I have first looked at the Task Model, asking...

• What is it that the user is ultimately trying to do?
• What tasks do they need to complete to achieve their goal?
• How will the user want to move between each task?
• What is the user’s mental model and behaviour patterns?

Here's the mental model and details for an assumed persona...
https://3t2jkz.axshare.com/#id=0y6tmr&p=task_model&g=1

[RobTobias123]

Image of the Task Model...

[RobTobias123]

Next, I have taken the Task Model and mapped to a User Journey flow, the purpose of which is to...

• Design the system to match user behaviours
• Guide the user towards the goal
• Realise the opportunity to optimise flow

https://3t2jkz.axshare.com/#id=woiyzf&p=user_journey&g=1

The comments on purple are potential to use existing or possibly future Muon components. (We can add as they become reality)

[RobTobias123]

Next steps are to analyse this, put into a wireframe and prototype - possibly in Figma to start with, to use as a starting point example design to then build with the real Muon components to test them.

[RobTobias123]

Would like to run the UJ through refinement today before commencing on Wireframes/Prototype.

[PtitBen]

Had a quick chat about this on the way out yesterday with Jon, and we'll look at a interative approach for the build, getting one step closer to Rob's wireframe every version.

Each iteration will have a defined goal/outcome, and we'll keep those focused on a limited amount of things.

Example for a first iteration, what is the MVP of the cake thing:

The goal of this first version is to allow a customer to buy a maximum of 2 cakes online.
This will allow us to:

• test our links/buttons
• test our inputter (one of the variants) and its options (details, validation)
• setup the basic scenarios for the cake purchase journey

The second version will add something that will allow us to test one more aspect. For example, offer two types of cake, and that could be our user story for the radio buttons.

We can do a story mapping exercise, looking at our components and mapping them to a feature that can be planned into the versions :)

Thoughts? :)

[RobTobias123]

Yes, makes sense to me. The wireframe could encompass the whole thing but the build should be iterative as components are created. I have indicated what type of components could be used at which stages on my 1st draft of the UJ, but fully aware some of these might not exist for a while. As mentioned yesterday, I think I will perhaps colour code it on 2nd draft (along with the re-positioning of the 'controlled evaluation' section) and perhaps on Wireframe to help us easily distinguish between the two.

[PtitBen]

That's exactly what I was going to discuss with you.
Your wireframe and journey flow looks at the vision, full experience, and will be key when doing the user story mapping.

I like the colour coding idea!!
We can set some colours when we slice the story mapping into releases and use those colours on your wireframe!

[RobTobias123]

Cake configurator User Journey Map - Iteration 2 added, following refinement yesterday. https://3t2jkz.axshare.com/

[RobTobias123]

It's a work in progress but here's the config section wireframe prototype. I tried to use the Muon components as per the Sketch file but this was proving time-consuming as having to bolt it together in Axure (Sketch Cloud or Invision not permitted IIRC?) so I have started to use Axure's default components to make it work as we can still easily identify what components they are. It's WIP so more to come and be refined /annotated yet.

https://3t2jkz.axshare.com/#id=gwd3mo&p=home__start_&c=1

[RobTobias123]

Wireframe so far inidividual sketch artboards with prototype connections. If we can utilise Sketch Cloud for this we can automatically turn it into a basic clickable prototype for reference and view at 100% scale. Is Sketch Cloud permitted for this or do we need to continue with reworking in Axure/Axshare?

[RobTobias123]

Same pages individual so you can see the details...

[RobTobias123]

Home page marked up with Existing components (Green) and Potential components (orange) for Muon....

[RobTobias123]

Config page 1 marked up components

[RobTobias123]

[RobTobias123]

[RobTobias123]

[RobTobias123]

[RobTobias123]

[RobTobias123]

Long form...

[RobTobias123]

Updated Sketch file components to use the muon- prefix.