and sometimes other stuff
orankl_3D_UX.jpg

Orankl UX redesign

User experience and user interface redesign of Orankl website, corporate identity, review widget, email marketing templates, backend console and everything else. YCombinator project.

This is the YCombinator project I did back in Silicon Valley. We got pretty good feedback on it, so please read on if you want to see my UX thinking and decisions I make.

This is beautiful. I am not concerned about you guys in terms of design
— Garry Tan, designer & partner at YCombinator

The company called Orankl approached me and asked me basically to redesign everything.

1. Redesigning the backend

Initial stage was about redesigning the backend console. Orankl is a plug-and-play review solution for small & medium merchants, that should bring them amazon-grade tools at fraction of their development costs. The backend is used by merchants to manage reviews, respond to customers, etc.

At the beginning there was this...

I was told I can change anything I want, just need to keep all the features and keep them in the same place.

As you can see the above was pretty much unusable, so I started from scratch.

This is the first draft I delivered:

orankl_backend.png

I dare to say that was a huge leap already. I explained my UX decisions as follows (copy-paste from the email to client):

the review itself

  • the review text is probably the most important => I put it the biggest and in the middle, and continued building everything else around it
  • cannot make it much wider, because the ideal legible width is something between 60-90 characters per line
  • showing reviewer’s email address might be a good indication of spam (weird/fake addresses, while name is OK-ish)
  • highlighting swear words to avoid accepting without noticing them
  • read more (X lines) - number of lines (needs to be recalculated on responsive designs) is much better indication that e.g. 2300 words which is difficult to imagine

product info

  • merchant probably has idea of his products => small picture is good enough guidance for him
  • merchant might be interested in avg. rating so that he can see if the current one is higher or lower
  • star rating (3 of 5) is maybe clearer than the smileys. with the smileys it’s not immediately obvious a) how many of them there are and b) which rating the particular one represents
  • I put a big number along with stars, so it’s easier to catch e.g. very bad reviews and study them in detail
  • also a small arrow shows whether the actual rating is higher or lower than average. maybe we cold also stress if it’s much lower or much higher with double arrow or something.
  • the precise value of avg. rating and number of reviews are also useful for merchant to “judge” the review

actions

  • for the pending reviews I wanted two big YES/NO buttons on the side, so that the merchant can quickly process many new reviews
  • on approved reviews I put a small (to avoid accidental clicks) delete icon in the top right (usual position for close/delete/etc.)
  • I moved the private conversation button closer to the user info, as it is related.

around reviews

  • the reviews are bright white and very prominent, everything around them is a bit toned down, so that it doesn’t take away attention
  • all is a bit in iOS7 style, which is and obvious trend also on web design, will make it easier to have visually similar iPad version of the app, etc.
  • I actually really like how you had solved the filters. I made it almost the same way. as you can see, now you can very clearly see in bright green, that you are looking at REVIEWS - ALL - BY DATE - DESCENDING. The visual guidance here is very quick, clear, straightforward. love it!
  • tabs - I tried them at the top as well, but left is probably better. most people use notebooks anyway, which have lots of space on the sides (wide displays) but not that much at the top (browser chrome, bars, etc.).
  • logo - I used a temporary quick & dirty logo. the one you have now is completely unusable, sorry :D
  • I tried green tones instead of blue. Just because :-) And also green is a warm, soothing color, dirty design tricks.

 

2. Logo & corporate identity

Obviously we needed to take one step back, design a logo and set up some common style for all the output.

From the usability perspective, it was important that the logo is well legible and still memorable in very small sizes – it was supposed to be incorporated into the widget that merchants integrate into their e-stores, therefore it had the be "almost invisible" yet recognizable. I decided to go for good typographic logo with just a tiny recognizable detail.

There was strong preference for blue-ish colors, even though I wanted to push the orange logo to make the name more memorable :-)

 

3. Widget for merchants

This was  the difficult one, because all kinds of merchants implement it into their stores, and obviously they don't want it to 
1) clash with their current design (most common reason for uninstalls prior to the redesign),
2) they didn't want to see the Orankl logo,
3) they wanted to customize the appearance

This is the original widget before the redesign:

 

My thoughts and aims for the redesign were the following:

  • The design should be universal enough, so that it works "out of the box" for majority of the merchants, even those with wild color schemes (boy, you wouldn't believe!) – I strongly believed that when they say "we want to be able to customize", they just want it to fit in their store - the less they have to tinker with it, the happier they will be. Therefore I came up with simple grayscale design with transparency, that works like charm with pretty much any color scheme. We just made an inverse (white) variant for dark backgrounds.
  • It would be best to have the widget recognizable even without the logo (some clients did insist the logo be removed completely) – I came up with the idea of putting the star rating into a subtle "badge" shape. That way it wouldn't really clash with anything, nobody could accuse us of pushing our branding, yet it would be recognizable at very first sight.

Here's the result:

We made the widget responsive and detected (or allowed to set) just one main color. Like this:

 

4. Website

We needed to start from scratch also with the website, of course. This was an exercise on how to communicate clearly what the company does. I came up with the tagline "Amazon-grade tools for the rest of the web" and the following draft design.

I strongly believe that design should be self explanatory (because with random website visitor you don't have the privilege to explain anything, and any walkthrough tutorials suck). Therefore I will leave it up to you to decide yourself whether you understand what Orankl is about:

 

5. Email marketing

This was actually a very important part – emails were the main source of reviews (like 95% really). Customers got a reminder to leave a review some 2 weeks upon purchase, and the email was crucial to convince them to do it.

Here is my thinking behind the design

  • Again neutral overall design, so that it fits various merchants. We can also use their shops' backgrounds if needed (sometimes nice illustrated stuff)
  • Super-brief and super clear start of the email
  • Calling the user with their name, so that they know it's not a random mass email.
  • Showing a small picture of the product they purchased, so they immediately know it is relevant to them.
  • Asking them straightforward question, with a hint of emotion and interest (no blatant boring "please leave a review"). How's your new Leica??
  • Showing the stars to let you "respond" immediately – this is interesting part, because you just cannot make star rating in email. So clicking on the stars will take you to a "review landing web page"
  • If you we still not convinced, we try slightly different line of questioning, asking people to "give advice". People feel important and useful, when they are asked for advice…
  • Then there's the merchant custom message – they just want to have it there
  • If the product is awesome, why not recommend it to your Facebook/Twitter/Pinterest friends?
  • And of course suggestion of other relevant products, maybe showing some promotions, etc.

These are just a few snippets of all the work done over some 6 intense weeks of work. Obviously the website has many more pages, there's the updated backend console, the review landing page, the iphone & ipad versions of the review widgets and dialogs, etc. etc.

I might expand this post later, but it's already a lot of information to give you an idea how I think.

Thanks for reading this far! :-)

To see some more thoughts on mobile apps UX, you might want to check my proposal How to fix Facebook app UX.