Homepage User Interface

Having completed the implementations of the poll processes and actions to our satisfaction, it was time to do some layout for our front page to showcase our Minimum Viable Product (MVP). While browsing themes on wrapbootstrap.com and bootswatch, we’ve taken inspirations from two themes, namely one known as Qubico and the other is Delta. We’ve also decided to use Flatly as our base theme to begin our build. But before anything could start, we had to dig up early sketches in our design process to come up with our…

Home page layout

What went into our front page was rather simple and straightforward. We decided that it had to contain a few of the main things we had to talk about what Feedbaker does (which was rather difficult considering how simple the app was).

  • Introduction
  • Features
  • How to create a Poll
  • Story behind the app

Later on we added on more sections:

  • Technologies
  • Call to Action
  • Footer

From scratch

The first thing that needed work on was the top navigation bar on the homepage. We decided that we needed to produce a logo, and thus found flat-icons from iconfinder.com to use as a placeholder for our app icon. Followed by navigation buttons which we initially named and catered for ‘Home’, ‘About’ and ‘Login’/’Logout’. And thus we began with a fixed header that remains as the user scrolls.

<header id="top" class="header navbar-fixed-top" ng-controller="NavbarCtrl">

The process was tedious but necessary, the development of the frontpage took us a total of 3 days because of deliberation over the design and numerous iterations over how the colours should look and over what icons should be used.  Essentially, it boiled down to a simple 5 step cycle:

  1. Paste in section class and div ids tags to reserve the space
  2. Input content and icons.
  3. Edit css for the class and div id tags to configure colors, text alignment, padding and margins.
  4. View inspector to edit in browser to verify the look (grunt was takes quite a while to compile changes for the .scss files)
  5. Rinse repeat steps 3 – 4 until section is done.

Note: Our css file is written in the .scss format as it caters for a more ‘modular’ way at grouping css together. Our grunt scripts are configured to handle and compile the scss file into full fledged css file later on for the page will load from.

Icons, Graphics, Pictures

To make things slightly more interesting, we procured .png icons from various sources on the web and used photoshop to tweak the image sizes. Where image icons were heavy and unnecessary, we used glyphicons that came together in the bootstrap package for our graphical representation/aids in the front display as well. Initially we were trying out Font-Awesome, but it was broken in production and despite some attempts at fixing, it didn’t seem to compile due to the minification that was caused by the grunt build. Also, it didn’t seem to make a lot of sense to use Font-Awesome just for merely 4 icons.

Responsive Web Design and Media Queries

Jon shared an interesting book that really took the explanation and principles of responsive web design to another level with Ethan Marcotte’s Responsive Web Design.

With a brief skim on the book contents, and Bootstrap’s helpful CSS documentation on it’s grid system, things were very easy to configure when all we needed to do was to figure out how wide we want the content to be in each section, and correspondingly use col-md-1 to col-md-12 to play around with the columns in the row container. This helped us save a lot of time manually configuring the padding and layout positioning on the .scss file itself.

There are also some responsive utilities which I found very useful in hiding some things that may not make sense to show in the mobile interface that we might want to put inside the web page for a desktop view. Responsive utilities such as .hidden-xs allows for viewing on tablets and above, but not necessarily on small phone screens.

Revamp and Touchup

As we alternated through the sections with a blue colour scheme, we eventually moved on to fix up other parts of the home page, such as the Call to Action, which we felt should exist at the bottom after scrolling through the introductory information on the page (just like all respectable html5/css3 skinned product page you see on the web today). What was interesting to note here was how we decided to improve the flow of the user navigation from front page to login page to being redirected into the poll dashboard by revamping our initial login page, which was an extension of the home page on another view. This time, we decided to let the navbar go, and use a box to contain the text and buttons for the login page. This was done by providing a route for the Get Started button (our call to action on the homepage) for it to bring us directly to the login page itself. In any case, it would still be a 2+2-click through event for any user to get to the polls. (2 on our client, 2 on the NUS OpenID side)

Further plans

With 2 more months to go, we may have more to do and may improve on our functionalities and features for this app, and the frontpage may be due for more changes. Until then, we decided to forgo the about page and use the frontpage to capture all information intended for the user to read with a scrollspy implementation (see bootstrap/javascript) to get to the various section on our one-page slider layout. For now, we can’t get any happier than we already are.