Hacker News is one of those sites that are open throughout the day on my machine. While it houses brilliant discussions and an amazing community, as a designer, the design of the site did not feel right to me. It was a pain to read through comments and I always had to hunch forward to be able to read through the micro sized type.

I ended up creating a stylesheet that brought beautiful typography to Hacker News. Meet Georgify: a Chrome extension which has now been ported to Stylish with Userstyles.org as well. Georgify is an alternate CSS for Hacker News with a focus on typography and readability. It uses Georgia as the typeface and some typographic sugar like limting line span to 50-60 characters and sufficient whitespace to improve legibility. Give it a try and you will be pleasantly surprised.

Flavors

• Chrome Extension
• Userstyles.org/Stylish

Original HN Post

The task for redesigning the list feature on Yelp was part of the design task that Yelp had given me to assess my skills. In this post I go into the detail of the process and also share the end results with you, hoping that you enjoy and learn from it but more importantly give feedback as to how it could have been improved.

Information Architecture

The first step was trying to understand the features, navigation and userflows on Yelp. A precursor to this step was understanding the underlying information flow/architecture on Yelp. I made mindmaps of the associations of features and also of the navigation of the Yelp site.

Navigation @ Yelp

The existing navigation at Yelp breaks many UI and IA conventions. Features like Mail which are aimed at User to User conversations are placed in the Primary Navigation as are promotional links like Invite Friends which need to be placed within the pages and NOT in the Primary Navigation. Also from my understanding not every page needs to have the full fledged search dashboard. The users whose prime need is to search would have done the same on the homepage (which should ideally consist of a full fledged search), however the internal pages can save screen space without compromising severly on the user experience by fetching the current location of the user (using profile info, IP or Geo-location) and allow search using that for internal pages. Of course with the first search the user will land on the search page which again has the full fledged search dashboard with What and Where forms. Attached Information Tree gives a better and coherent navigation structure.

Features @ Yelp

Places/Businesses are at the heart of all the features on Yelp. These Places are closely connected to Reviews in the Yelp world which are written by a loyal part of the community. To improve the utility, usability and accessibility of the List feature on Yelp, they need to be integrated with Reviews. I proposed to allow users to not just to make Lists as a separate process (as it is currently) but also while occasionally scanning the Reviews written by them. This is captured along with the correlation of features as below.

A SWOT Analysis

Being an Analyst, I seldom can ignore the SWOT Analysis of any existing design. I did the same for Yelp with a focus on the List Feature.

Strength

• Will be used by most loyal Yelpers
• Info about lots of places sharing a commonality
• Highly Opinionated and hence Personal

Weakness

• Poor visual hierarchy
• Too cluttered
• Cannot add reviews from the Review page
• Number of steps to create list can be reduced to one

Opportunity

• Venues should show up which list they feature in
• Repository of Lists (popular) from Main Navigation
• Public/Private Lists
• Icon/Badges assigned to lists based on categories or an algorithm that checks the relation between items on the list

Threat

• Trips feature from Gowalla (Not exactly same)

Who is the common user?

Due to the inherent nature of being created from one’s own reviews, the lists are highly likely to be created by active Yelpers in comparison to new users. These users are already familiar with the interface of Yelp and hence complexity can be introduced to aid a quicker process. This gives the Drag and Drop approach a very high advantage as compared to the Checkbox selection of items or adding reviews individually. 58% Yelpers lie in the age group 24-44. Another 20% in 44-54. Use of large and clear typography along with non cluttered minimal interface is hence suggested by the numbers.

While it is great to understand the common/average user, it is always best to see the needs of the extremes because if those are met, the averages will take care of themselves. The extreme users in Yelp could be either someone with very less reviews or someone with reviews in the range of 500s or 1000s. The design consideration in the first case is to make the interface intuitive while in the latter it is to aid the searching and finding of the appropriate reviews within those 1000 reviews. Both these issues have been dealt accordingly in the design as will be revealed later.

Issues with current design

This is how the Yelp List creation process (2 step) looks like as of now.

We do not really need it to be a two step process. Both the steps can be merged into one. Also since the user is a regular user of Yelp, it is not really important to give them ideas of what the list might contain.

Below is the List page where one can access all the lists written by them as in the current design.

As can be seen above, the side profile column has too much information. Do we really need all of this on each page? The “Create List” Button is not the primary focus on this page. Subdued by the colors surrounding it. Due to the placement of two lists in one row, there is a need for horizontal as well as vertical scanning. Might be better to use one List per row and improve the poor visual hierarchy of the page.

Wireframes

The wireframes shown below aim to solve most of the problems in the existing design. The profile info column has been shifted to right to allow focus on the primary content of the page. The alternate light and dark stripe in the list page allows easy scanning of lists. No more horizontal as well as vertical scanning to view lists. The above two step process has been reduced to a one step process.

Another feature added is the ability to create lists on the fly via contextual menu (as on Twitter). It allows users to add reviews to existing lists or create a new one. The new list creation is aided with a modal window which gives a feeling of getting things done without “leaving the page”.

Also as can be seen the header and footer have started taking a far more streamlined shape that allows users to not always be bothered by the big search dashboard but still keeps full fledged search within a click’s reach. Also the links pertaining to users accounts have been kept accessible via a single drop down.

Another choice was between using tabs or vertical side navigation for the various features accessible via user profile (tips, mail, reviews, lists, bookmarks etc.). However, due to high number of features I decided to go ahead with using conventional tabs to avoid usability issues arising on users with small screen who would need to scroll down to reach for links like events, bookmarks or compliments which would lie at the bottom.

Visual Design

The process of visual design was complementary to the process till now. As can be seen, the current Yelp design has a very Web 2.0, plastic feel. Somehow, it does not radiate warmth and openness that the community of Yelp is symbolic of. I decided to go with a more open visual aesthetics that show the warmth and openness. Since the process of writing a review is a very open process, the interface and interactions should supplement it and aid users to write better comprehensive reviews.

Other features include clear call outs, and large typography to aid the user base which is mostly in 30s and 40s. Also the forms have been made highly interactive to aid the process of creation of lists. The Your reviews part of the Create List page now features a search box that allows users to filter reviews based on keywords/categories besides the conventional Sort by options.

I would urge you to provide all kinds of feedback via twitter or email on the process and the design.

Folllowing my redesign of the Instagram interface where I tried to not only make it more appealing in terms of visual design and UI conventions, the kind folks at Burstn got in touch with me to see if I could do something similar for them.

We set out to just work out the user flows and also create a visual mockup of certain screens if time and budget permits. One of the essential ways in which Burstn positions itself away from Instagram is the rapid nature of photo sharing that it promises and supports. Sharing a photograph as quickly as possible was their primary aim. They were not building an app that allowed the users to share pretty pictures, they were more into sharing memories as they happen. My role was not only limited to a designer but also an advisor in terms of product strategist giving feedback and suggestions wherever necessary.

I started of with a very simple map of the flow of the user while taking a photograph and also ranking the processes based on what’s the most integral part of the app to the least important. This can be seen below.

This was followed by the creation of screen wireframes (on paper). Each screen’s observation and notes have been added alongside the screen. A later discussion of the screen for adding fliter was discarded since this was not their priority. The Geolocation wireframe was made to show the pictures of all the Burstn users around a place giving a tangible memory and sense of association to the place. This is what I believe the central purpose of geo-location. The screens can be seen below.

We then decided to create a few screens to show the possibility of the visual design and changes possible. I had complete freedom to play with the color scheme and was not bound to a blue color palette as in their current app design. The SX-70 Polaroid followed a central part of the inspiration. A major part of the reason being the fact that it could be shaped into a gorgeous icon if we were to go ahead with the design and also the very history of the product design that revolutionized instant photography was apt to be associated with an app that promises speedy capturing and sharing of memories.

The final screen design are as follows. They are screens for the Popular photograph section and the user profile screen. The big plus is the button to follow a user which when pressed would rotate to show a cross which indicates that you can un-follow them when you would want to. Hope the process shed some light of the thought process that went behind in designing the UI of the app. Also do go and check out Burstn in the App Store.

The i-Race posters were designed as part of dunnhumby’s internal fund raising event which was to take place at the same time in the UK, US and India. The aim was to have the same template in sync with the company branding and illustration guidelines which can be then be localized for each country. Rather than going the safe and old route of a running silhouette and the city skyline, I tried to make it informative for the user. The company specific colors surrounding the central track give a feeling of being pushed to the edge when the user views them.

Sketching wireframes

The story of how I thought of doing a redesign for Instagram is strange and coincidental. I had fallen in love with the app from day (leave aside the design for a moment). Everything right from using Foursquare API for geo-location to limiting the pixels and square shape of the images, spoke that the product has been well thought of. I had initially planned to create a service for web using their API (whenever it was released). However, the bevelled blue top bar soon became an eye sore. Add to that the use of the Tab bar in a non traditional way by putting a weirdly shaped camera button that breaks the flow aesthetically as well as functionally (which is why we use tabs in UI) and I was soon sketching the ideas of how to improve the existing mobile interface.

The inspiration for the UI was the Polaroid OneStep with Q-Light along with the cork-boards where we pin the Polaroids. The camera button (new shot) has been moved to the top corner which was previously occupied by the Refresh button. The refresh functionality has been added by pulling down the feed as in Twitter, Facebook and Gowalla apps. I have tried to make the interface share the warmth that is associated with Polaroid photos.

Ibibo, for those who do not know is a leading social network in India. While their product strategy speaks about itself, the same cannot be said of the user experience of the website. Throughout the process I was taking inputs from people I knew in the company and who were aware of the business objectives and strategy of the company. Hence, the redesign is bound by practical constraints like existing branding, product strategy and priorities of the company. My first step was an attempt to understand the kind of user base it enjoys. It is to be noted that the users of this site would not be tech savvy geeks but the masses who in India still go to cyber cafe’ for access to the web. This was a major focus throughout the design to make the site as simple as possible for a non-tech-savvy-user. However, that also meant that there would be redundancy needed in terms of site navigation and the ways to get things done. Let the user make discoveries depending on his browsing pattern and ensure that most common behaviors end up exploring all the services that the site offers. It is for that reason that you see links to the popular services in various navigational elements including the dashboard (orange) where the user can use the tabs to make an appropriate action like searching (live search) for a game or choosing to write a status in the Blurbs or just using their free SMS service to send messages right from the dashboard.

My first task was to prioritize the plethora of services into a reasonably possible number so that the list does not seem intimidating and also does not put some services completely behind the scenes. I made the list of the services and then chose those that were directly related to the needs of the user. Following is a screenshot of the same in the ideation phase.

This was followed by the search for a layout that would ideally streamline the process of looking out what game to play or updating the status and anything else the user is most likely to do. Following wireframes are devoted to that phase of design. The final wireframe resembles the finished output to some extent. However there are a few changes which were incorporated in the visual design phase to incorporate their business objectives. Some of these are the Become Popular button, notifications of new mails and updates, the popular games showcased in the dashboard which despite increasing it’s size were important for them. The advertisements are an important part of their revenue generation beside micro-payments which occur via the games. It might appear that the news feed is getting less of importance and most of it is below the hypothetical fold (one of the biggest fad of the web) but they want the user to look at the feed to play the games their friends are playing. At any time they have 4-5 popular games which are the most popular ones and the dashboard incorporates them as a slider. Another feature of the design is that the lower half of the screen, which involves the tabbed navigation to the left would not really need whole page refreshes. So when a user clicks on the mail tab, the inbox would open in the lower half with the orange dashboard staying in place. Certain more subtle visual improvements have also been undertaken. I would urge you to visit Ibibo.com and then come back to see the final version below.

Note: Since this project was carried on a personal level, any usage of this design requires prior consent from the designer.

I started this typographic self portrait after being inspired by the likes of Cameron Moll and others who were using great typography each day to create stunning art. The focus here was on creating a work of which I was not only proud but seemed different from many other typographic experiments out there. Also since I was investing time, I decided it would be a good idea to create something that can be used as part of my social identity for a while.

The result is for you to judge.

Permeate360 is a digital media solutions provider startup. They needed a brand identity and a website to show the freshness of the company and the kind of work they do for their clients.

After many brain storming sessions I ended up creating a brand identity and website design that reflects all the requirements of the clients.

]]> http://tuhinkumar.com/portfolio/permeate360/feed/ 0 http://tuhinkumar.com/portfolio/permeate360/ http://feedproxy.google.com/~r/TK-Portfolio/~3/lvrJuIGIUNk/ http://tuhinkumar.com/portfolio/ultimate-luxury/#comments Tue, 04 May 2010 15:45:20 +0000 Tuhin Kumar http://tuhinkumar.com/?p=205 Our customers include the Maharajas and the CEOs.

Ultimate Luxury is a magazine focusing on luxury goods from the most elite brands in India and abroad. They wanted a website to showcase the products from partner luxury brands for prospective users of these products. The website is meant to supposed to be the online face of the print magazine and yet have an identity of its own.

I was responsible for creating the layout and deciding the information architecture of the new website. We worked in synergy to create a design that spoke of class and luxury while being user friendly and accessible at the same time.

One of the initial drafts for the project.

Inspiring Pixel is a design blog written and edited by yours truly. Within months of its launch the blog has been looked upto as a source of authentic design related content for web designers. When I launched Inspiring Pixel I began with tweaking a free theme template to my requirements to create a functional layout.

However, soon it was realised that we needed a truly unique design in terms of aesthetics and functionality to stay on top and provide a streamlined experience to our loyal readers. Thus, I set upon to redesign what was already considered by many as an example of good design.

You can read all about the design process and the highly positive feedback from fellow designers here.