8 UX Projects

What is UX?

User experience (UX) design is a broad term used to explain all aspects of a person’s experience with a digital system, including the interface, graphics and physical interaction. It also refers to the application of user-centered design practices to generate cohesive, predictive and desirable designs based on holistic consideration of users’ experience. To iiD, UX also includes information architecture (IA), the art and science of structuring and organizing the information in products and services, supporting usability and findability.

iiD does UX design as a key part of our strategy phase of website and app design and development projects. In this deck, we’re presenting 8 UX projects as samples of our thinking and creative process…

2

8 UX Projects

1.  Health Catalyst – UX, content and visual design

2.  Gallo Wines –UX and build for responsive design

3.  ADP My Aline –UX & visual design

4.  Visa Offers – UX for desktop and mobile

5.  Yammer – Social Profiler UX and visual design

6.  Visa goConnect – UX for intranet site

7.  Avengers Facebook App – UX and visual design for app

8.  yurbuds Go Beyond App – UX and visual design for mobile app

3

4

Case Study #1: Health Catalyst UX for B2B Website

iiD collaboratively developed a website UX, design and build that reflects the startup’s mission to transform healthcare.

Health Catalyst –UX and Visual Design

5

Health Catalyst is a leader in the transforming healthcare data analytics industry. With a quickly emerging market and competitors both large and small, the firm decided it needed a rebrand across all channels. iiD began with a brand platform to establish a clear identity and differentiation. iiD then collaboratively developed a website, collateral and brand story that reflects their mission to transform healthcare.

Health Catalyst president Dan Burton explained, “I love the new web site—it is an absolute order of magnitude improvement from where we’ve been! So exciting, so well done, so professional. It’s brilliant.”

Health Catalyst – Homepage Wireframe

6

Home Page

Created a UX for a dynamic B2B marketing approach that allowed the carousel to feature strong visual promotions while case studies gave the firm credibility.

Important to the UX was a clear call-to-action to drive sales leads through scheduling a demo.

Health Catalyst – Why Catalyst Wireframe

7

Why Catalyst

As a first stop on the global navigation, “Why Catalyst” gave prospects concise but strong messages about why the firm was the right partner.

A brand movie, demo banner and case studies were key drivers on the page.

Health Catalyst – Company Page Wireframe

8

Company Page

An extremely important UX challenge was to define what would be the key components and layout of the company page.

Highlighting the leaders of the firm and the history of the company was first on the list.

Supporting content on the side bars helped give the page a richer story.

Health Catalyst - Website

9

BEFORE AFTER

Health Catalyst - Website (BEFORE)

10

BEFORE

Prior to working with iiD, the firm had a text-heavy, static website that did not capture the innovative, dynamic nature of the brand nor clearly explain the benefits they deliver to their IT clients in the healthcare networks. The website was also lacking in design, copy and functionality to drive leads and sales.

Home Page Team Value

Health Catalyst - Website (AFTER)

11

AFTER

iiD developed a branded website that better positioned the company and gave the innovative design to match their vision for healthcare. We carefully considered user flow from consideration to conversion (request a demo). Text-based content and brand essence movie built a compelling story around benefits-focused messages.

Home Page Team Why Catalyst

12

Case Study #2:

Gallo - Responsive Site & Wine Tool iiD conceived a UX design and site build to make the world of Gallo wine more accessible to a variety of wine drinkers and levels of wine know-how. We created an interactive wine tool to navigate wines by color, taste, occasion and food type while designing as responsive web design for all devices.

Gallo – Wireframes for Tool

13

User Experience Captured Through Detailed Wireframes

• Used the wireframing (UX) process to identify core features of the innovative wine tool

• Collaborated with brand team to iteratively produce a UI before moving on to visual design phase

Gallo - Responsive Wine Site

14

Website and Tool User Experience

• We created the UX and developing the brand website for Gallo Family Vineyards

• Strategically, we designed special interactive tools to allow users to search for the right wine to suit their lifestyle

• The demographic uses mobile heavily so we are developing a responsive layout to allow one site to be accessed on any device.

Desktop Mobile

Gallo – Before & After

15

BEFORE AFTER (responsive – desktop & mobile)

About Gallo

Home Page

Wine Tool

Gallo - HTML5 Interactive Wine Tool

16

The mobile view of the site allows touch-based swiping interactivity to give the website a native app feel .

Through the use of HTML5, we created an interactive experience for users of various wine know-how to to intuitively choose the right wine.

Desktop Mobile

17

Case Study #3:

ADP UX & Design for Website

ADP asked iiD to design a user experience and visual design to motivate payroll and cash card members to fully leverage ADP Aline services through a simple and interactive experience. Top priority was to take advantage of ADP’s unique financial data to help people save and plan their finances.

ADP My Aline – Website

18

Website and Tools Experience

• We created the UX and visual design of ADP member website

• The site UI was designed to help members after login make the best use of their payroll statements and cash card activity through interactive graphs and simulators.

• The visual design system gave ADP a fresh and friendly human feel to invite members in to the site experience.

ADP My Aline – Site Map

19

Site map was created to clearly show the user flow and site structure to inform the navigation of the site

ADP My Aline – Wireframes

20

User Experience Captured Through Detailed Wireframes

• Used the wireframing (UX) process to identify core features of home page, simulation tools and statements

• Identified different UI conventions to be used in the visual design and development

ADP My Aline – Home Page Variations

21

iiD delivered 3 look & feel directions as seen in these homepage designs

ADP My Aline – Simulation Tools

22

The site used simulation tools to visualize a member’s payroll statements and cash card activity intuitively.

23

Case Study #4:

Visa Offers Visa tasked iiD with providing a pre-login and post-login UX designs for their new Visa Offers marketing site. The goal was to make the experience device agnostic by providing both desktop and mobile views.

Visa Offers UX for Desktop

24

iiD provided two possible UX directions for the pre-login home page, simple and focused approach with icons and a long scrolling style page for contemporary Facebook-style scrolling.

Visa Offers UX for Desktop

25

The post-login page UX was designed to give Visa Offers members a great deal of information on deals and their own offers usage.

The map interface was used to drive local offers in a more visual way.

Visa Offers UX for Mobile

26

The results of our user experience design work was a fully flushed out navigation and layout system that was smoothly implemented and has proven a great great success for member conversion across devices.

be smart

27

Case Study #5:

Yammer Social Profiler & Lead Gen Tool

The challenge put forward to iiD was how to help Yammer educate company managers on the value of social media engagement to company while generating new leads for the Yammer sales team.

Yammer – Wireframes

28

Sample form wireframe Sample profile results wireframe

Yammer – Social Profiler and Lead Gen Tool

29

Yammer is a social network platform built for companies to collaborate internally. The challenge put forward to iiD was how to help Yammer educate company managers on the value of social media engagement to company while generating new leads for the Yammer sales team. iiD’s solution was an engaging interactive survey and advice platform called the Social Media Engagement Profile that helps managers produce a unique “profile” mapped to industry best practice for the level of social media engagement of their company. After completing the survey, a customized report is generated showing areas that company can improve their social media engagement. Users are asked to give contact information which combined with the data collected in the survey is used by Yammer’s sales team to communicate with the new prospect.

Yammer – Social Profiler and Lead Gen Tool

30

HTML5 interactive UI modules created an experience well beyond a simple form. Illustrated visuals (kite in cloud) move across the screen as slider is interacted with.

Visual feedback was given through color bars as users toggle yes/no switches creating a fun interactive experience driving users to the end of the form process.

31

Case Study #6:

Visa Go Connect Intranet

The Visa Marketing Capabilities and Engagement team’s top UX objective for goConnect was to make the site the central portal for all Visa Marketing.

Visa goConnect Intranet

32

The Visa Marketing Capabilities and Engagement team’s top objective for goConnect was to make the site the central portal for all Visa Marketing.

•  The destination site on the Visa intranet for all Marketers, new and long-term

•  Supportive of the overall objectives around engagement, inspiration, and capability development

•  Flexible and scalable to support a growing and changing Marketing organization

Visa goConnect – Site Map

33

The Visa Marketing organization required a fairly complex intranet site structure in which to easily house a variety of useful marketing content to be accessed by a global marketers.

Color coding and icons were used to help the Visa team easily grasp the depth of the site hierarchy and indicate which pages would need to be added after launch.

Visa goConnect – Homepage Wireframe

34

The structure of the homepage needed to be flexible to allow different levels of prioritization of Visa Marketing news from highest importance (“First Feature”) to lowest (“Second Feature”) and “Latest News.

The UX design can easily scale up or down depending on the volume of content.

Visa goConnect – 2nd Level Wireframe

35

The Second Level page wireframe explained the layout and hierarchy of content for various pages at this level.

Variation occurring in the hero area were called out and explained in the side notes.

Visa goConnect – Regular Content Wireframe

36

For Regular Content, a full set of UI elements were developed to cover any possible content page variation.

These UI elements included subnav, tables, image + paragraph, video module and large image.

This scalable approachable proved useful during design phase when the visual designers drew from this wireframe.

37

Case Study #7:

Avengers Super Awards Facebook App

The Visa Marketing Capabilities and Engagement team’s top UX objective for goConnect was to make the site the central portal for all Visa Marketing.

Avengers Super Awards – Welcome Screen

38

Fans first entered the app through the welcome page which explained how the app worked.

The app gave users the choice of picking the awards to give their friends OR have the app make recommendations.

Avengers Super Awards – Let Us Pick ‘Em

39

The app UX explained how we would use the Facebook API to scrape people's social graph including which pages they liked which can be anything from other brand pages to musical artists.

Avengers Super Awards – You Pick ‘Em

40

In this wireframe, we showed how users could choose from “strengths” of their friends and choose certain people to have the app recommend specific awards such as the “Alpha Driver Award” from Iron Man.

Avengers Super Awards – Visual Design

41

Images of actual design and development of the app

42

Case Study #8:

GO BEYOND mobile training app

The Go Beyond app was created by iiD from UX to code by considering the motivations of highly motivated and social athletes. We developed this app combine competitive exercise with social sharing behavior.

yurbuds GO BEYOND app UX

43

Wireframes and app flow for Go Beyond training app

yurbuds GO BEYOND mobile app

44

Walls menu User profile GPS stopwatch Wallers community

A super inspiring athletics app that focuses on pushing athletes to go “beyond the wall” by providing instant gratification of receiving badges for achieving "Walls" (sports challenges) while being able to share these moments on the spot through social media. Built for iOS and Android.

http://bit.ly/appgobeyond

45

iiD (“ideas in digital”) puts brands in people’s lives by creating meaningful experiences that help people live well, be smart and have fun. We counsel our clients on how to leverage digital channels such as the Web, mobile devices, social media, and other emerging media to engage people, build brand loyalty and build brands for the digital age. The company was founded in 2007 and is located in San Francisco. iiD maps out, designs and develops digital products and services to delight consumers and achieve clients’ business goals. The agency blends the four key elements of success in digital media: strategy, creative, social design and technology. We are an innovative team of strategists, designers and technologists who are extremely passionate about creating forward-thinking brands for a digital world.

want to meet us?

ideas in digital, LLC 1620 Montgomery St. #250 San Francisco, CA 94111 ph. 415-738-0738 info@ideasindigital.com www.ideasindigital.com