Expanding skill sets - Broaden your perspective on design

Thomas Aglassinger 2023-07-25
Expanding skill sets - Broaden
your perspective on design
pyGRAZ meets UX Graz

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/

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?

Not-Agenda
• Product presentation
• Discussion of the solution of the
problem space
• Success story → still going on

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

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/

What is design?
Di
ff
erent perspectives
algorithms, ...
• UX folks: touch points, channels, dialogs,
work
fl
ows, ...
Picture by Alvaro Reyes https://unsplash.com/de/fotos/qWwpHwip31M

What is design?
Di
ff
erent perspectives
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/

The problem: Project estimation

The problem
A potential customer has a contract and opens call for bids
Estimate effort 🤔

The problem
Estimate effort 🤔 Submit offer 😨

The problem
Too high → no contract 😭

The problem
Too low → contract but no pro
fi
t 😔

The problem
Just right → contract with pro
fi
t 🎉
Too low → contract but no pro
fi
t 😔

What to do about it?
Improve your estimations!

The problem
How to track and compare e
ff
ort?
How to track and
compare effort? 🤔

The problem
ff
ort?
How to track and
Get task and
time tracker💡

The problem
ff
ort?
How to track and
Get task and
time tracker💡
One combined solution
to compare and
rule them all 👊

The problem
ff
ort?
How to track and
Get task and
time tracker💡
to compare and
rule them all 👊
Marketing: 😡
"WTF Wiki syntax?"
Developer: 😡
"WTF no repo link?"
Accounting: 😡
"WTF no import?"

The problem
ff
ort?
How to track and
Get task and
time tracker💡
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?"

The problem
ff
ort?
How to track and
Get task and
time tracker💡
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?"

The problem
Sales vs developer estimation
Sales estimates
100K 💼

The problem
Sales estimates
100K 💼
Customer takes
offer 🎉

The problem
Sales estimates
100K 💼
Customer takes
offer 🎉
CEO: "Sales rock!" 🏅

The problem
Sales estimates
100K 💼
Customer takes
offer 🎉
Developers
estimate 200K 🛠

The problem
Sales estimates
100K 💼
Customer takes
offer 🎉
Developers
estimate 200K 🛠
Projects costs
180K💰

The problem
Sales estimates
100K 💼
Customer takes
offer 🎉
Developers
estimate 200K 🛠
Projects costs
180K💰
CEO: "Devs suck!
Should have been
100K!" 💩

The problem
Agile development: "Embrace change!"
Developers
estimate 200K 🛠

The problem
Developers
estimate 200K 🛠
Customer takes
offer 🎉

The problem
Developers
estimate 200K 🛠
Customer takes
offer 🎉
Features get added
and changed 🌪

The problem
Developers
estimate 200K 🛠
Customer takes
offer 🎉
Project costs
300K💰
Features get added
and changed 🌪

The problem
Developers
estimate 200K 🛠
Customer takes
offer 🎉
Project costs
300K💰
Features get added
and changed 🌪
Customer:
"WTF budget?"😱

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/

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.

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/

Minimum viable product
Connect task, estimation and actual effort

Initial data model
Task
Work
Relationship between them

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

Design of API transfer layer structure

Improved data model
Task
Work
Relationship between them

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

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

Comparison of initial and reworked data model

Do it yourself
• Gource, a software version control vizualization tool: https://gource.io/
• Command used (change --title and output
fi
le at end, if needed):
gource --auto-skip-seconds 1 --
fi
le-idle-time 0 --hide dirnames,
fi
lenames,usernames --seconds-per-day 1
--title "Siisurit" -1280x720 --output-ppm-stream - .| ffmpeg -y -r 30 -f image2pipe -vcodec ppm -i - -vcodec
libx264 -preset ultrafast -pix_fmt yuv420p -crf 1 -threads 0 -bf 0 /tmp/gource-movie.mp4

Low effort CRUD* UI
(with Python and Django)
* CRUD = create, read, update, delete

From data model to user interface
Example: Project
• Organization: reference
• Code: text
• Name: text
• "Demo Inc."
• 23-0074-s
• "Cooking App"

From data model to user interface
Example: Project
• Code: text
• Name: text
• created_at: date and time
• modi
fi
ed_at: date and time

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"),
)

Code for data model and user interface
class Project(models.Model):
Organization,
)
)
)
modi
fi
fi
ed at")
)
)
@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")
)

Code for data model and user interface
Summary
class Project(models.Model):
Organization,
)
)
)
modi
fi
fi
ed at")
)
)
@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")
)
• Code: text
• Name: text
• created_at: date and time
• modi
fi
ed_at: date and time

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

Solution 1:
• Spend n+1 person days with Figma et al.
• Spend m+1 person days coding away
• Wait for requirements to change
• Repeat

Solution 2
• Con
fi
gure project in YAML
fi
le
• When changed, upload via form

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: ...

Summary
• Example of explorative design and major data model rework
• Cheap vs expensive data model changes
• Python+Django keep you nimble

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

Discussion
• Homepage: https://roskakori.at/
• Casual freelancer: https://aglassinger.at/
• LinkedIn: https://www.linkedin.com/in/
thomas-aglassinger/
• GitHub: https://github.com/roskakori
• Mastodon: https://graz.social/@roskakori

Expanding skill sets - Broaden your perspective on design

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Expanding skill sets - Broaden your perspective on design

Ähnlich wie Expanding skill sets - Broaden your perspective on design (20)

Mehr von roskakori

Mehr von roskakori (18)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Expanding skill sets - Broaden your perspective on design