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

A month in the life of people who sprinkle tech...

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

Pycon ZA

October 09, 2020
Tweet

More Decks by Pycon ZA

Other Decks in Programming

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. OpenUp seeks to empower people and government, through data, technology

    and innovative-thinking, to become active agents in creating positive social change. Mission “
  4. • 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
  5. • 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?
  6. Can we design in Webflow instead of Figma? And then

    add data? “ In the worst case, we have all the markup and CSS...
  7. Import your webflow export repeatably AKA DON’T EDIT EXPORTS MANUALLY!

    import-webflow-export tool https://github.com/OpenUpSA/import-webflow-export/
  8. 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
  9. • 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
  10. • 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
  11. • Combine with a known framework ◦ Backbone.js? ◦ Vue?

    • Automate export, import, Pull Request • Better Webflow Interaction compatibility Future work
  12. • 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
  13. • 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?
  14. • 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
  15. 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
  16. 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
  17. 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
  18. • How much “initial user research”? • When does this

    start? ◦ Conceptualisation? ◦ When contracts are signed? Future work
  19. • 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
  20. Making the exported webflow site do stuff - we need

    Javascript Webflow as a static site frontend
  21. 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!
  22. 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
  23. 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
  24. 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