#uxschool

[meghanhalpin]

Slide Deck deets and Deliverables

General contents of slide deck and deliverables reminder.

More in depth break down of slides and narrative.

[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]

A prototype made with Adobe XD

UX School - Pivot Mobile App Prototype Link

[calumdixon]

Pivot-UX-School

A prototype made with Adobe XD

UX School - Desktop Prototype Link

[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 - Minor Tweaks to Desktop App

I went back to my design to make some minor tweaks here and there because i wasn’t happy with the overall quality of the design just yet. The first thing I changed was the buttons, I felt that their scale needed to be slightly larger to give the text they held more breathing room, before it was really tight which made reading the text harder and also made it more unpleasant on the eyes.

The second thing I changed was the drop shadows on certain elements such as my resume last session tab at the top of the desktop screen. I made the drop shadows underneath the nav bar smaller so that I can add depth to the design which made the layering of different elements more apparent. 

The third thing I went back and changed was the corner radius setting of different elements, in most cases I felt that I was too heavy handed with this effect and that by lowering the corner radius it made the design of each card look much more pleasant.

[calumdixon]

UX School - Pivot Mobile App - Screen Intro Animations

I thought it would also be a good idea to show off how some pages are introduced when the user enters the page. The style I chose to user was similar to what you can find on the desktop, I chose to translate the content upward to make it feel like it was being brought forward to the user, similarly to how modals are brought up or down depending on whether they are entering or leaving the viewport.