Stuart Steel

Independent and resourceful

Designing, building and documenting a corporate intranet by myself

Role

Senior developer

year

2011-2012

project length

6 months

deliverables

Project management,
UX design, front-end coding,
user documentation

final product

New corporate intranet

Project Summary

Hired to support the Sensis intranet, I ended up completely redesigning and rebuilding the intranet in less than 6 months.

Taking on multiple roles

My entire management team was retrenched in the week before I started work.

With no dev plan or budget I set about creating my own

PM, BA, designer, developer: I filled all these roles in completing the work

intranet design

Building off the corporate website theme removed marketing team oversight and provided key code assets

Adding user personalization drastically improved the usability of the site

Desktop, mobile and print outcomes: Clever use of media stylesheets delivered significantly improved user experience in all mediums

project
Outcomes

New site launched in 4 months: And I only had 60% of my time dedicated to the task

Usage spiked on launch: So much so it unearthed a long buried bug. I fixed that too.

New user documentation: After the site was complete I delivered updated user documentation and customised WYSIWYG editor interfaces

Put down your smartphone!

This case-study needs a bigger screen to be seen properly.

Want design shots, interactive prototypes and project details?

Please come back when you have a laptop or tablet.

Challenge

I joined Sensis as a senior developer, tasked to support two internal systems, the intranet (60%) and an internal sales tool (40%).

On my first day I discovered that the intranet's entire management team had independently been retrenched in the previous week, in particular the PM and BA. I had no roadmap for work, and no direction for what I should work on on the intranet.

While I was hired as a front-end developer, my previous experience as a business owner and prototype developer gave me sufficient tools, confidence and initiative to tackle the challenge by myself.

Mapping the design problem

Meeting my stakeholder

My one remaining stakeholder was Kelly Ford, the Sensis news manager. She published new content into the site daily, and used it as the main organ for communicating corporate news to the wider Sensis team. Not only was she able to explain her goals and priorities but was very knowledgeable about usage patterns and user requirements on the platform. We quickly formed a partnership where she acted as my key stakeholder and sounding board during the redesign and rebuild that I envisioned.

Site analysis

Sensis Insite: A typical corporate intranet

The corporate intranet, "Insite" was built on a Joomla CMS. Like most intranets, it was sadly unloved - ugly, poorly designed and with low usability. It's key tasks were:

Directory of online resources: the main use of the site was providing a comprehensive list of internal online resources

Corporate FAQs and documentation: Insite was the central repository for corporate documentation

IT service desk: Presentation of contact details for the IT service desk was also critical

News publishing: While this was Kelly's key requirement there was evidence that this was relatively low on user priorities

Site and employee search: Search for site content OR an employee's contact details

UX review and analysis

Aside from its lack of aesthetic appeal, it also demonstrated a number of usability challenges that impacted day to day user activities

Directory of online resources: This comprehensive list was not easy to use. Any individual user only used a small percentage of total links, and finding those resources in the undifferentiated list was not easy or intuitive. This directory was also only available on the homepage of the site.

Corporate FAQs and documentation: Navigating the menu tree was not easy or intuitive

News publishing: Readership of internal news was not particularly high, in part due to lack of clear presentation and typography. There was too much text presented on the home page to encourage reading.

Site personalization: The site users were not homogenous, and the site failed to allow users to customize their experience to meet their individual needs.

Original site design

Corporate FAQs and documentation

Site and employee search

Helpdesk contact details

Directory of online resources

Aiming high

Planning a complete redesign

Because there seemed to be so many different issues with the existing site I believed my time would be most effective implementing a complete redesign rather than attempting to solve individual problems one at a time.

I was confident that this task could be carried out in good time, and luckily, in the absence of any other agenda, I was able to convince the News Manager and my Dev Manager that this was an acceptable plan.

Implementation strategy

Exploiting existing assets

I was aware that I was operating solo in a new work environment. While I wanted to effect significant change I was aware that any change would have to be non-controversial and demonstrably effective. To ensure this I planned to base the intranet design heavily on Sensis's corporate website. This had the following advantages

I would not be breaking any branding rules or making challengable design decisions.

A significant amount of code could be appropriated directly from the public website, drastically reducing my development time.

Improving site usability

As I set about designing the new site it was important that the new design provided more than just aesthetic improvements. I had the following usability goals in mind.

Grouping, ordering and strengthening content hierarchy

Since the site was so large, and contained so much content, correct grouping and ordering of content was critical. Improving the visual hierarchy of key pages would also make it easier for users to quickly scan for and find the resources or content they were looking for.

Improved discoverability

Important resources needed to be discoverable on all pages (not just the home page). Site navigation had to be strengthened to aid deep browsing of content in the FAQ section. Navigation needed to be universal.

Improved typography

Typography had to be strengthened to improve visual hierarchy.

In some cases font-size needed to be increased to improve legibility.

Include user personalization where practical

Because different user groups relied heavily on Insite, but in drastically different ways, it was important that at least some personalization was implemented to serve differing user needs.

However this still needed to be practical and any personalization would need to be easy to implement.

Effective communication

While I had managed to achieve surprising autonomy and independence in this project it was important to keep all stakeholders involved and informed. I shared progress freely and often during the design and build process.

Design

Redesigning the news area

Updating the site banner

The new global site banner showed navigation links to the FAQ and corporate documentation. This navigation thus became global throughout the site, instead of just residing on the home page.

The usability of the site search was also updated.

Implementing a news carousel

I chose to show less news up front, but increase readability and impact of that shown. The carousel rotated through 3 hero articles. Interacting with the carousel allowed a user to focus on a single article. Additional articles were displayed in an open accordion below as simple links

Personalizing news consumption

A user could choose to collapse the additional news accordion. The site remembered this as a personalized setting.

News presentation in original design

This menu only found on home page

Limited value in global banner nav

News articles are messy. Layout and large amounts of text discourage browsing and scanning

New design: improved nav and news carousel

Global nav shows corporate documentation

Animated carousel gives focus. Hero image and reduced content reduces distraction

Additional news shown in expanded accordion.

Customisation: Collapsible news section

Additional news can be collapsed. Site remembers this user preference for personalization.

Redesigning Helpdesk and resource directory

The original design displayed these resources in a side column that appeared on the home page only. It's usability was very low due to the low colour contrast and small font used, and the long undifferentiated list.

My redesign moved these assets to a super-footer that was displayed globally on every page of the site. The new footer had accessibility compliant contrast levels and a larger font. Discoverability was significantly improved by grouping the links under sub-headings, and most importantly highlighting visited links so that users could pick out the online resources that they routinely used.

Original directory design (home page only)

Finding anything in this list was clearly difficult

Updated global directory design

IT service desk is highlighted

Section headings make groupings clearer

Visited links are highlighted, effectively pesronalizing this directory for every user

Redesigning content pages

Improving page structure and navigation

Page structure and navigation was improved by the inclusion of breadcrumbs, and an interactive side menu that revealed the location of the article in the overall site structure. This allowed for better comprehension of site taxonomy and speedier lateral navigation.

Improving typography leads to better readability

Simple but powerful changes to typography for headings, subheadings and paragraph text singificantly improved readability and comprehension

Sharing and printing tools

Tools to the right of the page encouraged users to share or use these documents effectively. The print stylesheet in particular dramatically improved the printed document presentation for those who chose to print a resource for later use.

Threaded conversations

Users were given the ability to add threaded commentary and conversations at the bottom of any article.

New article page design

Updated employee directory

Improving directory layout

The interface design for both the search dialogue and the directory listing pages significantly improved both the usability and utility of the internal directory search

New article page design

Post-launch outcomes

Rapid development and delivery

New site launched 4 months after starting work

I'm particularly proud of this since it was not my sole focus. 40% of my time had been dedicated to an internal sales tool

Usage spiked after launch

In particular content editors who had not kept their site content up to date suddenly began updating their content again. This new user activity actually triggered an intermittent and long buried SQL bug that crashed the intranet site. The previous developer had not been able to identify or solve this bug. I had it fixed after a stressful fortnight of discovery.

Improving the content editor experience

Content editing for non-technical audiences

Because the majority of content owners lacked web development or content management experience it was apparent that standard WYSIWYG editors could cause trouble with creating effective page content.

Once the site was live I set about customising the standard WYSIWYG editor interface, and writing extensive user documentation that made effective content management more fool proof.

Integrating 3rd party feeds

Yammer and NPS data

I was tasked with progressively adding Yammer and NPS reporting functionality to the site.

Yammer and NPS content on the home page

Ongoing corporate value

The intranet had been rebranded to match corporate changes but was still going strong when I left Sensis in 2017

Stakeholder feedback

Feedback from Kelly the News Manager

"I worked with Stuart to re-invigorate Sensis’ corporate intranet. In a relatively short period of time, Stuart was able to create, configure and release many new functions that enhanced staff engagement with the intranet, including user comments, Yammer integration and a band new look and feel. At all times I found Stuart to be professional, enthusiastic and highly skilled. It would be a pleasure to work with Stuart again."

Feedback from Scott my dev manager

"What Stuart is able to achieve in short spans of time and across so many areas is quite outstanding.
He is a self-driven, expert developer who executes his job efficiently and with high quality standards.
He also makes the time to train and develop others where required. Stuart is a great team player."

Within 6 months I had effectively made my role redundant.

I went on to fulfill a number of different functions on other projects, including front-end development, UX design, user testing and business analysis. In 2014 I joined the White Pages team as a dedicated UX designer.

Other case-studies

UX + UI design,
Copy writing

User research + testing,
UX design

User research + testing,
Product + UX design

WANT TO get in touch?

Let’s chat

Thanks for checking out my work.

I believe in rapid iteration, early sharing, and learning from mistakes. I believe that design is about solving problems, not creating art. Good design aims to make small, meaningful improvements to people’s daily lives.

If you want to work with me, or learn more about my design process, don’t hesitate to get in touch.

WANT TO get in touch?

Let’s chat