Spreadsheet: A Great Tool to make Website Wireframes

October 25, 2013
Posted in Blog
October 25, 2013 Anubhav Tiwari

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!

Registration at Designathon 2013
Free goodies at Designathon 2013

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!

Italian Design on the platter

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:

Content placement on homepage at Designathon 2013

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.

Reduce bounce rate on the home page - ideation at Designathon 2013

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.

Design consistency on lading pages - IDeation at Designathon 2013

This helps in reducing the confusion.

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

Endless scroll - part of ideation and design for a news website at Designathon 2013

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!!

Had a good time at Designathon 2013

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


 

Comments (3)

  1. Ritha Hegde

    Extremely innovative idea. And I completely agree to the points that need to be changed on their website. Well done!

  2. Ravish Malik

    Hahahah! Yep, I remember how everyone was surprised by your approach!
    BTW, nice article of the whole thing.
    Cheers to that!

Leave a Reply

Your email address will not be published. Required fields are marked *