mattlippard

[mattlippard]

Responsiveness Design Demonstration Video

The PDF turn in on canvas may have some technical difficulties unless you download the file so this works instead.

[mattlippard]

Logo Ideation

[mattlippard]

Figma File

[mattlippard]

https://www.openweb.com/

Inspiration leading to a different take on the design system. I found this website design from Openweb that I think had quite a nice vibe to it. The offwhite background especially is much more calming than a pure white background. I put together this website layout combining the buttons we created in the previous concept and also added splashes of gradient colour for more emotion.

[mattlippard]

We saw this poster in class and were inspired by the colour choices. Lifeline’s original website had really generic, almost scientific colours which in our opinion translated to the website having a feeling that didn’t match the vibe needed for a mental health support site. 

Also included are early early concepts for what the website design could look like.

[mattlippard]

Important elements from G’s feedback that we took into account when starting the actual prototyping designs. We decided to also go with G’s recommendation of creating a text heavy website as opposed to the typical corporate stock images you get on mental health websites.

[mattlippard]

Results from in class ideate session.

[mattlippard]

POV/HMW Questions

[mattlippard]

After choosing Lifeline as the NGO to redesign. We analysed the user research we had and also pinpointed some insights. Information architecture of the existing website to the right as well.

[mattlippard]

User Research

We haven’t chosen our NGO yet that we want to redesign. On miro, Jonti and I both found two NGO sites each to have one of our friends go through and critique. Hopefully from this we can see which one presents the most opportunities to redesign and improve, as well as we can learn what features are good user experience and what features aren’t.

[mattlippard]

Asset Library

Icon credit to thenounproject.com

[mattlippard]

Final Reflection - IFE System Project

These 7 weeks now went by extremely quickly. I struggled initially with re-integrating and adapting to the university lifestyle after taking a years break and just working. And further struggled when I realized that I had forgotten almost all of my prior Figma knowledge from not having worked on anything in that time. This hurdle did scare me and for the couple weeks after that, all I was able to work on was just going through my old work and trying to reverse engineer and re-understand how components worked together. I had some external set backs but I did reach a point by week 3 where I felt fully capable and comfortable again and that’s where I started doing the design work as opposed to the ideating and thinking work. By week 4, after playing around with design and finding something that stuck, I had produced a basic intro screen for the IFE with a few minor micro animations. Unfortunately I could only take out of my formative feedback the amount I put in, so there wasn’t understandably a whole lot to work from, but it was very valuable to draw inspiration from seeing what others had put together.

After the formative week, I started to make the biggest steps in my IFE work. I narrowed down after much deliberation, the design of the side toolbar, which I decided to go with instead of the stereotypical top and bottom toolbar that we see on the existing Air NZ IFE. The reasoning behind this was I drew inspiration from my initial mood board and research into existing UI’s and saw that the top and bottom toolbar wasn’t the most efficient nor visually pleasing way to design it anymore. These assorted artist models were just of different entertainment streams rather than an IFE specifically, but I found that treating the design of the IFE system as more of a large content organizer, created a more intuitive and efficient outcome. I found it important to frame the context of the space I was designing for and today, our screens on planes are better than ever before and there really shouldn’t be a reason why we need buttons that were designed to be 1/8 of the size of the screen just so that the touch registers properly.

On top of this thinking, I also kept in mind to modernize, incorporate more micro animations - as opposed to the existing Air NZ IFE which only has transition dissolve animations - and to solve the problem of needing to rely on things like the intercoms and in person communication from crew to passenger about things such as what choice you’d like to pick for your meal. This would definitely increase efficiency in getting the food to the passengers and make it easier on the crew, but also help those with social anxiety or those that would just prefer a more private A to B flight. Overall it streamlines a lot of the services provided and puts more power into the communicative capabilities of the IFE which makes sense to me as 95% of the time, it’s the main focal point for passengers on a flight.

Both of these ideologies above came together to create the end product which I can see helping to fulfill what I set out to do which was make the IFE system a more memorable part of the flight experience, and one that ties more to the airline brand and connotations of luxury, comfort and a once in a while rare premium experience that flying should have.

As a brief focused on the content choreography and micro animations, I’m happy with the user pathway that I envisioned. It showcases the notification system functionality as well as how it ties in to a pretty straightforward and understandable general design system and organization style of content. It would be an expected scenario for the user to run through the system in such a way and encounter a situation where they were in the middle of an entertainment source but an important and unavoidable action based questions was asked of them, i.e. the meal service, but also it could been something like “have you declared everything today?” and a redirect to a declaration help page, chat messages, toilet reservations and notification that it’s free, there’s a lot of potential use cases for example. 

With my micro animations, I enjoyed the style I had of having moving components but also the individual images moving between them, for example in the beginning with the touch to begin plane moving and later when the nope movie is selected and the horse separates from the movie poster. I also paid a lot of attention to making the system feel natural to the user by having buffer pages that simulated the loading in of assets, even though they weren’t necessary and the pages could load simultaneously and quickly, as well as when dragging there’s a bit of bounciness to it and buttons that change colour to mimic being pressed in. I enjoyed implementing this human centered design to cater to what the user would expect and give the proper feedback to them visually. Overall, once I got my general understanding of Figma back, it was quite easy to come up with the often just frame by frame logic behind how to create some of the movement and I think it added to the user experience a lot and sets my IFE apart from the existing Air NZ IFE that I based my research around and shows the difference micro animations can add up to have.

With regard to the all-round project and management of it. There were a lot of newfound obstacles and areas I lacked in that I’m going to need to correct for the next project. Mainly in attendance and in documenting my steps along the way rather than just going ahead too far in iterations, that I can no longer capture what I changed and the specific thought processes I had.

On to the next project :)

[mattlippard]

My final IFE demonstration video.

My content choreography and stream takes the user through this pathway and the included micro animations created are listed below:

Welcome Screen

- Touch to begin and greeting message micro animations

Home Screen -> With introduction of the notification system using a welcome message

- Top shuffling card with information, notification bell shake and alert, drag to min/max toolbar size micro animations

Watch Screen -> With meal service notification informing the user that they’ll need to pick a meal shortly but can still choose a bit later

- Initial transition in and layout of all the movies, vertical and horizontal scrolling of the content, notification

Click into Movie Content

- Enlarge and play GIF of movie trailer, play button animation to full screen

Play Movie Content -> Notification that time’s up and the user will need to pick meals now

- toolbars moving in and out, GIF playing, notification and redirect to meal service

Meal Service Screen

- swiping across the item cards, clicking arrow for more information, tick box for selecting specific option, finish selection button

Redirect back to Movie Content

- play button, toolbars move out

End

[mattlippard]

My final figma file layout with all of the frames and components.

A lot of my micro animations were done from the basis in mind that I learned earlier from the simple loading animation. It just included having frames with the same content as the previous, just switched up a little bit for example with some components being hidden to begin with or placed in a different spot and then smart animated in between to pull it together. 

[mattlippard]

The secret behind my touch to begin screen animation. I photoshopped the initial image into just the wing and the background and then played around with smart animate to create the final micro animation which I think conveys a sense of class and sets the vibe for the flight.

[mattlippard]

This was my formative hand in. It showcases especially the moving assets I had with the touch to begin button and greeting the user in different languages.

I’ve realised at this point that I’m super rusty with my Figma knowledge so I’ve been spending the past two weeks recouping that and learning how to use components and prototype and all that again to make microanimations. I’m on the fence right now about whether to change my “user’s gift” from a pop up and food order service at the scheduled meal time to what I’ve identified as a more relevant user issue of not knowing how to actually find their way around the IFE, so I’ll instead create a tutorial prompt system that can lead the user through how to use/find their way around the IFE for the first time quickly.

I’ve got the micro-animation techniques down now, but I just need to continue and flesh it out fully still while finalising the design style. Mainly, decide if I want a main menu that can drag out from the left of the screen like how I’ve done. Also, design a top and bottom bar of expected quick shortcut buttons and fill out the sections with content and micro animations when filtering through the content.

My content choreography plan at the moment is either:

> Welcome screen

> Main hub

> Quick scroll through all sections

> Movies section

> Play movie

> Pop up alert for meal Service

> Picking food items - confirmation screen

> Close back to movie

> End

OR

> Welcome screen

> Main hub

> Pop up, yes/no to tutorial on how to use

> Highlight key features and sections with a brief explanation

> User continues to use as normal

> Quick scroll through all sections

> Movies Section

> Play movie

> End

My formative feedback generally said that people liked the way the plane flew in but were unsure about the reasonings behind the small wind and A to B location microanimation. I agree and I'll be changing them. I think sometimes less is more and when I created them I was just building up my skillset again and not entirely focused on ensuring there isn’t visual spam for the user.

[mattlippard]

Further developments in design.

I learnt how to create my first main microanimations - the touch to begin button and the switching languages hello message- from reverse engineering this loading wheel animation that I found on figma community files.