Fujie Design
Visual | UX | Experience
Stage Page_0505-01-03.png

Training portal for Office Suite 365 | Web app

Office 365 Training Portal

Web app


This web app lives in the internal portal of Alaska Airline as an index page. It searches the database among collections of training material. It also helps curate training material by categories and job function by using meta data.

Project was designed and launched: 04.2016 - 07. 2016


Project Overview


| My Role

UX design; Visual design

| Problems and requirements

The scale of the project indicated the complexity for development. It also required the design to allow maximum compatibility to a range of content.

| Design Approach

I planned my design approach into three phases

I: Translating business requirements into design flows and structures with ideation. The result should be a low-fidelity demo for innovative points; maps of design flow, and draft of wireframes.

II: Internal review with design manager and to test designed flows with clickable prototype. Explore visual design style at the end of the stage. Deliverable should be black and white clickable prototype ready for visual design.

III: Visual design that utilizes typography, brand language and imagery. Hi-fidelity prototype should also indicate the usage of animation and micro interactions.


PHASE 1: Ideating and Drafting


The index is a user-facing front that allows users to search, explore, and access job-related software training contents. The client has several thousands of employees and hundreds of job titles across departments. Each department may have multiple collections of contents associated and assigned to one single job title. Yet one employee could be required to finish training for multiple  softwares in multiple collections of training themes. 

The material which the admin would upload through existing portal comes in four formats:

- paragraphs of plain text;

- images (at least 1; 6 maximum);

- videos;

- URL to online resources and downloadable files (unzipped, single file).

Each of the content block could contain any four of the said types of contents. E.g.: a content block could have both paragraphs of plain text, image(s), URLs and downloadable files. However, Images and videos can not be both displayed or selected in the same content block. 



When glancing through some sample contents provided by the copy team, I realized that sifting through hundreds of collections of content will be a foreseeable pain point for users. Imagine being asked to use a dropdown menu to scroll and scan through more than 10 items just to find out that there are more of them down in the list. 

The existing contents had been previously sorted and tagged with training purpose and their related software.

For example, a user would know that he needs to access "Project Management" courses that utilizes "Microsoft Excel". Or, a user can only specify the course name or the software name, to access a broader range of contents. 

I designed a friendly way to initiate this search, by using conversational language to prompt user's input for searching.


Friendly-prompt of search


Starting with conversational language such as "What do you want to learn?", and followed with dropdown menu that contains 6 software names to initiate a search.

Low-fidelity prototype and wireframe 

Exploration on content block arrangement 

Exploration on content block arrangement 

Index landing page with search results

Index landing page with search results

Image/Video treatment

Image/Video treatment


Phase 2

Critique, testing, Digital Wireframe and style exploration

With validated results and positive review both from design manager and the client, I moved on to translating low-fidelity paper prototype into black and white wireframes. 

In this phase, I mapped out and prioritized the content utilizing typography to make black and white wireframes. 

hifiArtboard 3.png
Scenario Page-11.png


Demonstrating interactions

To demonstrate the interactions to front-end developers, I built a click-through prototype in Marvel app that shows end-to-end interaction.

Users will answer the prompted question by providing either the category of courses or the software that they would like to learn.

In this example, a user wants to learn about "Fancy graphs" with "Excel". Completing the prompt will then trigger a search to display a collection of related contents below.



Phase Three: Critique, Tweak, visual design

Stage Page_0505-03.png
Stage Page_options-01-04.png
Stage Page_0505-01.png