Category: Uncategorized

Design tweaks for improved usability

Apparently minor design tweaks such as carefully chosen colors and design patterns can have a high impact on the usability of a product. A part of my work at MicroStrategy involves identifying such issues and proposing low cost – high impact solutions.

Drag and drop of visualizations

MicroStrategy analytics lets users create a dashboard with multiple visualizations. User can drag and drop these visualization within the dashbaord to rearrange or organize it.

My job was to come up with a low cost – high impact work to improve the usability of drag and drop of visualizations.

 

My first step was just identifying problems with the current interaction design, through a mixture of user testing and heuristic evaluation based on design principles.

Findings

  1. Mis-indication that a viz will move even when it remains in place
  2. Sub-optimal visual design – colors, placement of lines, etc.
  3. Other minor bugs based on user-testing

These are some of the designs I proposed to fix these issues:

Design proposal 1: Clearer indication that a visualization will stay in place

Drag and drop light in-place

Design proposal 2a: Color and design of the visual indicators for light background

Drag and drop light blue

Design proposal 2b: Color and design of the visual indicators for dark background
Alternating black-yellow-black for optimal contrast and visibility.

Drag and drop dark yellow

 

Wedding website – an interactive story

I got married last December. My husband and I are a pretty geeky couple – writing poems for Pi day, sending Google maps with our favorite places tagged as a Valentine’s Day gift. Having a wedding website thus seemed a no-brainer. The problem was, everything we saw – website templates, friends’ sites – they all seemed super cheesy and filled with mostly photos of the couple. Not bad, but not necessarily what we wanted.

We both felt that our wedding website, in addition to being informative, should also be fun for our friends.

Looking around for inspiration, I came across a wedding infographic from visual.ly and thought – how cool would it be to create an interactive infographic of our story!

Inspiration

Being a UX girl, I immediately started listing out the website’s goals and requirements, and do some user research! As I brainstormed with the other stakeholder (my husband!), we tried to answer:

  • What did we want people to take-away from the infographic?
  • What is the most important aspect or thread tying our story together?
  • How much time do people even spend reading such stuff?
  • How do we design this for close friends as well as casual acquaintances?

Some of the answers popped up right away – long distance was probably what defined our relationship until now (it was all 6 years of long distance!).
We wanted people who knew our story to get a few laughs from re-reading it, and those who didn’t to get a fun big-picture overview.

User Research

To answer the other questions, I talked to a bunch of friends and family, asking them to walk me through some of their favorite wedding websites. I realized there were going to be 4 broad categories of people who looked at our website:

 

Sketching – and more sketching!

Getting down to the most fun part now began – quickly sketching out wild and not-so-wild ideas!

Having a better idea of the audience and the content, I started sketching. The main theme was long distance

Initial sketches

At this point in the sketching process, my other self – the developer self – intervened.

Design-developThe “designer me” had all of these ideas of how the website should work, but the “developer me” had comparatively lesser web development experience and not a lot of time. The compromise was a “can-abort-at-any-stage” method. I focused on getting the basics up and working, and iterated over the design-develop-feedback process.

    I finalized the simple infographic (sketch #2 from above). My goals were stepwise:

  1. Create a simple static timeline with a few events
  2. Add more stories on the timeline itself
  3. Make individual elements within the timeline interactive
  4. Spend more time on the design details – scatter plot and each of the stories
  5. Make the individual elements animated for playfulness and pre-attentive focusing

Refined Sketches

Final Sketches

A few hiccups and lots of learning later, this is what the wedding website looked like.
Given a little more time I would have added some photos and tried to make it as mobile-friendly as possible. Not sure what would be the best way to do that – given that the current visualization is all on a canvas element. Any feedback would be appreciated!

Overall though, I was quite pleased with the outcome given the time-frame. My favorite parts of the infographic are:
– The reference to Friends, each story on the infographic being titled “The one with.. ”
– The twinkling stars on the wedding proposal image
– The idea of him literally “dropping in” on me using a parachute

proj-wedding2

Storytelling – an introduction to this blog

rac·on·teur

/ˌrakˌänˈtər,-ən-/

noun
1. a person who tells anecdotes in a skillful and amusing way.

 

Some of my diverse interests include data visualization, learn and play methodologies, and videochat. What excites me the most, though, is the intersection of each of these with the powerful construct of storytelling. Storytelling was always integral to the human learning experience – we naturally seek to organize information in patterns and causations.

“It has been said that next to hunger and thirst, our most basic human need is for storytelling.” -Khalil Gibran

In this blog I seek to discover, curate and create great storytelling experiences and interesting methodologies.