Open jholt1 opened 2 years ago
Following refinement, we decided on the Cake Configurator concept as it is removed from the biases of our energy business.
In order to design the example User journey I have first looked at the Task Model, asking...
Here's the mental model and details for an assumed persona... https://3t2jkz.axshare.com/#id=0y6tmr&p=task_model&g=1
Image of the Task Model...
Next, I have taken the Task Model and mapped to a User Journey flow, the purpose of which is to...
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)
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.
Would like to run the UJ through refinement today before commencing on Wireframes/Prototype.
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:
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? :)
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.
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!
Cake configurator User Journey Map - Iteration 2 added, following refinement yesterday. https://3t2jkz.axshare.com/
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.
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?
Same pages individual so you can see the details...
Home page marked up with Existing components (Green) and Potential components (orange) for Muon....
Config page 1 marked up components
Long form...
Updated Sketch file components to use the muon- prefix.
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
!! 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:
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)