Project Description

Beacon

Beacon is a Responsive Wrapper designed to bring old Intranet technology to new viewing dimensions. Rather than introduce a radical new piece of software, SORCE felt it was important to evolve their existing intranet software and create a responsive wrapper, built around modern functionality with effects. Customers would retain all their current information and applications, but it would be delivered in a streamlined, modern interface.

There was a concerted process leverage standard technologies, minimising learning curves for creators and maximising delivery speed to users.

The Development process included :

  • Stakeholder interviews
  • Change requests
  • Wire framing, both paper and Axure
  • Rough Axure prototyping
  • A proof of concept hackathon
  • Product delivery

There are two ideals behind Beacon development.

  • How can we enable better information interaction with the user
  • How can we make this a better experience for the developer

We can help the user perform tasks better(quicker) by creating a simpler user experience and we can help the admin with an easy to use progressive story line.

Planning for Beacon went from paper to a live Bootstrap environment, where we could rapidly make, review and test changes. Most of the wireframe and prototyping in Axure was focussed around individual applications which plug into the responsive framework.

The considerations were the base layout, which is why we chose a standard column format, with the ability to re-organise columns based on the incoming device. We had two things to consider, framework and content.

Convergence dictates the evolution of information, there are certain elements that the user expects to find in specific locations, the logo for example. They expect it because this is where they are used to finding this information.

If you are making the user think, then you are failing your task. Do what they expect and follow the rules of convergence. We’ve tried to keep that in mind with design of Beacon, to learn from the expectations of the user.

Column and content population

The necessity for content to grow vertically an push down content as required was a very import driver for this layout. It also meant that the layout controller could determine the number of content parcels they want to return to any space, without a negative impact on the layout. Changing the content parcels only meant it pushed the information below further down

The decision then solely becomes an issue of judgement, when is is it too much information?

Which leads to the responsive nature of Beacon. It is designed to respond, with minimum fuss.

Beacon Responsive Framework

Beacon Alternate Theme

Every aspect of the out of the box design was considered, built around web safe colours, accessibility contrast. Designed to be subtle and to showcase the content. To deliver something the user would instantly be familiar with.

MacBook-Pro-mockup-main-1

MacBook-Pro-mockup-b1

Beacon Out of the box single story layout

Best Practice

The Beacon framework is built to fully maximise CSS3 & HTML5, which means the designer has total control. All Beacon does is address the responsive restructuring of information, so that the designers don’t need to worry how the information changes on a device. If the designer does not like the way the page responds, they can take control of it in the template creation space.

Beacon can be easily changed to suit the needs of the brand team, to deliver the visual experience they desire, but to hopefully stick to best practice when it comes to UX. With great power, comes great responsibility.

Beacon alternative bold story layout

Beacon tri story paginated layout

Beacon Contacts

The most popular application in world Intranets today is the Contacts Application and getting it right is vital to the perception of the product. Contacts is popular because it one of the few applications that all Intranets share.

This makes contacts a killer application for Intranet software vendors, but not necessarily the killer app for your Intranet. The primary function of the contacts app is to find a contact quickly. We invested a lot of time and effort to do that.

The simple search is designed to be sleek, quick and obvious to users. Dynamic indexing autocompletes user lists as you type, refining as you go. You can also use other values to find people, like titles or locations just by typing in the search string.

Contacts application simple list view

Contact list - preselected

Contacts Biography Page

Responsive layout

Beacon is designed to be a responsive framework that will automatically adjust to your requirements. It will follow a predesigned responsive order, but it can be tailored to your to your needs.

Beacon Responsive Layout