Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

7b0645f018c0bddc8ce3900ccc3ba70c?s=47 Pycon ZA
October 09, 2020

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

7b0645f018c0bddc8ce3900ccc3ba70c?s=128

Pycon ZA

October 09, 2020
Tweet

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