#uxschoolresearch

[calumdixon]

UX School - Empathy Mapping

Further building on the my user personas I created a set of empathy maps for each of my personas. These help me build a better understanding of the users of the site by thinking about how they feel, think and act. User personas are great because they give you an understanding of who the user is but they should be further built upon to using these empathy maps so that it is easier to understand how the characteristics mentioned in your persona will translate into actions.

[calumdixon]

UX School - Master Apprentice - Citadela App

The next post I found to create a master apprentice from was a dribbble post by an interaction designer at google named Vilem Ries. The original post shows a carousel of cards that when tap on expand into a fullscreen image. From this fullscreen image the user can drag down to reveal an article, clicking on the images in the article will also move into a fullscreen display that gives some extra information on the image.

To create this post I set up an auto-animate trigger between a screen with the location card not expanded and a second in its expanded form. To create the effect from the downward drag leading to the article content I created a invisible layer that would have a drag trigger applied to it. this would use auto-animate and lead to an art board with the article content. The reason I chose to use an invisible layer is because it meant I could use a drag trigger without moving any of the on screen content. Lastly to create the expanding image effect I used three art boards. The first was the original article content screen. This screen would have a tap trigger applied to leading to a second art board showing the image in its expanded state. Then a time trigger would start leading to a new art board where the same content would be displayed by the new art board would be shrunk to the to the viewport height so that the art board could no longer scroll. The reason for the two art boards for this effect is because using only a single transition results in the image moving upwards and the viewport position suddenly changing because the image being clicked on is under the fold.

Original post  

[calumdixon]

UX School - Master Apprentice - Travel App 1

While looking for more posts to use as inspiration for a Master Apprentice I found two posts by Dennis Kramer. The screens showed how a mobile carousel worked and also showed thumbnail images on the screen expanding into fullscreen displays when tapped on. 

I thought this would be a great piece to try and create my own version of because I knew that this screen was going to make use of some tools I hadn’t used before like the drag trigger.

To set up the carousel I used auto-animate with a drag trigger applied to each image that was poking out from the side of the screen, these let to a new art board where the half visible image was now in the centre of the screen. The expanding images were created by creating a second art board which had my image mask and image expanded to the fullscreen size. This then was attached to time trigger to automatically lead to a third art board which had the new text change from 0 % to 100% opacity. I used separate art boards to make sure the text didn’t come into view before the image had finished expanding.

Original Posts that Inspired this

Post 1

Post 2

[calumdixon]

UX School - Adobe XD Master Apprentice 

The second master apprentice I decided to do was create my own version of a number counter created by Howard Pinksy. Unlike Pinsky I didn’t want a sharp cut off as the numbers/letters left the focus point, to resolve this I used a gradients on either end of the numbers/letters to give a fading appearance as they move away. To achieve the moving effect I wanted I used a series of translations in a second artboard to move the grouped letter and number columns I created.

[calumdixon]

UX School - Master Apprentice - Record Player Music App

While trying to learn Adobe XD I decided to go onto Dribbble and recreate some of the animations I saw there. The first one I picked out was created by Adobe and showcased a record spinning in a music app. I created my own rendition of the design, In this design i used auto-animate to create the an effect of an image shrinking and becoming a circle, this would be the sticker in the center of the record. Afterwards I had a time trigger start the recording spinning, this time trigger would move onto another time triggered art board that would lead back to the previous art board creating an infinite loop for the record to play in.

Original Post my Master Apprentice is based on

[calumdixon]

IXD 303 & 304 Index

All UX School Project Blog Posts

UX School Research

Making of UX School Project 

UX School Sketches

Finished UX School Desktop Version

Finished UX School Mobile Version

All Heroes & Villains Project Blog Posts

Heroes & Villains Research

Making of Heroes & Villains Project

Heroes & Villains Sketches

Heroes & Villains XD Prototype Version 1 (5 Column)

Heroes & Villains XD Prototype Version 2 (6 Column)

Finished Heroes & Villains Website

[calumdixon]

UX School - Learning Adobe XD - Files for Chris

While I was relearning Adobe XD Chris asked me to help him create some designs for him in Adobe XD, these included a range of toggle sliders in various different detail levels, including Flat, and Flat+Shadows and Skeuomorphic as well as a recreation of a old IOS setting screen which made use of skeuomorphic design.

I think the skeuomorphic designs were really interesting to work because there is lot of thought that goes behind small details, take the toggle slider for example there is a incredible amount of detail that works towards making it easier to understand the purpose of the toggle slider, unlike the flat design which is essentially two different elements.

[calumdixon]

Adobe XD Daily Creative Challenge Welcome + Day 1!

Join your host Howard Pinsky every morning at 8:30am PT. He’ll show you how to approach each challenge using Adobe XD. Complete 9 challenges before February ...

UX School - Refreshing my Adobe XD Knowledge 

Since I was going to need to create micro-interactions for my UX School project I knew that I needed a better graspe of Adobe XD. To start I followed along with a few of the Adobe XD challenge videos like the one above. The small experiments in these challenges were incredibly helpful with my picking Adobe XD up again after a long break I had from using the software. Just by watching you can quickly pick up on what exactly needs to be done to create any animation you like.