How we redesigned “Buy Sell”
Buy Sell is the intranet e-commerce website of the Indian Institute of Technology Roorkee. It is one the many apps created and maintained by the Information Management Group (IMG). Two years ago, when I joined IMG out of my interest to learn web designing, “Buy Sell Redesign” was the first project I was assigned.
The purpose of “Buy Sell” was simple. You want to sell something, put it up for sale; You want to buy something, look up in the items for sale or drop a request for it. So, this app was an attempt to promote the reuse of products by connecting those who did not need stuff anymore (mostly the final year students) to those who needed to buy new (especially freshers).
The Earlier Design
After being assigned the project, my first step was to go through the existing web app. It looked somewhat like this.
It contained five major sections in all.
Buy: A page to view existing items for sale
Sell: A page to add an item for sale
Request: A page to add a request for an item
View Requests: A page to view existing requests for items
My Account: A page to review my account
Problems with the earlier design
Although the earlier design seemed simple enough to serve its purpose, it had some basic design flaws and had a lot of scope for improvement on various aspects.
Out of the five sections, the app had, Buy and View Requests were of the same kind. Both of them were the pages to scroll through existing entities on the app. Whereas, the pages Sell and Request were intended to perform actions: to add entities to the app. And My Account was one of its kind related to none of these. All these pages had been placed at the same level in the navigation.
Search was not simple
As the app contained both the items for sale and the requests, keeping a global search bar in the header meant that the user had to specify first what category he/she would like to search in. So the user had the option to select from a drop-down whether to “search to buy” or to “search to view requests”. This increased the effort on the user’s side.
The mysterious “Send Mail” buttons on the home page
Although the application enabled the user to send mail to the owner of the item with a request to buy it, the action was so prominently spread across the homepage that every item had a “Send mail to the owner” button below it. Further, the user did not get to know the content of the mail being sent to the owner.
Need for a better user interface
Buy Sell had been serving its purpose for almost three years then, but with the advent of different e-commerce websites and evolving designs, there was a need for a better look.
How we addressed these problems
Being continuously mentored by my seniors, I went through every problem one at a time and came up with these solutions.
Restructuring the navigation
The navigation was adjusted so that like entities were clubbed together. Items for sale and Requests were placed in the left sidebar. Sell and Request action buttons were placed together in the header. And My Account was placed in the drop-down that opens when a user clicks on his/her image.
Making our Search Box smarter
The search was converted to Live Search and it returned the results from Items for Sale and Requests at the same time. Not only this, but it also returned results from filtering categories. For example, typing “bi” in the search box will return the categories Bicycles, Mobile Accessories along with different results from Items for Sale and Requests.
Making “Send Mail” a transparent process
The method of sending the mail was changed. Now, once the user clicked on an item, a modal popped up to show details about it which also contained a button to inquire about it. Clicking this button expanded the modal to show the mail that was being sent to the owner of the item. This contributed to the transparency of the connections being built through the app.
New Features
Apart from fixing the problems that already existed in the app, we introduced some new features too.
1. Watch: A feature to get notified
The user could now choose to Watch a specific category of objects and would receive a notification email whenever an item or request was added to that category.
And the user could manage the watched categories, all at once from My Account page.
2. Price Filter
A price filter is a necessary feature for any buy and sell portal and hence was necessary to be added.
3. Phone Number Privacy
For the users who didn’t want to display their phone numbers against the items or requests they added, there now existed a button to hide its visibility.
And, of course, the new logo
Till now, Buy Sell did not have its logo. So designing a new logo was one of the most engaging (and enjoyable) tasks. Inspired by the shopping cart icon after extensive googling, I came up with this logo and it was appreciated.
Choosing the right fonts and colors
When it came to designing the user interface, choosing the right font and colors was critical for the app.
Font
For an e-commerce portal like Buy Sell where the users had to quickly skim through many items and choose one for themselves, the font needed to be beautifully legible. It had to look modern as well as elegant. Keeping this in mind, I tried many fonts and finally, Open Sans stood out from the rest.
And it being free and open source made it all the more desirable.
The colors
The colors needed to provide a professional look and also give a dynamic outlook. So the color palette chosen was this:
Blue being a symbol of trust was chosen as the primary color whereas orange was used specifically for the action buttons (Sell and Request). Light grey was chosen for the background and dark blue shaded grey for the text.
Mistakes and the lessons learnt
Although it goes without saying,
No design is flawless. It is just a well thought out solution to the problem at hand and may become flawed some day.
And given the fact that Buy Sell was my first project, there were many mistakes made and many lessons learnt.
1. Redesign can’t be imposed
Not all existing users like a change in the design of the app they have been using. They need to be motivated to go with the trend. With the launch of the new Buy Sell, there needed to be some kind of tutorial for the users who visited the new design for the first time. This was where we did not provide an adequate learning experience. Nevertheless, the new design’s simplicity made it easy to learn and we did not face any complaint or drop in the number of users.
2. Promotion too is equally important
The new design was supposed to dramatically increase the reach of the application to the new users. But even two weeks after the launch of the new application, I could spot many people who did not know that the new Buy Sell had been launched. One of the reasons was that the only method of promotion used was a post from the facebook page of IMG. There needed to be posters on the hostel notice boards and in the lecture halls which we did not ensure.
3. Going step by step speeds it up
With the launch deadline approaching near, I started coding the front end of the application even before the user interface was completely finalized. This in one way helped me develop a lot of front-end development skills as most of the iterations were done not in Illustrator but in the chrome inspector. However, the overall process was delayed as iterating in the code took longer than iterating in Illustrator. Also, it led to a lack of proper communication between me and the back-end developer. Now, whenever I design an app, I finalize at least all the wire-frames and the user flow so that I as well as the back-end developer have a clear idea of what the app is finally going to be.
And life goes on
Buy Sell (or better say IMG) taught me many lessons. Being my first project, it introduced me to a new work culture where I actually forgot the difference between day and night. To a person who knew no more than the full form of HTML when he joined IMG, this project proved to be a launchpad for many skills. On my way, I learned Adobe Illustrator, HTML, CSS, Jquery, Git and the most important of all: Googling out the solutions to my problems on my own.
I’m pretty sure that this design too would become redundant someday and another junior will have a chance to develop his/her design skills. Meanwhile, I keep googling, keep learning and, of course, keep designing.
If you liked the story, please don’t forget to click the heart button below.
Special thanks to Amlan Baishya for editing the story content.
