UX design cycle for Landing Page
Landing page is design project, consisting of both equal marketing and UX parts.
Usually professionals are focused on the marketing part, but in this article I’m curious to focus on process of creating one-page site from the point of view of user experience research.
I want to explain usual UX process in the context of landing page design. Main difference with application design is that the landing is a one-time product usually. The user will not go there regularly so he will not be able to learn the interface. Every UX process usually iterative and need user feedback to make correctives. For landing-page designer make changes after receiving analytics data or did not make it at all. This is not common practice to make user tests for this types of projects.
Plan
Designer can not hold all the elements of full process in the design of the landing page because it is not economically feasible to make expensive one-page web-site. However, modern user have an expectations about comfortable journey at this web projects, so worth doing some research and activities from stakeholder’s side.
In planning, you need to estimate what actions you will do and how much they will cost.
There are 4 main parts for project, which can be repeated:
- Analysis
- Getting user requirements
- Prototype design
- Evaluation
Analysis
Base of analysis is Context of use description — users, goals, tasks, resources, and environments.
Users. You can provide user profiles for main groups. Usually landing page have ONE specific group and this condition is necessary for correct targeting. So you no need to create a lot of descriptions.
Goals. Target user’s goal connecting with service or product provided by web-site. Your target user want to get something, what your product will take.
Tasks. Task model — description of the task and subtasks. But for landing pages at 99% user task is find details and contacts for buying.
Resources. We can also do not think about this, our resources is just time which user spend to web-site. So main designer task in Landing page to reduce this time.
Environment. Physical, social, technical conditions. Who are your users and where are they work with website.
Example of Context of use description
Users. Men or women with average income, interested at personal and professional growth.
Goals. Find a way to personal growth.
Task. Find information about personal coach and his contacts.
Resources. User’s time.
Environment. Physical: House or office. Social: Personal space.
Goals, environment, resources, tasks of users can be presented as As-is scenarios. Scenario — is just narrative description of process, where user achieving a goal. This is description of usual user journey.
Example
Ben interested at personal growth and he finding the way to get special knowledge. Usually he read useful articles and tips in Google and Social Media from his personal computer or smartphone. But personal coach is good option for Ben too, he need to know about price and details at first.
Users can be presented as persona. Persona — is description of fictitious but realistic user.
Example
Ben, 35, Sales manager in local company. Ben living in countryside area near big city. He have a wife and one kid. Ben driving a car to get to the office, he is working in local company. Ben interested at personal growing articles and conferences. Usually he read this materials from office or at home, using personal laptop and smartphone.
Ben have accounts in Facebook, Instagram and LinkedIn, and he have daily activity in this social media.
He is interested about personal coaching for improving his salesman career and achieving life goals. Sometimes Ben watch web-sites of coaches but cannot make a choice.
Tasks also can be presented as User Journey Map. It presenting with diagram or table, which shows user way through web-site and all touch points.
Example
Looking for personal coach. — Google, Facebook, Instagram.
Looking for information about coach. — Bio. Certificates, articles about this professional. Bio. Students profiles.
Gets lessons price information. — FAQ section on web-site. Contact form. Direct call. Message in social media. Direct e-mail.
Contacts with coach. — Contact form on web-site. Direct call. Message in social media. Direct e-mail.
Requirements
Thats really hard to configure All requirements at once, so usually UX professionals define user needs at start. User needs — what user need to do to achieve his goals.
User requirements — what interface should do for user so that he reaches his goals.
Market requirements — what interface should do for maximizing business opportunities, sales.
Organization requirements — rules from organization, can be based on regulatory documents.
Example
User need: User should to see phone number and e-mail address.
User requirements corresponded to this user need:
1. At top of the page user should to see link to “contacts” block.
2. Contact details must be shown in the footer.
Organization requirement corresponded to this user need: If client write an e-mail, manager should ask client about phone call.
At final of this action we have a list of requirements.
Example:
User requirements:
- Page should to show information, bio and certificates.
- Articles about coach presenting by links to other resources.
- Site have FAQ section.
- Site have section about students with student’s background and results to compare.
- At top of the page user should to see link to “contacts” block.
- Contact details must be shown in the footer.
- User should be able to use contact form for asking the question.
- In content part should to add block about pricing. How price is calculating.
Market requirements:
- The colors used on the website must be bright.
- Website must use HQ photos of coach.
Organization requirements:
- If client write an e-mail, manager should ask client about phone call.
- Lead manager should not change to one client.
Design
Starting with information architecture, continue with prototyping (low-fidelity to hard-fidelity).
/Use scenarios is no matter in this case, because they have same structure for every landing page. User working with web-site to get order./
Information structure is more important in this case than use scenarios. Very important to define content and arrange it in correct order, because it affects to sales. But we will not talk aboutmarketing and sales part in this article.
Also, from my experience, customer can not understand low-fidelity prototype, so you can make low-fidelity prototype like pencil sketch for your needs and present ready to develop high-prototype to your customer or stakeholders.
I have 2 free classes about prototype designing in Photoshop. Please check it, easy and free stuff:
https://www.skillshare.com/user/manjuna
Evaluate
Usability test is best method of interface evaluation, but absolutely not useful at landing page design process. Better results you can expect from Usability inspection.
Usability inspection is set of methods, when user experience professionals and experts make observation of interactive system. Sure, you no need to chose all of this list, 2–3 will be enough.
- Heuristic evaluation is the most informal method and involves having usability specialists judge whether each dialogue element follows established usability principles (the “heuristics”).
- Heuristic estimation is a variant in which the inspectors are asked to estimate the relative usability of two (or more) designs in quantitative terms (typically expected user performance).
- Cognitive walkthrough uses a more explicitly detailed procedure to simulate a user’s problem-solving process at each step through the dialogue, checking if the simulated user’s goals and memory content can be assumed to lead to the next correct action.
- Pluralistic walkthrough uses group meetings where users, developers, and human factors people step through a scenario, discussing each dialogue element.
- Feature inspection lists sequences of features used to accomplish typical tasks, checks for long sequences, cumbersome steps, steps that would not be natural for users to try, and steps that require extensive knowledge/experience in order to assess a proposed feature set.
- Consistency inspection has designers who represent multiple other projects inspect an interface to see whether it does things in the same way as their own designs.
- Standards inspection has an expert on an interface standard inspect the interface for compliance.
- Formal usability inspection
At the end I want to say that landing-page is full of value interactive system and it deserves a full UX-process with all steps of design cycle. Usually UX professionals concentrate just at user interface design part and ignore researches and evaluation. There are a lot ways to make landing page more complex and useful for users, for example price calculator or interactive help. With a quality approach, the project can be an effective tool in the hands of a marketer and businessman.
Literature
