In our last post, we discussed the three most vital components to all website redesign strategies. But how do you translate the strategic imperatives of a redesign into a plan for your new website? What does that process look like?
In the world of web design, this phase of the website design process is simply called user experience—UX for short.
Simply put, the user experience of a website is meeting the needs of a user as efficiently as possible. To do it properly, you must balance the objectives of your business with the goals of your end users.
This is no easy feat. User experience (UX) requires the analytical thinking of scientist with the out-of-the-box creativity of a designer.
The best user experience is one where the user does not have to think. The design is so intuitive as to feel inevitable.
Content & Context
Content is the centerpiece of a strong user experience. Without content, a user has no real need of a website. Even seeking a contact phone number, the user is on the hunt for content.
But to get UX right, that content must be organized into a context that makes sense and requires as little friction as possible to access.
This requires the skills of an Information Architect (IA) to organize your content into a relevant and contextual design.
The IA’s design usually results in two major deliverables during the website design process: Sitemap and Wireframes.
The sitemap a high-level vision of your site’s organization. It shows the relationship of content—or pages of content—with other pieces of content.
A sitemap builds hierarchy into your site. Sitting at the top of the sitemap, and thus being most important, is your Level 1 navigation. Level 1 pages are purposely reduced to as few pages as possible. Level 1 pages communicate to the website user that these pages are most important and most represent what the brand has to offer.
As the user digs in further, Level 2 and 3 are exposed. The result is a branching of relevant pages that move downward, growing wider and further apart.
When creating a sitemap, the IA will consider the following:
1. Labels: The phrase or words use must effectively communicate information in as few words possible.
2. Information Hierarchy: The pages at the top is most important, but the lower-level pages should relate and link to different sections of the site.
3. Use Cases: The paths users take—whether starting at the homepage or entering through an interior page—must be taken into account.
Wireframes are known as the blueprint of a website. They provide the structural direction that both designers and developers will use later on.
However, within the context of the user experience, wireframes are another opportunity present content in ways that are meaningful and contextually relevant to the end user.
Depending on the project scope, a UX team may take different approaches to designing wireframes;
1. Low Fidelity: These are the typical wireframes you may be used to. They’re usually digitally created or sketched by hand and consist of outlines or silhouettes of text boxes, image blocks, buttons, navigation, or form fields.
2. High Fidelity: These wireframes mix UX design with visual design and offer a sneak peek at what your site may look like. They’ll often contain logos, color schemes, photography, and other basic graphics.
3. Clickable Prototypes: These wireframes are functional—to a degree. When getting your website in front of users for test purposes is important to your goals, UX designers will develop a clickable prototype that end users can interactive with and perform simple usability tasks.