Week 08: David Henderson Guest Lecture

David Henderson from the local agency DHD came in this week for a guest lecture.

Home - We Are DHD

He started by playing a short video explaining what his company does and it ranges from videography/photography to app design and development.

In his lecture David will be talking about Storytelling.

He starts off with talking about the psychology of storytelling. He explains that the reason a lot of people can fall in love with brands and that is because that brand can communicate who they are and their values in an effective way. Henderson then brings up a quote from Justice William O’Douglas. “90% of our decisions are made on an emotional basis…” This means that when we are designing. brand our project it is very important to connect with people on that emotional level as they will be more likely to commit to your brand in different ways. An example David for this was John Lewis the Department store. They have crafted such a strong identity and story to their brand, that everyone looks forward to their advertisements at Christmas. He showed a clip of one of their adverts and at the end, under their brand name is a call to action but not to go to their website or to shop, it is a hashtag of the story in the advert. This is a really effective way of connecting with people and creating those emotional responses.

David Henderson then shows a diagram of how storytelling can affect the brain. The chemical, dopamine is released into our system after an emotionally charged event which helps us remember it in greater accuracy. This means that when you connect through people, through any emotion, they will remember you with greater accuracy than anyone else. Henderson then finishes this section of the psychology of storytelling with another quote, “Storytelling is a method of Delivering highly retainable information through immersion..” by Jag Bhalla.

I thought this short section was very informative and it really brought it into perspective how important storytelling is but also how much we use storytelling in our lives. I think the fact about the dopamine release allowing us to remember things with greater accuracy really resonated with me. I remember so many parts of films and comedy routines and I had never realised why I was able to remember these things better than other stories or shows. It simplified things for me in a way that I think will make it easier to implement into my future products.

Storytelling in brand identity, Case study: Ezri. 

EZRI Logo by Daniel Young on DribbbleDHD’s process: make concepts for brand. Then taking the concept talk about why they made certain design decisions then showing how that concept comes to life in terms of business cards and merchandise. Logo looks like a zipper which represents the company and also double as the initials of the company name. This means they have used the logo as a way of reflecting their identity and bringing these logo concepts into real life with mock ups of business cars and merchandise tells a story and creates brand awareness.

Storytelling in Film, Case Study 2: The Silent Valley.

The Silent Valley Story (AR) - Apps on Google Play

Ar technology and DHD oversaw this project along with a company in the US. This was a project about the Silent Valley were users could scan a qr code the app would open up and an actor from 1920’s would show up in AR talking about how the Silent Valley was constructed.

DHD created a promo film for the project The film has lots of lovely landscape shots to give context of what this story is about. They also show some close ups of what the sign looks like that the user would scan and what would show up on their phone. It doesn’t focus on just these details though it shows the whole experience of the Silent Valley walk, telling a story. This film finishes on a call to action to ‘Step back in time and experience, the Silent Valley story’. This further emphasises the idea that this is something to experience not to buy or have, this has more emotional appeal.

Storytelling in UI/UX, Case study: HalfStack

HalfStack London on the Thames 2022 | LondonHalfStack is javascript tech conference, conference in London every year, with a possibility of a conference in Belfast. This conference creates a community of developers. David Henderson brings us through how they created a story with HalfStack’s website homepage. The user would start at the launch section with an intro line of text about what halfstack is and who it is for. This is accompanied with an explanatory image of a man speaking at an event and a call to action to buy tickets. Then as the user scrolls down they are greeted with more info and context about the company, this is where they are given another call to action to buy tickets. If the user keeps scrolling that means they want to know even more and are interested. Therefore David’s design team added in the speakers at these events along with photos of them to show the user is apart of this community. Then the user is given even more detail about the conferences and times of speakers. To give the users that are interested even more information the next section gives a call to action to view past events. After this, the user is shown the main call to action to buy their tickets and are shown ticket prices.

In conclusion I have learned that all types of things can tell a story from images and text to animations and video. I have realised that there are subtle pieces of storytelling in all UX design as it focuses on the user’s journey which in turn tells a story. The main focus of storytelling however, should be to tell the user what they want and need to hear as well as connecting with them so they don’t forget the experience your product gave them.


Narrative Website update

This week I started the building of my website using the content from my prototype and the layouts I sketched last week.

This is what the launch page of my website looks like so far. I’ve incorporated my new button design with the straight corners. I think the button is maybe too big, I’m not sure if there is enough type hierarchy there, however, my laptop screen is a little bit small so it might look better on a bigger screen. I’m going to test out what I’ve done so far for its responsiveness on bigger screens using the computers in class.

This is what the beginning of my website looks like. The layout i pretty much exactly the same as the layout in my prototype. However my image has more of a purple tint in the prototype. In my xd prototype the image had the blending layer option, ‘luminosity’, this doesn’t work on webflow so I think this will have to be edited individually. Currently the text used here is static but on my prototype there is a separate vertical scroll that creates the effect that only that paragraph of text will move. This is something I will need to work on and figure out how to recreate here but this week I was just trying to put all the content on the website and work from there.

The next section of my website is this big fullscreen image of a map showing where the Kennedy Space Center is. This image has also been edited to have a purple tint so that it integrates into the colour scheme effectively. This is exactly what it looks like in my prototype, some things to fix here would maybe be to make the text underneath it look a bit more  visually interesting.

The section directly under the map is a blockquote showing a phrase Neil Armstrong reportedly said. I’ve worked hard to give it a sense of type hierarchy and when I add in a ‘fade in on scroll’ interaction I think this could look very appealing. However I think the hierarchy needs to be worked with a bit more as I feel it is not completely effective.

The next section is about the landing of the Saturn V and the images shown in this section are of the colombia and Michael Collins practicing docking hatch removal from the Command Module.

At the moment I have changed the layout from the prototype to have these photos be full-screen images as I feel it has a greater impact. In the prototype these images can be horizontally scrolled and this is something I will work on creating next week.

In this next section I got pretty lucky because in my prototype I designed this section to work as a slider that the user can click through for each crew member. Webflow has an option to place a slider element into the web page so implementing the content from my prototype was very easy for this section.

There’s some stuff to work on here still, the images on my website and prototype need to be worked on add given more dimension. There is also some padding layout changes needed as well. The second slide’s layout for each crew member needs to be reversed and the titles for these are also off in terms of padding. This can be seen in the image above.

This week I have added in all the content for the first 2 sections of my website and next week I will work on the the Numbers and Silver Screen sections.

 

Leave a Reply

Your email address will not be published. Required fields are marked *