UX and UI Checklist for (Re)Launching a Website — 12 Activities to Consider — PART 1

Introduction

As every launch or relaunch of a website, in addition to clear and defined objectives, it is necessary to pay attention to the activities that need to be developed and planned. Activities for launching or re-launching a website cross several areas of digital: from UX activities, through UI and Content activities, and SEO or Analytics activities.

Obviously, from the outset, I am considering that the Objectives of the Website (launch or re-launch) have already been or are defined with recurrence and support from UX Research activities, namely in the Study of Personas; Study of Customer Experience (pain points and love moments) and Benchmarking and UX/UI Best Practices.

In this article, which will be the first of four, I will list which UX and UI activities must be taken into account when launching or re-launching a website.

1. (Re) Definition of the Information Architecture

• What it is: If we look for the etymological meaning of the word “Architecture” we see that it means “first builder”. And in UX/UI, its meaning is also no different. Information Architecture as a UX/UI activity for (re)designing a website means creating the bases and foundations of the website’s information system and the way in which they are presented and how they interconnect and behave in response to user actions. user.
• What is it for: The Information Architecture of a website is defined as pages on the website Information architecture is an activity that can and should also have the respective deliverable. Furthermore, it is an activity that must be thought of together with the SEO and Content areas, because in the first case it will be necessary to create the sitemap of this architecture to place either a) the root of the website’s source code; 2) compare it with the sitemap created automatically via the website’s CMS plugin. With regard to the Content area, simultaneously with the SEO area, they will be responsible for analyzing and verifying that the keywords used in the sitemap are in line with what users are searching for.
• What are its components: Since the Information Architecture is a system, it is elementary that it is composed of several processes, namely: the organisation processes, the labelling processes; navigation processes and search processes. These 4 processes must be worked on simultaneously.
• Who should be involved: UX, Content, and SEO teams
• Deliverables: The main deliverable of the Information Architecture for the (re)design of a website is the sitemap, which is nothing less than a map with the hierarchy of the different pages of the website as well as the denomination of their content types, particularly at the title level.

2 — Creation of the User Flows

• What it is: User flows are a way of graphically representing the path or paths that different users (personas) will “travel” when browsing the new or redesigned website. And there are 3 types of user flows, all of which represent activities, but some can be more rudimentary than others in the sense that we can just be talking about a simple flowchart (task flow) or a flowchart related to wireframes already made (wire flow) or exactly the same thing, but for each of the personas (user flow).
• What it’s for: I, personally, consider there to be 2 reasons for having to design user flows: 1 — to understand if the Information Architecture is well thought out or should be revised; 2 — Ensure that the new or redesigned website has addressed all the activities that we have proposed and that we want the user to have, because it is a need for him.
• What are its components: If we are talking about tas flows, the components are those of a typical and illustrative flowchart of an activity. If we are talking about wire flows, the components are the different wireframe screens connected together. The components of the user flows are identical to those of the wire flows, but they are inherent to each of the previously studied personas, since there may be different navigation use cases.
• Who should be involved: UX and SEO teams, if needed
• Deliverables: The main deliverables are the different user flows of all or the main actions that users can do on the website.

3 — (Re)Design of the Wireframes

• What it is: The wireframes are the “skeletons” of what the new website will be, be it new in the strict sense of the word, be it renewed. oThe wireframes give an overview of the structure of each of the website’s pages — information architecture — the layout, the different user flows and functionalities that will emerge from the users’ behaviour.
• What it’s for: Wireframes serve essentially two purposes:
• Present the structure, content and layout of the website (images and copy and some interactivity) developed based on what the users’ needs are.
• We reduce the costs of design — UI — and development — DEV — in the design or redesign of a website and, therefore, in the “poorest” version, pencil, paper and rubber are used to design the skeletons of the website — wireframes.
• What are its components: There are no components of the wireframes of a website. But, I can warn you that you don’t have to be a designer to produce wireframes. It is necessary to know how to draw “circles”, “squares”, “triangles”, “semi-lines”, to know how to write and little else.
• Who should be involved: UX and SEO and UI teams, if needed.
• Deliverables: The wireframe itself on paper or in a software file such as Axure, Balsamiq, Figma and similar.

4 — Design of the Prototypes

• What it is: Prototypes are nothing more than wireframes “on steroids”. That is, they are wireframes that have already been more worked on in the sense of already having some graphic and color component, already having more animations and being much more interactive.
• What is it used for: The great and main object of designing prototypes is to test them with end users, since prototypes as a rule, and after the entire phase of studying the needs of users, must be very identical in terms of Information architecture, user flows and interactivity, to the final product — UI.
• What are its components: There are no major components in a prototype as it is almost the final product. We can have prototypes of the website, of an app.
• Who should be involved: UX teams, and if necessary UI teams
• Deliverables: The main deliverable is the prototype itself, made in Figma or Sketch, for example.

5 — Definition of the UI — User Interface

• What it is: The user interface is nothing more than the pure and hard “drawing” of what the wireframes and prototypes were. It is to give life, or rather, to give fire to the play.
• What it’s for: In this checklist of 12 UX/UI activities that we should take into account when (re)designing a website, the design of the user interface — UI — is the final stage of the process, before it is passed on to the developers. It’s like “painting” the exterior walls of the house.
• What are its components: If we are talking about implementing a Design System, there are many associated components. For example, there are the Design Principles, the Logos, the iconography, the typography, the layout with grids and breakpoints, illustrations, animations, and the different graphic components per se — buttons, tables, charts, overlays, lists….more resources to and from consultation. If that’s not the case, the components probably boil down to the color palette and typography and logos and little else.
• Who should be involved: UI teams and potentially, depending on the work and deliverable, UX Writing teams.
• Deliverables: If we are talking about UX/UI teams and other digital areas in a Company with maturity and advanced digital culture, the deliverable can and should be a Design System or an update to the Design System. If, on the contrary, the company does not have this maturity, the deliverables can go through a Style Guide where the main and secondary colors to be used, typographic family, tone of voice, logos and their dimensions and little else can be broken down.

6 — Update and/or Creation of the Design System

• What it is: A Design System is a set of standardized rules that allow companies to scale design themes, reducing team effort, costs and redundancy, since everyone works following a methodology that allows them to have a common visual language and consistency across digital assets and channels.
• What it is for: As seen above, the Design System is for teams to operate according to a common visual language and build consistent digital assets for the different channels in which the Company has a presence. Obviously this will allow companies to reduce the time to market or the time to launch of their digital products.
• What are its components: The components of a Design System vary from company to company, but in general we can have: the Fundamentals of the Design System section, which will include, among others, the Objectives and Principles of Design; the Components section, which will be the core of the Design System, with all the graphic elements/components necessary for the design and scaling of digital assets; Sources of Study/Research.
• Who should be involved: UX, UI and other teams if needed
• Deliverables: ZeroHeight Repository, for example with all the elements that make up a Design System and Figma Library, for example with all the graphic components that form the basis of the Design System.

7 — Definition of Accessibility Questions

• What it is: Accessibility is designing and developing digital assets always bearing in mind the inclusion of all types of users, namely users with vision, cognitive, deaf, physical, verbal, neuropsychological problems, but not only. For example, users without this type of problem, if they have to view a website on their smartphone that is not adapted for this purpose, it is also a matter of usability.
• What it’s for: The purpose of design for all types of users is inclusion. It is no wonder that all the vast majority of Portuguese public websites are designed with these rules in mind. For example, the website of the Presidency of the Portuguese Republic.
• What are its components: na
• Who should be involved: UX, UI and, if necessary, Content and SEO teams
• Deliverables: The accessibility specifications can be described in the final specifications document for developers.

8 — Pages Paths Specifications

• What it is: The pages paths mean which navigation the user will have or will do when visiting the website.
• What is it for: Page paths are for users to navigate throughout the website.
• What are its components: Users can browse the website in 3 ways: Global Browsing — done through the main and even secondary menu of the website; Hierarchical Navigation — made through the specific menus of each page; and Local/Circular Navigation — Done via the different buttons (CTA — Call-To-Action) or hyperlinks present on the different pages of the website.
• Who should be involved: UX teams and if necessary SEO
• Deliverables: The pages paths can be specified in the deliverable for this purpose with other specifications, for example interactivity and SEO, or an Excel can be produced with the mapping of the URLs of the different pages of the website and an indication of where they should direct the user .

9 — SEO Headings Specifications

What it is: They are the main components of the content of the different pages of the website, in terms of copy. For each of these website pages they function as the main and secondary titles (headings) of an index of a document.

What is it for: Similar to what happens with Information Architecture, the definition of page Headings for SEO helps users and search engines understand the information architecture/hierarchy of different pages, through this specific process of organization and label elements — headings, subheadings and paragraphs of text. It also serves, in terms of accessibility, for users to be able to read, with screen readers, and understand how the page is built.

Who should be involved: UX teams and SEO teams

What are its components: I consider that the components of Headings for SEO can range from the HTML attribute <H1> to <H6> and for texts we could be talking about HTML attributes <p>. But as a rule, a page of a website, in principle, will not have more than 2 or 3 of these attributes, that is, it will have an H1 attribute and then all H2 attributes or a mix between H2 attributes and H3 attributes.

Deliverables: The deliverable of this activity can be the prototype where each page title and/or subtitle must specify what type of Headings must be considered in the development of that page by front-end developers.

A specification document can also be built from scratch, which should have a section that includes the specifications of SEO headings for the different titles, sub-titles and texts of the different pages of the new website Document composed of the different pages of the new website.

10 — Definition of the break points — Responsive Design

• What it is: These are usability tests carried out on the prototype and with end users.
• What is it for: Break points allow the website to adapt in terms of content to the different screens of different devices, be they computers, mobile phones, tablets, televisions, smartwatches, kiosks.
• Who should be involved: UX, UI and Developer teams
• What are its components: N/A.
• Deliverables: Specification document with the different breakpoints for each of the devices.

11 — Specifications of Page Elements and Others for Development

• What it is: Once all the UX/UI work is done in terms of its strategy and design, it is necessary to specify a series of elements for the teams that will develop and implement the new or redesigned website.
• What is it for: The specifications are for developers to understand what they have to do to bring the website to life. It’s like a briefing from the UX/UI, SEO, Analytics and Content teams to the development teams.
• What are its components: There are different types of specifications, for example: Specifications about pages: dimensions of grids, and breakpoints; UI Specifications: hex specifications of different page elements such as texts, CTAs, backgrounds, foregrounds, hyperlinks, among others; Interactivity specifications: movement and animations of menus, animations and movements of CTAs, animation of page changes, among other element animations; SEO specs: headings, URL nomenclatures, directions, meta descriptions… Accessibility specs: color contrasts, headings themselves, responsible design, image naming.…
• Who should be involved: UX, Content, and SEO teams
• Deliverables: The main deliverable can be the HF prototype with the different specifications or a word/powerpoint document with the specifications.

12 — Development of the Usability Tests

• What it is: These are usability tests carried out on the prototype and with end users.
• What it’s for: Simple: Test if what was created is perceptible by users and meets their needs.
• Who should be involved: UX teams
• What are its components: N/A.
• Deliverables: There are essentially 3 deliverables for this activity: 1 — Script with the different questions and activities that, respectively, we want to ask users and we want them to do in the prototype; 2- the prototype itself presented in person or remotely and 3 — a presentation of the main findings and insights.

Conclusion

Launching a website or relaunching a website takes a lot of work. It takes a lot of time and a lot of activities. And we always have 2 possibilities: do it well or do it badly.

Hypothesis 1 — To do it well, we must:

a) listen to users and

b) follow this checklist of 12 ux/ui activities for website (re)launch.

Hypothesis 2 — To do it badly, taking the easy way and guessing, we also have 2 hypotheses:

a) we buy a template or

b) we started right away with the design and guessing features that would look good on the website, without listening to anyone.

In the first case we always have a return, in the second we always have problems.

And what other ux/ui activities would you add to this list?