Fashions and trends seem to change faster the ever these days meaning that it is vital to constantly review our user interface designs to ensure that they enhance rather than detract from the fantastic visual content published through the digifi.it platform.

When we got together to review e-reader web application and it’s interface it without doubt looked dated, especially through the prism of the new flat iOS!. In addition we felt that it no longer reflected the many features we have added over the last year and also the brand transformation that digifi.it had gone through. We rebranded ourselves with a modern, open and bold makeover. From the colour we used, the typeface we chose and to the tone of voice we portrayed a tremendous amount of work went into transforming the company image. Yet the e-reader was left unchanged. In the meeting we set out to address the e-readers’ current state and bring it inline with our transformation. We agreed that we wanted to have a more contemporary, clean look and feel.

So the process began. As Head of Design and User Experience I went away, researched, sketched and looked at the direction user interface design was trending towards. When you look at the big three software ecosystems as well as the wider user interface design scene you will notice a shift to flat UI that steps away from excessive gloss, textures and skeuomorphism. This style ushers in the principles of swiss design which in turn inspired the bauhaus movement. The Bauhaus movement, Swiss design and the current flat UI trend in my view have a number of principles in common such as: Simplicity, clarity and focus. The Bauhaus movement encompassed the idea of stripping something down to its practical form and doing away with finishings and additional embellishments.

The new e-reader design features a cleaner, more modern interface, improved menus and content scroller. The the new design blends into the background whilst your content remains front and centre.

Screen Shot 2013-12-17 at 12.21.36

The gloss-like gradient of the bar, a remnant of the days where the term web apps was not so commonplace resembled an application design to look like it was running on an iPhone. Today we use web apps routinely in our online tasks: saving a file to the cloud, editing a word document and socialising. Our app bar was stripped down to its practical function to display the options for manipulating the content which was being viewed while not competing with the content by taking a step back and loosing its glossy cover.The bar has also been reduced in height from 40px down to 35px; That is a 12% decrease which will help with maximising the contents size which we will touch on later on.

toolbar
colours

Going back to the idea about making sure the content shines and is not competing with other visual elements, we chose colours that would help reinforce that idea. We changed the background colour to a darker shade of grey which is in fact a whole lot closer to black than to grey. When we asked for feedback from beta users the first thing many mentioned was that it dramatically brought the content into focus. The bar and the drop downs menus exhibit a grey tone that we balanced so that it wouldn’t appear dull.

Talking of the bar, the icons also had a makeover. These icons will be used across the different platforms apart from where platform guidelines deem them to be a specific icon, for example the share button. Android share icon is different from the iOs share button. The share button we previously used was the standard apple share icon. Changing this further distances the design from mimicking the look of any single platform. In addition that share icon was deprecated when they introduced a new share icon in the latest iOS update. The icons will help define the digifi.it experience and allow for familiarity when a user uses our app across various platforms.

Some of the aforementioned icons reveal drop down menus which we designed to compliment the toolbar and reflect its modern clean look. We did away with the arrow shaped indicators that hang down from each menu button and the awkward gap the indicator would cause for the body of the menu drop down in relation to the bar.

droppop

They had a purpose of course, to help the user understand the link between the menu drop down and the menu item – simple as it may seems. To indicate where this menu option originates from, the drop down exhibits a thin line at the top which shares its colour with the highlight colour of the toolbar menus. This line then aligns to the right side of the highlighted menu icon. As seen in this animation

The issues button became a more typographical button with larger text, open sans typeface and when hovered, it reveals the back arrow to indicate to the user that they will be exiting the current view. The initial design encompassed a left facing arrow in white however that would have given that arrow an equal level of importance and function to the left and right arrows surrounding the page number in the centre portion of the bar. To keep the bar clean and to remove any confusion the arrow needed to look different to express its difference in comparison to the other arrows in the bar. Focusing on typography to convey the message became the obvious choice and the arrow appearing once hovered indicates that you will leave the current view.

We also referred to our analytics engine for insight into how users were currently interacting with content on our platform. An interesting insight came from the way users navigated between pages. We found that the average breakdown of the source of page changes was as follows:

pie2

The content scroller at the bottom of the screen allows the reader to jump to pages quickly and easily. It also serves as an overview where you can view all the pages and see their order and page number. Whenever we had received feedback about the content scroller it was always that it was a very useful feature so we were surprised at the low usage figures. Therefore during the design refresh we wanted it to be more discoverable and also to take this opportunity to improve its usability. We replaced the tab that when hovered would reveal the contents scroller to a tab that was lighter, and contained text and an icon. In addition to this the scrollbar adjusted. It was rather thin and difficult to capture then grab should a user need to so we made it bigger and easier to hold on to.

We are very proud of the new e-reader design and really hope you enjoy using it!

Stay tuned for news of a major design update to our Android reader!