Live chat icon prototype
       
     
       
     
       
     
       
     
       
     
       
     
Live chat icon prototype
       
     
Live chat icon prototype

We wanted to create something with a bit of personality. The thought of a stock image profile picture of someone who quite obviously would not be the person on the other end of the chat was unappealing and I think a turn off from a UX perspective.

I played with the ellipsis three dot icon which seems to be an almost universal symbol for live chat, I liked the idea of a robotic face but didn’t want to go too literal so I kept it stylised and simple. The rectangle of the speech bubble becomes the robot’s head and the three dot-dot-dot morphs into its eyes and mouth. Its little face blinks and looks at the interaction encouragingly. There’s a wink on closing. Top animation is without a click event indicator.

       
     
Visual Design - interaction design animation

Complex interactions, where more content needs to be conveyed than the real estate normally allows or where possibly something has to be visualised that brings together multiple streams of information can be mocked up into a low fidelity to high fidelity prototype before development. Here user interaction and UI caters for users to explore different kinds of systems whilst allowing them to switch between a summary of the machine versus real world applications and related industries.

       
     
Interaction design - Webpage becomes navigation

The concept here is to transform the home page (above the fold) into a more direct user navigation itself. This gives the user a very visual and direct experience and attempts to remove cognitive load. Cognitive ease, from my point of view, is a very important checkbox to tick when designing a UI. If the user chooses to embark on this visual navigation the Navbar adjusts and the equivalent links for the two options disappear since they’re no longer needed. The concept still was to morph focus from a very product heavy company focus to a more user-centric message. This is intermediary step was needed as we iterate forward.

       
     
Auto-animate - UI and interaction
       
     
Visual design - interaction alternative

A reiteration of the Urban Waves visual design. In this version users interact with the content differently, by dragging left or right similar to a carousel but more towards the mobile experience of the site. clicking on the navbar allows for a visual navigation via symbols.

       
     
Lo-fi wireframe prototype of micro interactions

Three different explorations of possible interactions, UI/UX wireframe created in After Effects. Now that XD integrates with AfterEffects things are a lot easier - also with the new auto-animate function. This was created without auto animate.