HER STORIES
of the Digital Design history Interaction and Communication Design (97130) WS 2022/23
Women
Benchmarks
01
Gal-dem
Short description & features
- represents women across al media challenging the status quo
- shares stories and perspectives that people can not find anywhere else
- tells people-focused stories that represent the diversity of the human experience and spotlights unheard voices
Pros
- diversity in the content (text, illustrations, photos, ...)
- organization of the information
- easily understandable contact form
Cons
- lack of a more personal interaction with the user
Interactions
- animated click on links
- not extremely interactive if not for the buttons and links to different sections of the website
Histography
Short description & features
It is an interactive timeline that spans across 14 billion years of history, from the Big Bang to 2015. The website draws historical events from Wikipedia ans self-updates daily with new recorded events.
Interactions
- allows the user to navigate between decades to million of years
- one can choose to watch a variety of events which have happened in a particular target period - time/field filter
Pros
- efficient accessibility to information
- good structure of the timeline
Cons
- would have been good to also add a search bar
Juliette van Rhyn
Short description & features
Personal website of Juliette van Rhyn, an awardwinning freelance illustrator and graphic designer based in London.
Interactions
- not very interactive if not for the buttons and links to different sections of the website
Pros
- well-paginated content (almost looks like an illustrated book)
- minimal menu bar but efficient
- good choice of the fonts
Cons
- few information about the creator of the website (the designer herself)
- sometimes not responsive
Barbie Careers
Short description & features
- top left: logo in pink
- top right: pink symbols as references to social media channels
- in between: toolbar, black bold sans-serif capital letters, sections separated by vertical pink bars
- underneath: thick pink bar including the headline „careers“ in bold, sans-serif capital letters
- body text: sans-serif, regular, right aligned
Pros
- the traditional corporate identity still remains
- good structure of the timeline recognisable
- no reinventation of the brand itself, only of the message behind
- strong contrast between pink, cursive writing in the logo and rational, technical sans-serif body text
Cons
- discontinuity in the body text
- pink as a gender-sterotypical colour which can be seen as too girly
Interactions
- when the toolbar area is touched by the cursor a small rectangular window with a list of specific subtopics pops up (the window contains a thinner, regular version of the font in the toolbar)
- pink rectangular underlinement (with less saturation) of a specific subtopic when touched by the cursor
- the structure of the content and hiding of details help to have a quick general overview of the content on the website and enables the user to find particular examples from specific years more quickly
Arvin Leeuwis
Short description & features
- presentation of art Pros
- clear technological image
- good representation of the personal style of the designer
- flowing art - relaxing and fun interface
- no vibrant colours
Cons
- typefaces are very personal but hard to read
Anne Frank Timeline
Short description & features
- vertical timeline with 34 items
- background: black and white photograph, zoom out movement
- timeline division by a thin centered line
- short description in bold letters, left-aligned
- two colors used to present the events on the timeline: red for Anne‘s private lif, blue for general political events
Interactions
- additional interactive tool to immediately/directly jump to other sections of the timeline
- movement of the cursor onto one image: appearance of a white triangle behind the image on the beige background
- click on the image: appearance of a subtimeline (more precise information about the event) & pop-up of a full-screen explanatory article
Pros
- great information hierarchy
- easy and efficient navigation
- dynamic compositions with diagonal lines
Cons
- possibility to get lost into details
- sometimes the differentiation could even be stronger
Day of the Girl
Short description & features
- horizontal bar in the shade of blue associated with UNICEF
- centered sans-serif headline with an italic, serif quotation as a subheadline
- next section: a call to action changes the background colour from white to grey
- photographs of small groups of girls interacting with each other or single girls
Interactions
- donate button on the right side (white rectangle)
- red text in capital letters, which draws attention onto itself (signal colour)
- integrated YouTube videos which can be played without leaving the website
- round, fixed, blue icon on the bottom right whose click leads to appearance of more symbols with references to other social media channels
Pros
- clarity, neutrality and purity
- formal and serious appearance
Cons
- typographic mistakes in the body text
- too stiff and formal
and Now
Then
- story of homeless shelters and charity
- clear communication - fun interface - minimal use of colours - link to official charity pages Cons - one can not scroll down the text
Short description & features
Pros
Proto-personas
02
Andrea Brühn
Background
Andrea Brühn, a computer science and telecommunications student, lives with her parents and older brother in Bolzano.
She is an active, curious girl who plays volleyball in her spare time and loves anime and cosplays. In the future she dreams of participating in Bake Off Italia.
Behaviour
While studying for the high school diploma and to obtain the driving licence, he is following some courses in various universities, including Bolzano, Vienna and Trento. With the support of her teachers she decides to participate in Ada Lovelace Days, but at the same time she is looking for resources to inspire her to better understand the STEM environment, which she perceives as hostile toward girls.
Necessities
- having role models in the field of digital design
- feeling to be represented
- knowing more about the contribution of women both in the past and in the present in her field of study
Difficulty
- deal with the „nerdy“ part of computer science, which she finds boring digital culture knowledge of the field frequency of use
her social media diet
Crazy Eights Canva
03
Concept creation Canva
04
clarifying appealing addictive structured calculative interactive representative branched
clarifying structured interactive
05 Information architecture
Walk in Andrea‘s shoes
research motivation
address doubts about the course of study
photos timelines illustrations work examples social media links
interactive quiz that suggests possible job opportunities information on possible job opportunities in the field of STEM or digital design
text images links tags videos contacts
role models
06 Wireframe
this was the very initial idea, that got modified while working on it, taking into consideration possible us
07 Design choices
iPhone iPad macBook
https://www.figma.com/proto/8Ya0p3FZubRnNpTHMgcGrS/ Website---iPhone?page-id=0%3A1&node-id=481%3A2037&viewport=278%2C59%2C0.03&scaling=scaledown&starting-point-node-id=481%3A2037
https://www.figma.com/proto/91Z34b9MamnYL531SeOXZS/ Webiste---iPad?page-id=0%3A1&node-id=2%3A635&view-
https://www.figma.com/proto/bFW8CuI3qg8FmmIib16ecB/Website---macBook?page-id=0%3A1&node-id=2%3A3358&viewport=147%2C472%2C0.02&scaling=scale-down&starting-point-nodeid=2%3A3358port=2487%2C263%2C0.
21&scaling=scale-down&starting-point-node-id=1%3A285