MoodleNet/Front-end dev workshop

Introduction

Doug and Mayel from the MoodleNet team spent three days (Weds 19th to Fri 21st September 2018) with Kayleigh, Sam, and Rob from Outlandish. This was follow-up work to the Design Sprint we did back in May 2018, and to UX Milestones 1 and 2.

What we aimed to achieve

We had an ambitious agenda for the workshop:

Allow Sam, the front-end developer Outlandish have assigned to this project, to get up to speed with MoodleNet
Help define and scope front-end deliverables
Decide on the layout/look/feel of both the desktop and mobile web versions of MoodleNet
Create a draft style guide (in code)
Develop a basic app (skeleton repo in GitLab)
Filed GitLab issues for (at least 1+ month of) post-workshop front-end development
Agree on the toolkit (incl. libraries) we’re going to use

Outputs

There is a GitLab board to track issues from both this workshop and forthcoming front-end development work.

What we achieved

During the workshop itself, we managed to:

Prioritise the above work, using a 'must', 'should', and 'could' approach
List the assumptions we came into the workshop with and whether they're actually correct
Agree on the front-end toolkit we're going to use and make decisions on components
Make some UI decisions, building on UX Milestones 1 and 2
Decide on resource allocation
Figure out what the 'containers' would look like from a basic design point of view
Start thinking about pre-MVP user testing
Develop a basic skeleton app in React
Create a verb-based list of intentions for MoodleNet users to help inform front-end development
Experiment with ReactXP and other options to figure out if they're a good fit

Next steps (draft)

Front-end dev milestone 1

Completion date: Thursday 25th October (i.e. before MozFest)

Specify style guide as code
Implement client-side routing
Create theme system
Implement as many UI components and app screens as possible in the time available

Front-end dev milestone 2

Completion date: Friday 23rd November (i.e. before Moodle Product Roadmaps week)

Implement remaining UI components and app screens
Hook up front-end code with back-end (GraphQL and app logic)
Test sign-up process with users

Front-end dev milestone 3

Completion date: TBD

Finalise style guide
Implement any new MoodleNet branding guidelines (TBD)

Documentation