2016: A year full of UX Learning

How are you sure you’re telling a great story? You create characters with resolve, and design a plot that takes the best journeys to reach their purpose.

You choose the best words, follow simple principles of story telling, and most of all, believe in what you are writing. You need great sentence structure, aided with gripping and endearing grammar, and powerful yet subtle dialogue.

Creating those enjoyable sentences, and those exciting chapters of your story is typically what UX Design is like:

Staying true to what is right for the cause of the user, while keeping the product simple, true to heart, powerful, and beautiful, all at the same time.

Well. sometimes you also need to design Cover Pages! (Pic from Enroot 2.0)

UX Design for web/mobile is liberating, to be honest. I compare it to writing a book, because :

1. You create a few characters

UI elements and content

UI Detailing for Bucketlist

2. You define the plot

Interactions, flows and UX

UX Workflow I designed for Microsoft Bing Rewards

3. You want people to read it

Score high on usability

The Cricket Cards App I’m currently working on

4. You might even revise and re-publish if you want to!

Test and update

The emotions that I believe are absolutely necessary to be experienced when you read a book, or use a digital product:

1. Delight, Happiness, Joy
2. Connection, Satisfaction, Motivation
3. Ease of: Interpreting, Understanding, Using
4. Positivity, Memorability, Nostalgia

Treasure in 2016 = Learning

Over the past few months, my major learnings came through reading a lot of design books (Change by Design by Tim Brown, Interaction with Color by Josef Albers), articles on Medium (uxplanet, uxdesign.cc), and by experimenting on a random set of self-initiated projects. The aims were simple:

1. To grow as a visual designer
2. To learn new tools, systems and processes
3. To have a damn good time!

I learnt one great lesson while working at Microsoft as a UXD; an important personality drive that we need to have as designers:

Experiment, Fail, Learn, Discover.

Most good designers are talented in a way that they have a sneaky sense of intuition. Sometimes, the right answer seems downright obvious, but the more times I try, the more I learn, and the better answers I find.

Another way to keep myself energised is by picking up the latest tools. You are lucky if you are a designer — new tools are being made everyday to make your life easier.

These are some of the things I’m doing to constantly learn and grow:

1. Moving to Sketch and exploring VR

Sketch is specifically useful for designers who want to create quick mockups and focus on UIs and workflows. Everyone at Studio 91 in Microsoft moved to Sketch (soon after I left though!)

In the last few months, I spent time revisiting Enroot, a startup we had co-founded when we were in college. Our divergent paths after the placement season meant Enroot would hit a roadblock, and I thought it made sense to reinvent for the gaps that we had found in our ideas.

My messy artboard: The final experience was all but of 5 screens. Don’t judge!

The importance of multiple explorations

Good UI Design revels in a simple formula: the more you do, the better you get. I’ve learnt so much by following this one rule (again, a learning from Microsoft). Exploring multiple options helps you think with an open frame of mind, and doesn’t get limited by first-attempt bias.

Letting go of the Design Ego Demon is crucial for early-stage designers like me.

There is nothing lost in trying, and it is a serendipitous realisation when the last idea you discarded teaches you or inspires you towards the exact solution you needed to make it work or look better.

Also, another thing about the way I work is that I absolutely find no sense in making low fidelity wireframes. I believe that sketches on paper (or a brilliant idea in the head) should instantly see visual translation in high fidelity. Only then will you know the worth of your idea take shape in UI — this is because the layer of visual design brings with it, several factors that might affect/improve usability.

Multiple failures — but going through this helps me find the right answer

My productivity has gone up several notches for sure (compared to working on snuffy old Adobe Fireworks), and I’m more excited than ever to learn new ways to design and prototype. I’ve also been learning designing experiences for VR, and it is helping unearth a whole lot of possibilities.

2. Using Principle to create prototypes and animations

I’ve often felt a restriction in terms of my skills in AfterEffects, but motion design and prototyping are such crucial skills for UX Designers — and Principle thankfully helps in making this job simple. Additionally, Flinto and Framer.js are amazing tools — I feel it is important to choose the tool that we personally find relevant and enjoyable.

Using Principle, I can Mirror a Prototype that can run on my phone, or create a GIF like this:

The Principle Prototype I made for Enroot 2.0

Read more about this project here:

Enroot for VR

Also, if you’re into designing experiences for mobile and VR (like I am), you can use this Sketch Plugin to create basic mockups, and test them using your phone and headset:

auxdesigner/Sketch-to-VR

I am an extremely emotional person, with strong connections to people and places (probably the reason I worked on Enroot!), and a much stronger affection for films and sport (especially cricket, as you will see..). I found that the best way to learn is by experimenting on themes that are personally most exciting. This added a great layer of motivation to my learning experience.

Using childhood memories to come up with UI metaphors!

The Cricket Cards App I’m currently working on

Btw, an amazingly simple tutorial if you’re keen on learning Principle: (Thanks to Aayush Jain (DoD ’15) for introducing me to this)

The Designer’s Guide to Prototyping in Principle

UI Design Principles

The user interface is the medium and the means for creating our experiences: good UIs help products rate high on both the visual and the usability aspect.

Learning in UI and UX Design is continual — observing the tiniest of details and the micro-interactions even in Apps we use everyday goes a long way in understanding how to design better.

I’ve learnt and tried to follow a set of UI rules, especially with respect to the nuances of visual and interaction design:

1. De-Clutter

Organise information as neatly and concisely as possible. It is essential to keep it simple and visually balanced. Allow for deeper navigation to reveal more content. Help your user choose what he wants, than providing too much upfront. ‘Information peeks’ are great ways to help user find what they’re looking for.

Subtitled Menus, Cards and Information Peeks are all great ways to simplify large amounts of data

2. Go Minimal

Less is more, while designing for mobile. Look out if you can minimise use of visually-heavy elements. One interesting learning is the use of white spaces to act as content dividers. White space is a weapon: yield it and destroy the armies of cognitive load. Cards and thumbnails are another great visual tool to divide sets of information.

It’s not a coincidence the best music app out there is also the simplest one (both in visuals and interactions)

3. Teach and Tune

Specifying one way to get an action done is enough, most times. If you are having a ‘+’ on your image placeholder, saying ‘Add an image’ again creates a perception that redundancies might exist on the UI. But if you’re looking to teach the user a completely new interaction, you might want to strategise accordingly.

Notice how Instagram has specific instructions accompanying the icons. Snapchat’s users are familiar with these features, but Instagram needs to gradually ‘Teach and Tune’ people into getting familiar with their new experience.

4. Type is all-powerful

Using typography intelligently will help create better UIs. Observe most successful UIs keenly, and you’ll find the use of type, and how it creates a sense of emotional connect, elevates brand identity, and — believe it or not — improves usability. Check out usage of typography on image gradients in Snapchat and AirBnB (my UI love is overflowing!)

Type is emotional. Type is expressive. Type is beautiful. Type is loving. Use Type wisely!

5. Awareness and navigation in Flows

Keep the user clearly aware of ‘where he is’ in the app/experience. Provide breadcrumbs if necessary; make his task seem real and enjoyable, support navigation with relevant animation (motion contributes to UIs more than you can realise); ascertain confidence with visual information, and keep him involved through delight. (If you noticed, I just mentioned all the heuristic principles in a mobile-friendly way. B)

The ticket booking process on BMS feels like a breeze: Proves that following the Heuristic Principles is not a joke

6. Allow interactions to be the hero

There is absolutely no need to have more than you can fit ‘above the fold.’ Design interactions that are affordable enough to let the user browse through more content. Basic ones like simple vertical scroll, or carousel-scroll are great interactions, support them with great visual structure. But be smart about it — interactions need to support your hierarchy of information, while giving an affordable and relevant browsing experience.

Carousels, Vertical Scroll, Button Interactions, Tab Scrolls — Medium employs all of these to create (in my opinion), possibly the most effective and beautiful experience on the web.

In addition to these little journeys I’m taking towards becoming a better designer, I’ve had the opportunity of teaching UX Design and Processes to students of the ImaginXP UX Jumpstarter Course for over 3 months. This was an amazing learning experience, and sharing my little boxes of learning made me a very happy person. Thanks to Avinandan (DoD ’15) for getting me to ‘learn’ how to teach.

You can find my work here:

Gautham Krishna’s Portfolio

Thanks for reading this. Do share some love and your feedback. :)