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