The term design can mean different things to people from different backgrounds. This talk from the PyGRAZ and UX Graz meetup from 2023-07-25 acts as basis for an open discussion between these two user groups. It describes the "minimum viable everything" design of an actual application under development. Starting from the problem to solve it explores the evolution of the data models and visualizes a major rework. It also showcases a few approaches to "low effort" UI in the early phase of a project when concepts are still in flux.
2. Goals
• Bringing developers and UX folks
together
• Creating a broader view of what
design can mean for software
application development
• Mix of talk and open discussion
Picture by KawaiiArt1980: https://www.pexels.com/de-de/foto/jungen-und-madchen-sitzen-auf-bank-spielzeug-1767434/
3. Agenda
• About design
• Example application
• Problem description
• Early design phase
• Data model rework
• Low e
ff
ort UI
• "minimum viable everything"
• Continuous discussion
• What might be applicable in your situation?
• What would you have done di
ff
erently in my situation?
• What can we learn from each other?
5. About me
Thomas Aglassinger
• "Software developer" in a general sense
• I enjoy coding
• I also look past the plain coding
• 20+ years IT industry experience in various sectors
and companies
• Sole proprietor since April 2023
• Developing my own product
• Casual freelancer: https://aglassinger.at/
• Social links
• Homepage: https://roskakori.at/
• LinkedIn: https://www.linkedin.com/in/
thomas-aglassinger/
• GitHub: https://github.com/roskakori
• Mastodon: https://graz.social/@roskakori
7. What is design?
Di
ff
erent perspectives
• Developers: Data model, business logic,
algorithms, ...
Photo by Christina Morillo: https://www.pexels.com/de-de/foto/frauenprogrammierung-auf-einem-notizbuch-1181359/
8. What is design?
Di
ff
erent perspectives
• Developers: Data model, business logic,
algorithms, ...
• UX folks: touch points, channels, dialogs,
work
fl
ows, ...
Picture by Alvaro Reyes https://unsplash.com/de/fotos/qWwpHwip31M
9. What is design?
Di
ff
erent perspectives
• Developers: Data model, business logic,
algorithms, ...
• UX folks: touch points, channels, dialogs,
work
fl
ows, ...
• Wikipedia: "A design is a concept of either an
object, a process, or a system that is speci
fi
c and,
in most cases, detailed. Design refers to
something that is or has been intentionally created
by a thinking agent, though it is sometimes used
to refer to the nature of something."
Photo by cottonbro studio: https://www.pexels.com/de-de/foto/mann-der-schmeckt-was-er-kocht-3338536/
12. The problem
A potential customer has a contract and opens call for bids
Estimate effort 🤔 Submit offer 😨
13. The problem
A potential customer has a contract and opens call for bids
Estimate effort 🤔 Submit offer 😨
Too high → no contract 😭
14. The problem
A potential customer has a contract and opens call for bids
Estimate effort 🤔 Submit offer 😨
Too high → no contract 😭
Too low → contract but no pro
fi
t 😔
15. The problem
A potential customer has a contract and opens call for bids
Estimate effort 🤔 Submit offer 😨
Too high → no contract 😭
Just right → contract with pro
fi
t 🎉
Too low → contract but no pro
fi
t 😔
16. What to do about it?
Improve your estimations!
17. What to do about it?
Improve your estimations!
18. What to do about it?
Improve your estimations!
19. What to do about it?
Improve your estimations!
20. What to do about it?
Improve your estimations!
21. The problem
How to track and compare e
ff
ort?
How to track and
compare effort? 🤔
22. The problem
How to track and compare e
ff
ort?
How to track and
compare effort? 🤔
Get task and
time tracker💡
23. The problem
How to track and compare e
ff
ort?
How to track and
compare effort? 🤔
Get task and
time tracker💡
One combined solution
to compare and
rule them all 👊
24. The problem
How to track and compare e
ff
ort?
How to track and
compare effort? 🤔
Get task and
time tracker💡
One combined solution
to compare and
rule them all 👊
Marketing: 😡
"WTF Wiki syntax?"
Developer: 😡
"WTF no repo link?"
Accounting: 😡
"WTF no import?"
25. The problem
How to track and compare e
ff
ort?
How to track and
compare effort? 🤔
Get task and
time tracker💡
One combined solution
to compare and
rule them all 👊
Develop and maintain
complex in-house application
for comparison (€10-100k) 🤑
Marketing: 😡
"WTF Wiki syntax?"
Developer: 😡
"WTF no repo link?"
Accounting: 😡
"WTF no import?"
26. The problem
How to track and compare e
ff
ort?
How to track and
compare effort? 🤔
Get task and
time tracker💡
One combined solution
to compare and
rule them all 👊
Develop and maintain
complex in-house application
for comparison (€10-100k) 🤑
Develop and maintain crappy scripts
and macros for comparison 🤪
Marketing: 😡
"WTF Wiki syntax?"
Developer: 😡
"WTF no repo link?"
Accounting: 😡
"WTF no import?"
35. The problem
Agile development: "Embrace change!"
Developers
estimate 200K 🛠
Customer takes
offer 🎉
Features get added
and changed 🌪
36. The problem
Agile development: "Embrace change!"
Developers
estimate 200K 🛠
Customer takes
offer 🎉
Project costs
300K💰
Features get added
and changed 🌪
37. The problem
Agile development: "Embrace change!"
Developers
estimate 200K 🛠
Customer takes
offer 🎉
Project costs
300K💰
Features get added
and changed 🌪
Customer:
"WTF budget?"😱
39. Early design phase
Pre-evaluation
• Leave old company due to con
fl
ict of values
• Decide to become self employed for a
change
• A couple of product ideas in mind
• Roughly evaluate them by talking to people
in close vicinity (friends, relatives, former
colleagues, gamer mates, ...)
• Pick the one that triggers people to tell their
own stories and has most emotional
reactions → project estimation
Picture by Miriam Espacio: https://www.pexels.com/de-de/foto/person-die-in-der-nahe-von-baumen-steht-3354135/
40. Pitch phase
Con
fi
rmation
• Compile a set of slides that pitches the entire
thing somewhat coherently.
• Run it on a couple of acquaintances.
• Integrate feedback.
• De
fi
ne target audience and possible revenue
streams.
• Re
fi
ne and con
fi
rm features for minimum
viable product.
41. Execution phase
Let's go!
• Find a couple of people to periodically interact with.
• Draw a few sketches.
• Start coding.
• (Out of scope: Found a sole proprietor company
(German: Einzelpersonenunternehmen)
• Pitch and recruit initial test customers.
• ...This is the story so far
Picture from Kelly : https://www.pexels.com/de-de/foto/foto-des-mannes-der-steht-wahrend-er-spitzhacke-halt-2382665/
46. Initial data model
• Worked reasonably well for GitHub and clocko:do
• Matches work to task using the task code in the description
• Turned out to be ugly for GitLab
• Tracks both tasks and work
• Matches work to task using internal references
51. Data model changes
E
ff
ort depends on kind
Simple
• Add
fi
eld
• Rename
fi
eld
• Changed
fi
eld parameters like length or
valid range
• Remove unused
fi
eld
• Add default to
fi
eld
• ...
Complex
• Split
fi
elds
• Add new
fi
eld that must hold a
meaningful value from the start
• Major moving and renaming of
entire model hierarchies
• Change relations and dependencies
52. Visualization of change impact
Gource movie about the source code repository
• Link: https://youtu.be/kmBJf_dQodQ
• Interesting points in time line:
• 0:00 Quickly establish basic structures
• 1:00 Start of a period of iterative improvement
• 4:20 Start of major data model rework
• 5:20 Continue iterative improvement with reword data model
56. From data model to user interface
Example: Project
• Organization: reference
• Code: text
• Name: text
• "Demo Inc."
• 23-0074-s
• "Cooking App"
57. From data model to user interface
Example: Project
• Organization: reference
• Code: text
• Name: text
• created_at: date and time
• modi
fi
ed_at: date and time
58. Code for data model
class Project(SiiModel):
organization: Organization = models.ForeignKey(
Organization,
on_delete=models.PROTECT,
related_name="project",
verbose_name=_("organization")
)
code: str = models.CharField(
max_length=MAX_CODE_LENGTH,
validators=[validate_code],
verbose_name=_("code"),
)
created_at: datetime = models.DateTimeField(
auto_now_add=True, verbose_name=_("created at")
)
modi
fi
ed_at: datetime = models.DateTimeField(
auto_now=True, verbose_name=_("modi
fi
ed at")
)
name: str = models.CharField(
max_length=MAX_NAME_LENGTH,
verbose_name=_("name"),
)
59. Code for data model and user interface
class Project(models.Model):
organization: Organization = models.ForeignKey(
Organization,
on_delete=models.PROTECT,
related_name="project",
verbose_name=_("organization")
)
code: str = models.CharField(
max_length=MAX_CODE_LENGTH,
validators=[validate_code],
verbose_name=_("code"),
)
created_at: datetime = models.DateTimeField(
auto_now_add=True, verbose_name=_("created at")
)
modi
fi
ed_at: datetime = models.DateTimeField(
auto_now=True, verbose_name=_("modi
fi
ed at")
)
name: str = models.CharField(
max_length=MAX_NAME_LENGTH,
verbose_name=_("name"),
)
@admin.register(Project)
class ProjectAdmin(admin.ModelAdmin):
fi
eldsets = (
(
None,
{
"
fi
elds": (
"organization",
"code",
"name",
)
},
),
(_("administration"), {"
fi
elds": ("created_at", "modi
fi
ed_at")}),
)
readonly_
fi
elds = ("created_at", "modi
fi
ed_at")
)
60. Code for data model and user interface
Summary
class Project(models.Model):
organization: Organization = models.ForeignKey(
Organization,
on_delete=models.PROTECT,
related_name="project",
verbose_name=_("organization")
)
code: str = models.CharField(
max_length=MAX_CODE_LENGTH,
validators=[validate_code],
verbose_name=_("code"),
)
created_at: datetime = models.DateTimeField(
auto_now_add=True, verbose_name=_("created at")
)
modi
fi
ed_at: datetime = models.DateTimeField(
auto_now=True, verbose_name=_("modi
fi
ed at")
)
name: str = models.CharField(
max_length=MAX_NAME_LENGTH,
verbose_name=_("name"),
)
@admin.register(Project)
class ProjectAdmin(admin.ModelAdmin):
fi
eldsets = (
(
None,
{
"
fi
elds": (
"organization",
"code",
"name",
)
},
),
(_("administration"), {"
fi
elds": ("created_at",
"modi
fi
ed_at")}),
)
readonly_
fi
elds = ("created_at", "modi
fi
ed_at")
)
• Organization: reference
• Code: text
• Name: text
• created_at: date and time
• modi
fi
ed_at: date and time
62. Edit project and everything related
The problem
• Project model itself is simple
• But many things related to it:
• Task trackers
• Work trackers
• Users
• Estimation
• ....
• Encompasses large parts of the entire data model
• Complexity will grow as features are added
Photo by Linh Ha https://unsplash.com/de/fotos/KN8W0Q8H3gI
63. Edit project and everything related
Solution 1:
• Spend n+1 person days with Figma et al.
• Spend m+1 person days coding away
• Wait for requirements to change
• Repeat
64. Edit project and everything related
Solution 1:
• Spend n+1 person days with Figma et al.
• Spend m+1 person days coding away
• Wait for requirements to change
• Repeat
65. Edit project and everything related
Solution 1:
• Spend n+1 person days with Figma et al.
• Spend m+1 person days coding away
• Wait for requirements to change
• Repeat
66. Edit project and everything related
Solution 2
• Con
fi
gure project in YAML
fi
le
• When changed, upload via form
67. Edit project and everything related
Solution 2
• Con
fi
gure project in YAML
fi
le
• When changed, upload via form
organization:
name: Demo Inc.
timezone: Europe/Vienna
projects:
- code: siisurit
name: Siisurit
trackers:
- name: siisurit-demo
api_kind: gitlab
api_location: https://gitlab.com/xxxx/siisurit-demo
api_token: ...
68. Edit project and everything related
Solution 2
• Con
fi
gure project in YAML
fi
le
• When changed, upload via form
70. Summary
• Example of explorative design and major data model rework
• Cheap vs expensive data model changes
• Python+Django keep you nimble
71. Conclusion
• Design user experience early
• Design user interface late. Meanwhile:
• Use generated user interfaces for simple interaction
• Use descriptive text
fi
les and uploads for complex structures and
relationships
• Helpful: Developers and designers that understand each others needs