1 of 33

PROJECT� UTOPIA

PROGRAM PAGE RE-DESIGN

2 of 33

PROJECT GOALS

Answer questions potential students are asking
Display content with digestible design with purpose
Create an engaging, reactive user experience
Address both current and future legal compliance needs

INTRODUCTION

WHAT’S THE POINT?

Page 2

PROJECT

UTOPIA

PROGRAM PAGES

Our current program pages do not address many of the questions our potential student

How much will it cost? How long will it last?

When can I start? Where can I work?

Are there jobs? What will I make?

What’s the schedule look like? Can I get financial aid?

The last major challenge is to preemptively address what we will be legally bound to say in an engaging way that does not take away from the value of the page. Currently, the compliance requirements are either hidden in disclaimers or somewhere deep in text (which our users see as TLDR). The goal is to increase transparency through content & design, being open with the student and aware of compliance needs.

Transparency increases trust. Trust increases inquiries. We use accreditation to attempt to build this trust, but do little on our pages to do so.

3 of 33

PROBLEM

Current program pages

Lack of scrolling
Little fluidity
No microinteractions
UX is not engaging & reactive

INTRODUCTION

WHAT’S THE POINT?

Carrie Cousins, at Design Shack

“If a random user landed on your website right now, would the message or goals of the interface be clear? ”

Page 3

PROJECT

UTOPIA

PROGRAM PAGES

What’s the point? Why are we doing it at all?

READ QUOTE

Pause

While we do answer many of the questions our potential students are asking, it is not done in a way where the user can scan the page and immediately understand “This is what I’m getting in to.”

The content is not immediately available and seems “hidden” below the fold. This feeling is increased by our banded design.

There is a lack of fluidity in the content. Due to the design, it feels like many separate conversations instead of one important one. While banding does allow content to be digested in sections, it creates separation from conversation to conversation.�
On top of this, our current pages have little to know micro-interactions or interactive aspects to guide the user.

Microinteractions are a response (animation, change in color, background change) to user input (hover, click, task completion, etc.)
Think of how a simple thing like Earl made everyone smile. We instantly liked the page more.

A more engaging, fluid design will increase the feeling that we are being open and honest about our programs. Transparency increases trust. Trust increases inquiries.

4 of 33

GOAL

Part 1 of 2 – Current Content

Get the user to view ALL page content
Create fluid, continuous flow throughout the page
Display content with digestible design with purpose
Create an engaging, reactive user experience

INTRODUCTION

WHAT’S THE POINT?

Carrie Cousins, Design Shack

“These are the details that make users love or hate an app or website.”

Page 4

PROJECT

UTOPIA

PROGRAM PAGES

While we do answer many of the questions our potential students are asking, it is not done in a way where the user can scan the page and immediately understand “This is what I’m getting in to.”

The content is not immediately available and seems “hidden” below the fold. Banded design increases this feeling.

There is a lack of fluidity in the content. Due to the design, it feels like many separate conversations instead of one important one. While banding does allow content to be digested in sections, it creates separation from conversation to conversation.�
On top of this, our current pages have little to know micro-interactions or interactive aspects to guide the user (quote)

Microinteractions are a response (usually through animation) to user input (hover, click, task completion, etc.)
Think of how a simple thing like Earl made everyone smile. We instantly liked the page more.

A more engaging, fluid design will increase the feeling that we are being open and honest about our programs. Transparency increases trust. Trust increases inquiries. We use accreditation to attempt to build this trust, but do little on our pages to do so.

5 of 33

PROJECT PLAN

Utopia NOW!

Immediate solution to lack of scrolling due to banding
Begin using micro expressions to guide the user (animated CSS & SVG)

Utopia 1.0

Temporary solution for current content
Redesign & organize current program page content
Begin transition to what will be the final overall page design

Utopia 2.0

Creation of the content the user truly wants & needs
Create content to preemptively address future compliance needs
Design content for smooth, easy reading & understanding
Design with best UX in mind
Create an engaging online environment

INTRODUCTION

WHAT’S THE PLAN?

Page 5

PROJECT

UTOPIA

PROGRAM PAGES

Project completion in 3 steps�This allows for immediate fixes as well as overall change�
Changes will address needs for both content & UX to create clear, open communication�
Utopia NOW! - Solve the immediate issue of users not scrolling below the fold�
Utopia 1.0

Furthers that solution by eliminating the banded design for a more open, fluid design with current content.
Begin changing content to match new UX design
This is the start of the final solution for page design

Utopia 2.0

Create the content that truly answers the questions our users have
Preemptively strike at future compliance needs by including this content beforehand
Expand upon the new design with the new content
Test this design from Utopia 1.0
Continue clear, transparent communication structure
Design with UX and microinteractions in mind
The result will be engaging, interactive program pages which give perspective students the tools they need to make a decision, interaction they need to feel safe, and opportunity they need to move forward with their career in health care

6 of 33

SCOPE – UTOPIA 1.0 (CURRENT CONTENT ONLY)

New design of current content

Design research
Organization & hierarchy
Digestible content
Microinteractions

Create supporting content

Adjust current content
Content creation (videos, text, etc.)

Plan testing

Old vs. New Pages
New design elements

Development & implementation

Content team - Front end
Development team - Implementation�

INTRODUCTION

WHAT’S THE RESULT?

Page 6

PROJECT

UTOPIA

PROGRAM PAGES

Pause

For now, we are only addressing the current content on the program pages

Broken down into 4 major sections�

1^st - New design of current content

The goal of this project is to create newly designed Program Pages featuring the same content available on these pages now.�
This is broken up into research, organization & design.�
Design done in a way where the content is easily digestible�
We’ll begin using microinteractions to guide the user along in the experience�

2^nd - Create supporting content

The new design should create one, fluid conversation while keeping the content in easily digestible segments.

While we will be using the same content, we recognized that there may need to be adjustments to what is currently on these pages as well as visual additions to support the new design such as images and video.�

3^rd - Plan testing

As with all things Carrington, we’re not just doing this for the fun of it. We plan to test out how the new pages work as well as attempt to perfect the design through testing of different assets.

Last – Development & implementation

Content team – front end
Development team – implementation on website

Transition: The good news it that we’ve already begun implementation of new strategies.

7 of 33

CURRENT SOLUTION

Scroll button (a.k.a. Earl)

Get the user to scroll
Unchanged page layout
Introduce microinteractions
CSS & SVG animation
Named Earl! …ask Todd
Earl is already implemented

UTOPIA NOW

MEET EARL

Dan Saffer, Director of Interaction Design at Smart Design

“If you care about user experience, you should care about microinteractions”

Video Example – Click to Play

Page 7

PROJECT

UTOPIA

PROGRAM PAGES

8 of 33

VIDEO HERO IMAGE

Quick product preview
Gets user excited about the product
Removing audio reduces file sizes
<30 seconds
Easy to test

STRATEGY

VIDEO HERO IMAGE

Simone Sala, UX Designer at Sitepoint

“In product/service focused websites, background videos can be used to give a sense of the product in action.”

Video Example – Click to Play

Page 8

PROJECT

UTOPIA

PROGRAM PAGES

9 of 33

VIDEO HERO IMAGE

Testing

Image vs Still
CTA locations
Different video content

STRATEGY

VIDEO HERO IMAGE

Maggie Crowley, Unbounce

“Like anything else you implement on a page, you’re going to want to test that puppy [video] out thoroughly.”

Video Example – Click to Play

Page 9

PROJECT

UTOPIA

PROGRAM PAGES

10 of 33

CARDS AS NAVIGATION

Display brief overview
Secondary page navigation
Separates page into �absorbable pieces
Responsive layout for mobile
Use microinteractions

STRATEGY

CARD NAVIGATION

Jerry Cao, UXPin

“People seek out information quickly, and cards serve it up in perfect bite-sized teasers – regardless of device.”

Video Example – Click to Play

Page 10

PROJECT

UTOPIA

PROGRAM PAGES

11 of 33

ACCORDIONS

STRATEGY

ACCORDIONS

Concept our users are familiar with
Gives the user �content control
Makes content �more visible
Increases interactivity
Segments information
Doesn’t jeopardize�the conversation

Carrie Cousins, Design Shack

“Today’s user is accustomed to being in control of his or her experience.”

Video Example – Click to Play

Page 11

PROJECT

UTOPIA

PROGRAM PAGES

The last of the strategies we’re looking at is using accordions to control the conversation.�

READ QUOTE

Pause

Accordions are used on websites to store content under a title which is expanded when clicked.�
This is an experience that our audience is familiar and comfortable with. Many of the sites our users visit use this tactic.

Forever 21
Target,
Old Navy
Walmart

Accordions are used throughout ecommerce and product sites to give the user control of what information he or she wants to view.�
This strategy also allows for the user to more easily view what content the page provides due to the collapsed titles.�
This allows for a smoother, more continuous conversation while compartmentalizing information into easy to read segments

Transition: We’ve implemented all of these strategies into a new program page design with a clear conversation.

12 of 33

UTOPIA 1.0

SOLUTION

WELCOME TO UTOPIA!

New Design & Clear Conversation

Video Hero Image

You can do this

Program Name with CTA

It starts right here

Clickable Cards

Some top issues

Interactive Map

Here’s where it happens

Expandable Accordion Options�Let’s dig a bit deeper

Tour CTA band

Come experience it for yourself

Accessible Legal & Compliance Section

Oh, and don’t forget

Page 12

PROJECT

UTOPIA

PROGRAM PAGES

13 of 33

VIDEO HERO IMAGE

SOLUTION

WELCOME TO UTOPIA!

30 sec. looped video
Program Highlights
Creates excitement
Quick access to other videos (Day in the Life & What Will I Learn series)

Page 13

PROJECT

UTOPIA

PROGRAM PAGES

14 of 33

VIDEO HERO IMAGE

SOLUTION

WELCOME TO UTOPIA!

Page 14

PROJECT

UTOPIA

PROGRAM PAGES

15 of 33

PROGRAM NAME WITH CTA

SOLUTION

WELCOME TO UTOPIA!

Program title, cert/degree, & start date
Prominent, appealing CTA
When scroll past CTA, header CTA animates

Page 15

PROJECT

UTOPIA

PROGRAM PAGES

16 of 33

PROGRAM NAME WITH CTA

SOLUTION

WELCOME TO UTOPIA!

Page 16

PROJECT

UTOPIA

PROGRAM PAGES

17 of 33

CARDS – PROGRAM SNIPPETS

SOLUTION

WELCOME TO UTOPIA!

Introduction to content below
Brief info on important issues
Use of iconography
Shows clickable on-hover
Directs to corresponding content

Page 17

PROJECT

UTOPIA

PROGRAM PAGES

18 of 33

CARDS – PROGRAM SNIPPETS

SOLUTION

WELCOME TO UTOPIA!

Page 18

PROJECT

UTOPIA

PROGRAM PAGES

19 of 33

LOCATIONS

SOLUTION

WELCOME TO UTOPIA!

Similar to Hungry Hungry Hippo
All locations with program
Interactive Google Map
Campus info & on location on map when selected

Page 19

PROJECT

UTOPIA

PROGRAM PAGES

20 of 33

LOCATIONS

SOLUTION

WELCOME TO UTOPIA!

Page 20

PROJECT

UTOPIA

PROGRAM PAGES

21 of 33

ACCORDIONS

Compress sections
Titles, icons & “+”
On expand, title centers, lines expand, color changes, and “+” changes to “-”

SOLUTION

WELCOME TO UTOPIA!

Page 21

PROJECT

UTOPIA

PROGRAM PAGES

22 of 33

ACCORDIONS

SOLUTION

WELCOME TO UTOPIA!

Page 22

PROJECT

UTOPIA

PROGRAM PAGES

23 of 33

ACCORDIONS - CAREER

SOLUTION

WELCOME TO UTOPIA!

Page 23

PROJECT

UTOPIA

PROGRAM PAGES

24 of 33

ACCORDIONS - PROGRAM

SOLUTION

WELCOME TO UTOPIA!

Page 24

PROJECT

UTOPIA

PROGRAM PAGES

25 of 33

ACCORDIONS – �SUPPORT

SOLUTION

WELCOME TO UTOPIA!

Page 25

PROJECT

UTOPIA

PROGRAM PAGES

26 of 33

TAKE A TOUR CTA

SOLUTION

WELCOME TO UTOPIA!

Uses video background or still
Completes the conversation with a CTA
Full width background demands attention without seeming intrusive

Page 26

PROJECT

UTOPIA

PROGRAM PAGES

27 of 33

TAKE A TOUR CTA

SOLUTION

WELCOME TO UTOPIA!

Page 27

PROJECT

UTOPIA

PROGRAM PAGES

28 of 33

LEGAL & COMPLIANCE

SOLUTION

WELCOME TO UTOPIA!

Addresses the need for compliant content
More visible than disclaimers or “hidden in message” content
Makes the conversation transparent without having it seem “ugly”

Page 28

PROJECT

UTOPIA

PROGRAM PAGES

29 of 33

LEGAL & COMPLIANCE

SOLUTION

WELCOME TO UTOPIA!

Page 29

PROJECT

UTOPIA

PROGRAM PAGES

30 of 33

WHERE WE NEED TO BE

Answering questions potential students are asking
Displaying content with digestible design with purpose
Creating an engaging, reactive user experience
Addressing both current and future legal compliance needs

CONCLUSION

WHAT COMES NEXT?

Carrie Cousins, Design Shack

“What does trust have to do with web design? �Quite simply, everything…Design with clarity & be transparent.”

Page 30

PROJECT

UTOPIA

PROGRAM PAGES

So what comes next?�

READ QUOTE

Pause�

We need to get to a point where the user user can scan the page and immediately understand “This is what I’m getting in to.”�
While the new design addresses the layout part of this conversation, more content is needed to complete it.

Some questions we need to address:

How much will it cost? How long will it last?

When can I start? Where can I work?

Are there jobs? What will I make?

What’s the schedule look like? Can I get financial aid?

The last major challenge is to preemptively address what we will be legally bound to say in an engaging way that does not take away from the value of the page. Currently, the compliance requirements are either hidden in disclaimers or somewhere deep in text (which our users see as TLDR). The goal is to increase transparency through content & design, being open with the student and aware of compliance needs.

Users love transparent websites. Transparency increases trust. Trust increases inquiries. We use accreditation to attempt to build this trust, but do little on our pages to do so. The entire goal of Utopia is to fix this problem.

31 of 33

PROJECT PLAN

Utopia NOW!

Immediate solution to lack of scrolling due to banding

Utopia 1.0

Temporary solution for current content
Redesign & organize current program page content
Test against current page layouts
Test video vs still hero backgrounds
Test CTA locations

Utopia 2.0

Creation of the content the user truly wants & needs
Combination of new page design and new content (ie. video, testimonials, social links content)

CONCLUSION

WHAT’S THE PLAN?

Page 31

PROJECT

UTOPIA

PROGRAM PAGES

32 of 33

HERO IMAGE & CTA TEST EXAMPLES

APPENDIX

TESTING

Test 1

Test 2

Test 3

Test 4

Page 32

PROJECT

UTOPIA

PROGRAM PAGES

33 of 33

COMMENTS / QUESTIONS

THOUGHTS?

Page 33

PROJECT

UTOPIA

PROGRAM PAGES