jholt1 commented 2 years ago

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

[x] Decide the app journey
[x] Create using a framework
[x] Design user journey
[x] Wireframe the first iteration of the example
[x] 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

Building the app

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

[x] #213
[x] #214
[x] #215
[x] #216

Candidates for the next components

muon-form: we'll need it to have functional forms (https://github.com/centrica-engineering/muon/issues/29)
muon-colunmns: this will allow us to have more layout options (https://github.com/centrica-engineering/muon/issues/22)
muon-hero: for the homepage (https://github.com/centrica-engineering/muon/issues/27)
muon-card: to display options, frame content that needs a visual container (https://github.com/centrica-engineering/muon/issues/26)

RobTobias123 commented 2 years ago

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

RobTobias123 commented 2 years ago

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 commented 2 years ago

Image of the Task Model...

RobTobias123 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

PtitBen commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

RobTobias123 commented 2 years ago

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 commented 2 years ago

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?