Wonderlane Studios

1-206-850-4452 PST

Intranet Information & Learning Path

Large global IT & SAP consultancy seeks to educate new employees and provide information resources

High & Low Fidelity Wireframes | Case Study

Note: wireframes shown are intended for user experience testing regarding information architecture and learning paths. 

persona.PNG

Number one - the starting point is "Who is this for?" - beginning Intranet design with a reality-based persona.

 

Creating the persona from interviews - a new employee who wants to excel - Manoj Ramachandra is a full stack developer who easily communicates with co-workers and business executives on technical topics during sales pursuits. 

Photographed during a sales project working into the night.

Nav.PNG

Information architecture, site navigation, content title, and links compiled from extensive sources. Looks easy now!

Slide19.PNG

One of several variations based on the same wireframes. Designs based on existing corporate brand colors &  in a simplified style.

Simple, complex, educational - and many of the images for high fidelity wireframes are from unsplash.com.

Slide18.PNG

Go-To-Market Strategy, Service Offerings, Deliverly Capacity, Methodology, Industries, blue version,

The Intranet site would be served via SharePoint.

Slide4.PNG

Colorful and technical Intranet site design teaching basics about the company, and providing certifications. Structure based on the unit strategies, offerings, capabilities, methodology, industries.

Learning path idea added with icon.

Slide1.PNG

Contemporary design for IT Intranet site with a focus on new employees learning about the company.

People prefer this version or similar, with saturated color, and fun, embedded travel and city references.

Slide3.PNG

Calm catagory based information Intranet site design proposal.

This version would include video of the drone, and trucks, and person on the escalator.

Slide2.PNG

Thoughtful black and white modern design for an Intranet learning site, including what we do, and certifications.

These colorful text links would provide the basis for inquiring into this consulting practice. 

All the versions to be tested for user acceptance, for the users and managers to select their favorite.

nuversion.PNG

This proposed site is an animated page - colored rectangles move and form the images on first run, to bring attention to site resources.

Rectangles randomly move  and as the user hovers the mouse over an image it forms an overlay to display the active image.

https://threejs.org/ for complex animation
 

http://www.pixijs.com/ for simple animation

branding.png

Introduction: 

Information Architecture wireframes for corporate intranet and employee education site.

Acquire branding, look and feel, brand colors, style guides.

The following are the low fidelity wireframes used as outlines of the high fidelity wireframes shown above.

Slide2.PNG

Variations on designs. Auto swapping out images from stock photo database to keep interface fresh.

Slide3.PNG

As a learning site the categories are the 2nd level, further structure fills in these details. Link to learning path.

Slide4.PNG

A complex set of images and a semi-circular presentation structure of the titles leading users eyes to the learning site link in the center.

Slide5.PNG

A circle embedded in a half and half interplay of shapes and colors. Employee Learning Path at lower center is a focus.

Slide6.PNG

Go to market for new & existing channels, markets, and business models with branding, resources, and services.

Slide7.PNG

Service Offerings details the expertise within 8 related Enterprise Core Services, including design & deployment.

Slide8.PNG

List of 20 top level delivery capacitities, engagement, commerce, finance, supply chain, planning, scheduling, success factors, utilities, analytics, tech architecture, cloud, portal, UX UI, project, again, perfomance, etc.

Slide9.PNG

Different types of delivery services require a unified methodology approach to execute.

Slide10.PNG

2nd level structure introduces 18 top industry categories of expertise within the consultancy.

 
 
Intranet Site Design/IA Case Study 

Client
The client, sales of $8 billion USD sales per year, is a large global software consultancy, with a central USA hub, specializing in SAP, providing an integrated suite of services — IT services, infrastructure management, engineering, R&D, and business services, to serve customers across the world.   

Users
Primarily the Intranet site users work within the company - SAP product managers, project managers, software developers, database admins, UX / UI designers, sales, and other consultants around the world. A special consideration are new employees doing research on the company offerings to understand and communicate relationships. Some B2B (business to business capacity would be included in the completed first version.

Scope of work

Design a personally engaging Intranet site that employees at all levels can use to understand strategies, core missions of the diverse branches of the firm, core offerings, learn about the human/business relationships between managers, employees, and highlight their units within the company. Display the information architecture of the company's offerings to clients, methods, 18 divisions, and organization chart. 

Process
Research needs gathered from a significant amount of existing documentation
, also gathered requirements via interviews, and create low fidelity and high fidelity wireframes to document designs. Conduct interview of the managers responsible to build the site, based on the vice presidents wants and needs for the site.

 

Originally the meetings were scheduled to take place twice a week but once the initial PowerPoint presentation was provided, no one was available to discuss the Intranet site requirements. Therefore, I worked to design based on information collected in PowerPoint and on a SharePoint website. When complete I made presentations of 11 user interface variations, with the information architecture wireframes, and documentation.

Information architecture here meant categorizing diverse information into bite-sized chunks that people can understand, assimilate, and which is therefore made useful, including to the developer teams. One of the issues here were too many sources, too much information without organization, and little or no access to it by employees of different units because large amounts of random information is segregated by groups behind security firewalls.

 

Also designed a new corporate logo for the US branch to differentiate from the parent branding.

Visually I used planes and surfaces as a dimension in mind mapping the information design being presented intellectually and emotionally; a kind of a "material plane" or curtain.
 

User Research 

Ethnographic Field Studies, Participatory Design, Interviews, Usability Benchmarking, Moderated Remote Usability Studies, Customer Feedback and A/B Testing are in scope to collect feedback on these pages and variations on Learning Paths.

Further steps are to get senior manager sign-off, and collect, or plan for the content for the hundreds of pages required to flesh out the site.

 

Those less experienced with delivering Web sites and applications may believe that a detailed and accurate Intranet site could be cobbled together from dozens of sources in 2 days. It is time-consuming to structure and organize the information.

 

Setting reasonable expectations is part of the communication process, designing and building software is a negotiation.
 

Other Content Created 
Editing a large sales presentation document that was part of learning about the company's depth of technical service offerings with SAP, I wrote sections of the presentation and designed simple colorful graphics illustrating human-centered design processes for use companywide. Sales content is part of the corporate identity. 
 

Highlights

As this corporation is an equal opportunity employer encouraging women and minorities to apply, the user experience and user interface designs were framed towards the goal of a more diverse employee population. We chose contemporary design which matches today's reality, and moved away from traditional images of IT workers as depicted by two Caucasian men shaking hands, usually just their hands and suit cuffs (sales still wear suits, but within IT generally, formal business attire is not preferred.) 
 

I suggested the suitable term "Learning Path" to the proposal for educating incoming new employees and creating savable learning paths that they can select classes and tests from to illustrate new knowledge. 

Results

The saturated color and versions of the main hero image and site designs proved very popular when tested.

 

The teams tasked with completing the work have the information architecture and a user interface that drives their goals towards human-centered design. Our choices move the company away from stock images devoid of color or energy which do little to motivate employees and managers to consider the site a great resource and learn from the materials intended for their use.

Graphic designers and corporate content specialists will work to provide extensive content based on the direction of the unit managers as time permits.

 

Our aim is that requests for employees to create their own case studies and add content will also increase participation and universal sharing of great customer success stories, with the technical knowledge to support that success.