A month in the life of people who sprinkle tech - WebFlow, Django, and Users by JD Bothma

In this talk I would like to share a couple of approaches and tools we at OpenUp use in our mission of empowering people and government through data, technology and innovative-thinking.

User-centered design is key to the technology and innovative thinking we offer this space. Implementing it in practice can be very challenging.

To minimise the gap between design and implementation on tiny budgets, we build frontends using WebFlow (a modern site-builder) and integrate that with (usually django-based) backends to help users get right to the story in the data. I will demonstrate our approaches for making this work sustainably on a range of projects.

We find it essential that project lead developers are able to help partners, clients, and the project designer connect the available data, where technology can offer help, and what users actually need. I would like to share what we believe is an accessible illustration of a process of exploring user needs and the opportunities to address them that ties directly into agile development. This has helped get everyone on the same page and facilitated these discussions.

We would love for others to use these approaches and tools where it might help them

Transcript

1. JD Bothma | 09 October 2020 A month in the life of people who sprinkle tech Webflow, Django, and Users
2. • Who are the people who sprinkle tech? • Webflow exports for frontends • A user-centred design approach (diagram) • If you also want to sprinkle tech What’s covered
3. A South Africa where citizens and government are empowered to thrive, collaboratively Vision “
4. OpenUp seeks to empower people and government, through data, technology and innovative-thinking, to become active agents in creating positive social change. Mission “
5. A little bit of data A lot of usability “
6. • Who are the people who sprinkle tech? • Webflow exports for frontends • A user-centred design approach (diagram) • If you also want to sprinkle tech What’s covered
7. • User experience is usually critical • (Even) aesthetics is often important • The designer should have the freedom to design compelling, convenient widgets, interfaces • Pixel pushing takes $$$ • Compromises are hard Why not component libraries? Or custom? What’s the problem?
8. Can we give the designer complete freedom? And then actually build it? “
9. What is webflow? Like Wix but awesome
10. What is webflow? Like Wix but awesome
11. Can we design in Webflow instead of Figma? And then add data? “ In the worst case, we have all the markup and CSS...
12. Just the overview so long... Webflow export as a dynamic frontend
13. Import your webflow export repeatably AKA DON’T EDIT EXPORTS MANUALLY! import-webflow-export tool https://github.com/OpenUpSA/import-webflow-export/
14. A Webflow site export Zip file Webflow as a static site frontend
15. Dev-side: Making the exported webflow site do stuff - we need Javascript Webflow as a static site frontend git status git add src git commit
16. A big data portal site Webflow as a Django frontend vulekamali.gov.za
17. Client-side: A list of plugging data in Webflow as a Django frontend github.com/
18. • Insert {% load static %} at the top • Rewrite asset paths to Django Static path • Insert template tag for HTML meta tag values • Insert additional meta tags • Insert site JS bundle script tag • Insert page context JSON script tag Transformations for django projects
19. Dev-side: It’s… at least it’s automated! Transformations for django projects
20. • Use the Webflow CMS to prototype with data • Create a demo folder with demo pages • Automated testing FTW • Isolate your webflow assets/templates - django app • Include your custom JS in webflow for dev • Create Webflow “Symbols” == “Components” Tips and tricks
21. • Combine with a known framework ◦ Backbone.js? ◦ Vue? • Automate export, import, Pull Request • Better Webflow Interaction compatibility Future work
22. • Who are the people who sprinkle tech? • Webflow exports for frontends • A user-centred design approach (diagram) • If you also want to sprinkle tech What’s covered
23. • The client wants an app • The organisation has its vision • The contract has deliverables • The team has memory loss • We don’t have enough product owners • The vision and user needs should be shared anyway • WTF is Agile? (This is not an agile course) What’s the problem?
24. • Some diagrams we find helpful • The slides • A youtube video • It’s Creative Commons What’s on offer? https://github.com/OpenUpSA/a-civic-tech-project-process
25. Lots of information Lots of decisions Vision vs reality Bring it all together Vision Stakeholders Users Data Budget Backlog management Team A councillor A civil servant An activist A journalist A committee
26. Evaluate Evaluate Evaluate Evaluate Build and try Build and try Build and try Build and try Intended outcome Intended outcome Who is involved? Who is involved? What’s the state of the world? What’s the state of the world? Evaluate Evaluate Build and try Build and try How could users succeed? How could users succeed? Storyboards, user journeys & user stories Personas Project vision & objectives Wireframe, Design system, Mockup, MVP and iteration Information architecture User testing results, client feedback A project process Mapping as-is Mapping to-be
27. Evaluate Evaluate Evaluate Evaluate Build and try Build and try Build and try Build and try Intended outcome Intended outcome Who is involved? Who is involved? What’s the state of the world? What’s the state of the world? Evaluate Evaluate Build and try Build and try How could users succeed? How could users succeed? Storyboards Personas Project vision Wireframes Information architecture User testing results What do we want to achieve? Why do we think our idea will achieve that? Should we help our client with this stage? What motivates your users? What tools do they use? What do they know? How educated are they? What data is available and is it ready to use? What information is out there? Where are your users located? What mechanisms exist? How did they find our work? What are all the steps involved? Project objectives User journeys User stories Mockups Design system MVP Iteration Client feedback What do you understand from what you see here? What do you not understand from what you see here? What have we misunderstood? What is the smallest thing we could do to validate our idea? What is the core of this feature? What can wait? Stakeholders What similar approaches exist? Mapping as-is Mapping to- be
28. • How much “initial user research”? • When does this start? ◦ Conceptualisation? ◦ When contracts are signed? Future work
29. • Who are the people who sprinkle tech? • Webflow exports for frontends • A user-centred design approach (diagram) • If you also want to sprinkle tech What’s covered
30. Join our community https://www.meetup.com/Codebridge/ ZATech Slack #codebridge-newlands Contract as a senior developer info@openup.org.za openup.org.za
31. Making the exported webflow site do stuff - we need Javascript Webflow as a static site frontend
32. Very customisable interactions
33. A little single-page tool Webflow as a static site frontend keepthereceipts.org .za
34. Information architecture Structure more than flow
35. Storyboard A note about design scope
36. Storyboard A note about design scope
37. Storyboard A note about design scope
38. Storyboard A note about design scope
39. Storyboard A note about design scope
40. Storyboard A note about design scope
41. Evaluate Evaluate Evaluate Evaluate Build and try Build and try Build and try Build and try Intended outcome Intended outcome Who is involved? Who is involved? What’s the state of the world? What’s the state of the world? Evaluate Evaluate Build and try Build and try How could users succeed? How could users succeed? Difference between metro and others; Lots of words, charts New feature Metropol focus Metro muni performance data available!
42. Evaluate Evaluate Evaluate Evaluate Build and try Build and try Build and try Build and try Intended outcome Intended outcome Who is involved? Who is involved? What’s the state of the world? What’s the state of the world? Evaluate Evaluate Build and try Build and try How could users succeed? How could users succeed? BUDGE T Time
43. Evaluate Evaluate Evaluate Evaluate Build and try Build and try Build and try Build and try Intended outcome Intended outcome Who is involved? Who is involved? What’s the state of the world? What’s the state of the world? Evaluate Evaluate Build and try Build and try How could users succeed? How could users succeed? Fear Time Plotting fear
44. Evaluate Evaluate Evaluate Evaluate Build and try Build and try Build and try Build and try Intended outcome Intended outcome Who is involved? Who is involved? What’s the state of the world? What’s the state of the world? Build and try Build and try How could users succeed? How could users succeed? Evaluate Evaluate Plotting fear Fear Time