Blog - Digital Marketing Agency, Niswey

Spreadsheet: A Great Tool to make Website Wireframes - Digital Marketing Agency

Written by Anubhav Tiwari | Oct 25, 2013 7:25:02 PM

The Event: TLabs organized the first ever #Designathon 2013 at the Times of India office  (Noida,India)

My first few steps to the venue: It was quite an experience for me. I was quite nervous as I was attending any such design event for the first time in my life.

After a lot of tussle within myself, I entered the beautiful campus. Employees working in cubicles reminded me of my ex-organization-Infosys.

Staring and peeping into the monitors of the employees, I made my way towards the hall where the event was taking place. Completed registration and was handed 3 shopping vouchers, a notepad and a Reynolds pen!


Formation of the Team “MAMA”: I walked through the hall and took the last chair (it is considered safe to be on the back seat). I knew no one there, and was wondering who team up with. The TLABS team made it easy by announcing that people who don’t have teams can come, introduce themselves and form a team…Sounded easy! But I could not gather the strength…

To my delight, I saw Ravish Malik (thank god for a known face!), Graphic Designer from Srijan Technologies. He called me over and introduced me to Manauwar Alam, Aman Kanoria and Maninder Singh. We formed a Team and named it “MAMA” (the initials of our names).

The Event-The Problems -The Dinner: Cool enough!! I shifted my focus to the event now.

The event started with great speeches. And we were given four design problems:

  1. Design of web and mobile app interfaces of a new feature  (By TimesCity)

  2. Design of a new mobile app interface for Magic Pathshala (By Magic Software)

  3. Design of a web interface for AppHQ Dashboard (By Shephertz Technologies)

  4. Design of a new web and mobile app interface for Times of India website (By Times Internet)

We selected 4th problem: Design of a new web and mobile app interface for Times of India website and left for dinner. We were treated to an Italian Delight!

Day 1 Over: We departed with a promise to assemble again at the venue in the morning.

D-Day, Final Few hours: Met up in the morning – all excited and bursting with ideas! But very soon we realized that we were running short of time.

We concentrated hard on the problem statement of our chosen topic: Design of a new web and mobile app interface for Times of India website

What we needed is “The iDiya”: We froze on few ideas in an hour’s time,

1. The Indian news websites need to break the trend of clutter on the homepage.

2. The website should be flat NOT because it’s a trend but because flat increases the readability.

3. Advertisements had always been a part of the website but they only irritate the users, so we need people to like them and force users to click on them.

4. “Breaking News” has NO dedicated place on the news website. It always looks out of place.

5. THE MOST IMPORTANT decision that we took was, that a new website should not have a footer, or we can say the website should be endless and the news has to dig down to history – arranged in chronological order.

Bingo!! 11th Hour Execution and the Hurdle: We started the real work on Photoshop, and found that we would NOT be able to meet the deadline of 5pm submission.

Idea aaya!!

Idea clicked in my mind about using Spreadsheet to design the website wireframes.

Excel always had the functionality of:

1. Importing Pictures

2. Freezing Panes.

3. Including Dropdowns and radio Buttons

3. Merging cells

4. MOST IMPORTANTLY scrolling endlessly.

Defining our Design Funda:

Horizontal Header 1: The header which gave the category of news available was frozen and would not move even if we scroll down the page ( very much like the Facebook News Feed Header )

Horizontal Header 2: Subheader contained the “breaking news” section: If this news isn’t available , the place can be used for high value advertisements. This header also included small sections for Sensex Updates and Sports News update if any.

Below the header Section we divided the whole screen into 3 vertical sections:

Hooking the Bounce Rate over the boundary for “SIXER”: Click on any article to read: If you click on any article to read…it will blow up in size. And towards the end of the article, you will again see the homepage. This keeps you on the news website and will reduce the bounce rate of the website.

Our Vocal Design Consistency: If you click on any section of news, the website retains the original homepage structure. The sports will now be kept in the same framework of – Recent Sports News, Most Seen sports news and Most Talked sports news.

This helps in reducing the confusion.

Digging the History in Spreadsheet: Endless scrolling was not the only idea behind using Spreadsheet.

1. It was fast.

2. Presence of grids made design easy.

3. Many inbuilt features were ready to use.

We presented our idea and without any award but with a lot of experience and beer we left the venue!!

The Motivation for Innovation – The Tweets: The concept of using Spreadsheet for wireframes was praised and called innovative bymany designers. Below are few screenshots:


 
View full post