How I researched, designed and built three projects
These projects show how I connect ideas, content, visual decisions and development. TEG-Blue is my own project; El Gradiente is a collaboration with Martha Alicia Tronco Rosas; the school website is an independent demonstration for a fictional business.
Three projects
Contribution · Decisions · Resource
TEG-Blue
The Emotional Gradient Blueprint
TEG-Blue
Emotions, behaviour and relationships
A framework for emotional patterns
Interactive tools for reflection
The framework
I created the TEG-Blue framework to examine how emotions, nervous-system responses and relationships shape behaviour.
Read the frameworkTools for emotional clarity
The tools offer guided reflections, behaviour comparisons and pattern maps. Each begins with a question about an experience, such as people pleasing, apology, care or control.
Explore the toolsMy contribution
I work across research synthesis, conceptual structure, writing, visual models and digital development.
The apology tool places descriptions of the same situation side by side. Readers can compare the wording before choosing a description, or indicate that they have not observed it or are unsure.
View larger image (English)El Gradiente
A project with Martha Alicia Tronco Rosas
El Gradiente
Understanding patterns of violence
64 patterns of harm
A guide in English and Spanish
I am developing El Gradiente with Dr Martha Alicia Tronco Rosas, bringing together her experience with Violentómetro 1 and 2.0 and my work on TEG-Blue and digital tools.
Our aim is to provide institutions, governments and companies with digital tools that help people understand patterns of violence and support work to prevent it.
About the project and collaborationMy contribution
I organise each pattern around a description, examples and further information. My contribution connects that content structure with the visual gradient and navigation through the guide.
Opening a pattern brings its description and everyday examples into one page. The gradient and links to the rest of the guide remain visible alongside the explanation.
View larger image (English)A language-school website
Independent demonstration · Fictional school
From choosing a course to seeing its cost
A language-school website needs to connect course choice, dates, duration and price. I designed and built an example in which those decisions sit in one booking flow.
Explore the school demonstrationHow the course choices determine the price
The course and number of weeks determine the base price. Accommodation and exam preparation vary with duration; materials are a one-off cost. The summary keeps those relationships visible as someone changes their choices.
My contribution covers the concept, content, visual design and interactive website. You can examine the course pages, timetable and price calculator. This is a portfolio demonstration, not a commissioned school website; its business details are fictional.
The summary separates costs that depend on the number of weeks from the one-off book pack. It updates as the course, duration or extras change. The school and its prices are fictional.
View larger image (English)Discuss a project of your own
You may need help with research, writing, visual design or development, or with bringing those parts of a project together. We can begin with the material you have and what you want people to understand or do.
See what you can commission →Explore my illustration work →