Chapter 2. Example Project – E-commerce Website

Now that we have a general understanding of the design process we should follow, let's put it into action. I have invented a fairly typical client who is in need of some UX design support. He has financial backing and a good head for business, but does not have a lot of experience working with designers. In this chapter, we will work with this client to design an e-commerce website that will entail:

• Educating the client on the design process

• Taking the client through the research phase to define the expected users, features, and product goals

• Creating a map of the entire website to show how the pages are accessed and connected

• Creating and refining wireframes to show how the content, product details, and purchase process are defined

Our client is looking to start a website that sells soccer equipment and other related accessories online. He has put together a small company to make this happen. He has hired someone to develop the backend of his store...

Research

We will need to start this project by gathering information from the client about what the project's purpose is and who is expected to use it. There are many ways to get this information; the most obvious will be speaking directly to the client and any other key decision makers at the company.

Stakeholder interview

The first step is to interview our client (the primary stakeholder).

We will not only need to discuss what type of assistance he is looking for, but take this opportunity to educate him on the design process we expect to use. This will likely bring to light tasks and needs he may not have thought of.

During our first meeting with the client, he tells us he wants to jump right into exploring what the website will look like, but doesn't know exactly where to start. At this point, we walk him through the design process that we expect to follow. We explain that before we can start mocking up the store, a little bit of research will need to be done.

Note

Something to consider:...

Information Architecture

Information Architecture is the act of organizing the data and tasks found in a website or application to ensure that they offer an intuitive and usable set of interfaces to the user. With our list of desired features, pages, and some idea of the content that might be needed, we can move onto defining how everything will fit together.

Site map

We start by creating a site map to examine the pages needed to support the features and tasks we have created during the research phase. This map will help us understand how all these pages connect to each other. Our site map looks like this:

As you can see from this example, our site map is a very simple diagram. Each cell represents a unique web page required to support the features and tasks we expect the user to accomplish while at the site. The arrows connecting the cells show how we expect to get from one page to another. We went a step further and colorized the pages to represent what type of task or content would be found...

Reviewing the development efforts

Our efforts on this project are finalized by reviewing the work completed by the development staff. As mentioned earlier, this review is our chance to ensure that the finished product matches our designs in both form and function. It is easy to let this go and not follow up. By the time the development staff is ready for a review of their work, we will have moved onto another project. Our focus will be elsewhere, and they are not always eager to have someone come in and tell them where they went wrong. We need to set the expectation from the start that this review will need to take place and that we expect the stakeholders to be there with us comparing the developed website with the final mockups.

With our design review and subsequent list of update requests resolved, we can consider our work on this project complete.

Summary

As we can see from this example project, the process of wireframing a website is all about evolving an idea from a simple list of features, to a map of pages, to what particular content should be placed on those pages. Each revision adds detail and structure to the design. Eventually, our wireframes are dialed in enough to apply the visual design and graphics to them. It is a crafting process that requires many different participants and a lot of planning and coordination. In the next chapter, we will have a look at an example design project for a mobile device.