Insperity design document

INSPERITY’S PEO SERVICE LANDING PAGE

Neil Brown Director, Creative Design | Marketing Bryan.Pawlik Director of Digital Marketing

By Atif Nagi

PROJECT BRIEF Insperity, a trusted advisor to America’s best businesses for more than 27 years, provides an array of human resources and business solutions designed to help improve business performance. Insperity™ Business Performance Advisors offer the most comprehensive suite of products and services available in the marketplace.

22

INSPERITY’S PEO SERVICE LANDING PAGE To design an Insperity’s PEO service landing page based on provided copy, conversion design principles, user centered design processes and Insperity’s brand guidelines.

3

PROJECT OVERVIEW My goal was to investigate and research through stakeholder’s

interviews,

competitive

analysis,

understanding target audience, solution design, and prototype usability test interviews. Based on my findings I will propose the Insperity’s PEO service landing page that would increase the inquiries about the PEO services and lead to a higher rate of completed contact me form.

4

2

RESEARCH

5

RESEARCH

DEMOGRAPHIC & BEHAVIOURS

Primary target audience: Entrepreneurs

Secondary target audience: HR Managers

Tertiary audience: Stakeholders

Gender: Male and female

Gender: Male and female

Gender: Male and female

Age: 35 – 45

Age: 38 – 50

Age: 40 – 50

Company size: Less the 20 employees

Company size: The company is growing

Goals: Insperity’s C-Level management,

Goals: As business grows, their challenges

fast. They are hiring new talent and want to

who are looking for the ways to strengthen

multiply. These entrepreneur wants

keep current employees engaged as well.

their relationship with customers. They want

administrative relief, access to better

They want to reduce payroll, accounting

to engage customers by helping businesses

benefits, reduced liabilities and HR support.

and benefits costs along with employee-

succeed by taking care of the things that

So that they can focus on the core business,

related paperwork that drains their valuable

could be distracting them from the bigger

spend more time doing what they love –

time. They are looking for experienced HR

picture. They are looking for new ways to

growing their business and keep their top

professionals, who can let them free to focus

improve Insperity’s PEO service landing

talent engaged and happy.

on the strategic elements of moving your

page that would increase the inquiries about

company, and your people, forward.

the PEO services and lead to a higher rate of completed contact me form.

6

RESEARCH

COMPETITIVE ANALYSIS I researched ADP, TriNet, Evernext HR, Jumpstart HR, MMC, and Oasis websites.

I believe Insperity’s website is outstanding among it’s competitors. My study helped me to explore solution design.

7

3

EXPLORATION

8

EXPLORATION

CONCEPT BRIEF I am proposing one page parallax solution with secondary menu, which will also serve as website breadcrumbs, and unitizing the current videos. The parallax will help users to explore the content in one page and videos will help them understand the content faster. I believe videos need another creative

REQUIREMENT SPECIFICATION I plan to design a responsive website by using various technologies such as HTML5, CSS and PHP. Landing page

edit and their duration should be under one minute.

The landing page will include: • Overview • Benefits • Services • Features • Testimonials • Contact form • Videos

9

EXPLORATION

IDEATION

Jot notes

*Please ignore typos

10

EXPLORATION

USER SCENARIOS Insperity

PEO

Paid advertising

Social media

Emails

Press/news

Seminars

UXD

Home Insperity’s PEO service landing page

Exploring the online HR service resources U XD

Benefits

UXD

Services

UXD

Features

User is engaged in the program

UXD

Testimonials

UXD

Contact me

11

EXPLORATION

SKETCHES I

used

usability

Option 1: Parallax design design

standards

and

conversion design principles to explore quick design options through sketches. Users can find important information through intuitive navigation affordance, which give predictability to the users.

12

EXPLORATION

SKETCHES

Option 2

13

EXPLORATION

SKETCHES

Option 3

14

4

SOLUTION DESIGN

15

SOLUTION DESIGN

USABILITY DESIGN PRINCIPLES CLEAR

AFFORDANCE

CONSISTENT

The information of the system is straight forward & understandable with clear navigation, simple language (labels), and icons.

I used Explicit Affordance signalled action buttons by language, Metaphor Affordance by using a real-world menu icons as a metaphor.

The consistent use of navigation, labels, language, colors, icons and user interface patterns.

FOCUS

ACCESSIBILITY

WAY FINDING

The UI is singular and focused. It is intuitive because it focuses on basic tasks of persona e.g. PEO Benefits, Services, Features, and Contact form.

Applied W3C standards e.g. high contrast, B/W design, font size readability and visual hierarchy.

Users can find their way by landmark breadcrumbs, well-structured paths, and less choices. They know where they are, what they can do, where they are going and where they’ve been through navigation.

16 16

SOLUTION DESIGN

CONVERSION-CENTERED DESIGN PRINCIPLES ENCAPSULATION

DIRECTIONAL CUES

CONTRAST

The conversion goal is the form, so it’s positioned front, above the fold and encapsulated in a container which allows the critical content above it to connect visually.

There is an arrow positioned at the end of the main content area which directs user gaze to the CTA, and the use of the Insperity green color connects the two elements.

The CTA stands out clearly on the page with a vibrant contrasting brand color.

WHITE SPACE

SCARCITY

SOCIAL PROOF

As user move down the page, her eyes can drop freely through the content blocks. Airy and spacious icons and a minimalist palette combine to make it an enjoyable experience.

The statement, that HR services, technology and expertise you need to catapult your business past your competition, that user should hurry up. We might have to try couple of statements for an A/B test.

Appropriate social proof is used here, focusing on benefits of the services.

17 17

SOLUTION DESIGN

WIREFRAMES Insperity’s PEO service landing page I converted parallax sketch option into digital wireframe by using Axure.

Simplified some features, borrowed elements e.g. top menu from option 2 and added content detail.

I selected parallax option because my primary persona is a tech savvy innovative entrepreneur. I want her to have fairly latest experience and parallax design is also known to be effective at provoking curiosity and directing visitors to effective and subtle calls to action.

http://o1agcm.axshare.com/home.html

18

SOLUTION DESIGN

WIREFRAMES

LAUNCH PROTOTYPE Benefits

Services

19

SOLUTION DESIGN

WIREFRAMES

LAUNCH PROTOTYPE Features

Testimonials

20

SOLUTION DESIGN

NAVIGATION & FORM

LAUNCH PROTOTYPE Sticky navigation

1 2 Anchor link menu also serve as breadcrumbs

Contact me form

FEEDBACK: Thank you for submitting your information. One of our representatives will contact you within 30 minutes or within one business day for emails received on nights, weekends and holidays.

Main menu shrinks on scroll down and expands on scroll up.

3 21

SOLUTION DESIGN

RESPONSIVE WIREFRAME Insperity’s PEO service mobile landing page

22

SOLUTION DESIGN

HI-FI DESIGN

I applied Insperity’s brand guidelines to medium fidelity wireframes and added

Insperity’s PEO service landing page

some details e.g. section titles in Hi-Fi wireframe iteration.

http://a5gxcq.axshare.com/home.html 23

SOLUTION DESIGN

HI-FI DESIGN

LAUNCH PROTOTYPE Benefits

Services

24

SOLUTION DESIGN

HI-FI DESIGN

LAUNCH PROTOTYPE Features

Testimonials

25

6

CONCLUSION

26

CONCLUSION

USER CENTERED DESIGN PROCESS Insperity

PEO

Paid advertising

Social media

Emails

Press/news

Seminars

UXD

Home Insperity’s PEO service landing page

Exploring the online HR service resources UXD

Benefits

UXD

Services

UXD

Features

UXD

Testimonials

UXD

Contact me

User is engaged in the program

1. Research & ideation

3. Competitive analysis

4. Concept evolution

5. Lo-Fi wireframe evolution

Multiple iterations

Multiple iterations

4. User scenario

6. Hi-Fi design evolution Multiple iterations

27

CONCLUSION

UX interactive design process A full UX interactive design process was explored in the Insperity’s PEO service landing page from research, ideation, exploration, define, design, and prototype.

The three-cycle interactive process and multiple iterations helped me achieve effectiveness through user flow interactions, intuitive UI, labels, and icons of the website.

Next steps I would like to perform an expert heuristic evaluation and validate concept design by nano usability tests before final iteration. I would also like to do an A/B test, at prototype stage, between parallax and traditional multipage page design.

28