Interactive illustrative story-telling microsite
| Project Background
FastTrack microsite is owned by the marketing team to put a friendly-looking interface to help subscribers navigate through big collections of services.
FastTrack is a comprehensive tool that includes a great coverage of contents, tutorials, IT-readiness assessment and other types of tools that are geared towards IT pros during implementation, deployment, education and assessment stages of their daily workflow.
| My role & project timeline
- UX designer - Collaborated with business analysts; provided visual guideline to front-end developers;
- Visual designer and illustrator - Owned the design and collaborated with copywriters to incorporate content into illustration;
- Project duration: 3 weeks
| The Challenge
The challenge is to seamlessly connect existing content with intriguing visual presentation, without remapping current site architecture.
This is phase-one development of a long-term marketing campaign. The priority is to set a friendly tone to the product with curated creative direction.
My task was to create a visually appealing one-page branding site that features three main collections of services and tools.
| Design Approach
Phase 1: Game plot & Ideation
I obtained the first draft of copy from copy team, and realized that the content sounded vague and abstract. Sentences were like "chart your course", and they could be interpreted with different meanings in other contexts. This seemed to me, was both the challenge and the opportunity of the project.
The challenge was, undoubtedly, that how to visualize the abstract pieces of copies into compelling visual stories. The business requirement also emphasized on "constructing content that feels on-brand, and yet still applicable to a wide range of services in this software family", which further challenges the compatibility of my upcoming design.
How can I give office software a friendly face?
The opportunity was in disguise of difficulties. As soon as realizing the vagueness of the content could actually play in my advantage, I started to write down analogies that are popular and familiar among tech gurus. Meetings, graphs, demonstrations, presentation screens, office environments are all common topics or objects for modern day's technology workers. Delivery, distribution, transition, vision have been heavily used in not only as project management jargons, but also have meanings in non-tech life, which gives me opportunity to play the concept with visual elements and story-based scenes.
| Robots and other analogies
My first several analogies were focused on robots. Each section would be characterized into a bot assigned with a themed-task. For example, a spot illustration would show an "implementation-bot" who automates the implementation process for the team. Later on, I explored other workplace-related analogies such as factories, workshops, studios and community centers.
However, I did not spend all my time on designing details of robots, or giving them funny names. Instead, I mapped out where and what potential illustration would be, and made sure CTAs, links, and important information is placed with proper readability. Below is a wireframe for workplace-related analogies and incorporated links at the end of the section.
| Critique, Refinement, set, draw!
After several internal reviews with my manager, we decided to move on with environmental/workplace analogies that each topic of content would "happen" in a department that locates inside of a tall building. Users gets a side view of the building when scrolling down the page to navigate vertically. It gives users a sense of participating and observing work activities inside of certain department.
Overall, this parallax-powered one-page microsite would be built in a "building" that contain three "main floors" for three topics and six illustrated scenes to demonstrate six content blocks.
| illustration design within brand visual guideline
| Iteration and Refinement
| Micro interaction and animation
I designed the beginning and end stage for demonstration purpose for page animation. Most of the page animation was subtle, and used linear movement to just add a touch of fun without interrupting users' reading experience.
Below are the beginning and end stages of each section when users scroll down the page.