The Design Process I Follow When Designing Introductory and E-commerce Websites
These past six years of working on different range of design projects — from advertisements, print design and corporate visual identity to user interfaces for elderly, augmented reality apps, web applications and other types of websites — have taught me a lot regarding the design process. I have always been trying to find or develop “the perfect process” for each type of work.
To be successful on this area it is extremely important to have a well-structured design process. It has huge impact on the quality of the work and also on the relationship with the client. Otherwise things can easily get out of hands — both on designer as well as client side.
Unfortunately there isn’t a “magical” process which would work for every type of project. Each type of a project needs a bit different approach — some more through and analytical than others. Design process of designing an introductory website and process of designing a native app are quite different from each other.
Let’s imagine that I will be designing an introductory/e-commerce website for a gardening company. The design process I will be describing in the following chapters is a process that I have been following as an interaction designer for the last couple of years for this type of project. I can’t say that it is perfect but so far it has worked for me quite well.
1. The brief
Having a through design brief is an essential for a successful design process. If it’s done properly it will be guidance for all the design decisions. In addition, it won’t allow either the designer or the client to get off track.
The first question I usually ask the client is why do they need a new website. Identifying the goals and objectives of the new design will set a clear focus and priorities for the work. This helps me to be consistent throughout the process and make better design decisions. In addition, the outcome will be more measurable.
Secondly, an important part, which a lot of design briefs unfortunately lack of, is defining the target audience. Saying that everyone is in their target market implies that their product appeals to no one in particular. Another reason why “everyone” can’t be included is because one specific message won’t resonate effectively with different demographic groups. Furthermore, marketing to everyone costs more money (2).
Some questions I have asked the client in order define the target group have been following (1):
- Are they male or female? How old? Married or single?
- How educated are they? What do they do for a living?
- What’s their outlook on life — are they optimistic? Realistic?
- Where do they get their news? What do they do for fun? What do they care about?
- Why do they do business with you? How would they describe your company?
It is also beneficial to identify each person’s (persona’s) motivations and whether they are visiting the site for the first time or belong to the sweet long-term users.
After that I agree with the client on the scope, budget and deadline.
As the last thing, I usually ask the client to provide me with their company’s visual materials. If they have any specific style ideas in mind, it should also be discussed at this time. In addition, I also ask the client about their main competitors.
2. Creating a mood board
As the next thing I do some research — look through websites which have either similar content to the one I will be designing or the layout structure which I have in mind.
I also take a look on competitors’ websites in order to see what has already been done. It both inspires me as well as generates ideas how to differ from them.
After that I create a mood board — a collage of the potential solutions for layout and interactions (and sometimes visuals) which I consider to be suitable for the project. Creating mood board also helps me to stay focused throughout the project and think ahead—how the interactions will look like. For creating mood boards I use either Dropmark or Pinterest.
3. Pen and paper sketching
As the third step, I take pen and paper and start sketching out different layout ideas. Even though my sketches aren’t pretty — not even close to that — they help to quickly identify what works and what doesn’t. I usually sketch out three to four solutions for general layout and then write pros and cons for each of them. I also sketch out possible solutions for the main interactions — for example filtering. After that I look through the pros and cons lists once again, but this time really considering the objectives of the design (written in the brief). This helps me to decide which direction to take.
4. Creating wireframes
When I have decided upon the direction of the layout I start making low-fidelity wireframes — “skeletons” of the website.
I usually start with the “core” page (if it is an e-commerce site then product page, if it is a news site then the article, etc.), then build everything else — all the other pages — around it. “Core” pages are the most important pages because it is the place where all the main activity happens.
I also create wireframes for both — desktop and mobile version of the website. This again helps to identify bottlenecks of the layout and prioritize elements in an early stage.
As the last thing I usually create an interactive prototype of the wireframes using Invision. This helps me to present the ideas to the client in an adequate and more understandable format.
5. Usability testing
If there is enough time and budget, I also organize usability testing for the prototype. It is very important and quite easy step to take in order to identify the main problematic areas of the layout in an early stage. Usually the main problems arise even testing with a small amount of people.
6. Art direction
Now it’s time to start working with the visuals — adding humanity to the design!
“Design is the how. It’s the foundation of all communication, the process and production of typography, color, scale, and placement. Art direction is the why. It’s the concept and decisions that wrap itself around the entire product.” — Jarrod Riddle, Sr. Art Director, Big Spaceship
As the first thing I usually write down some keywords or make a concept map of the message and attributes the brand wants to convey. When I have finished with it I start to look for inspiration based on that. I will add images, type and color options which express the right mood to the mood board. Afterwards I present it to client to see if the style feels right — goes together with the message that the company wants to convey.
Sometimes this step is not so through — when the company already has a very fully developed identity.
7. Creating mockups
As the seventh step, I usually start designing mockups of the “main” pages. A mockup is a realistic representation of what the website will look like. When the design is so far that it represents the visual idea — I present it to the client to again make sure that we are on the same page.
8. Designing the website and interactions
Now when the client has confirmed that the design is going in the right direction, I design all the pages in detail. During that I also design all the smaller interactions — feedback messages, form interactions, etc., and plan the animations.
During designing I always create a style sheet — a separate file of all the elements, for e.g. icons, colors, typography, button styles etc. It also contains all the states (regular, hover, pressed) and small interactions of the elements. This helps me to keep the design consistent and clean, really consider the priorities of elements and keep everything in one place. It will also be useful for the developers.
9. Presentation
The reason why I made an entirely separate chapter about design presentation is that I think it is one of the most important steps in design process. Knowing how to present the design to client and how exactly ask the client for feedback is extremely important skill to have by a designer.
In addition it is important to be able — and even prepare a bit — to give reasons for the look and position of elements, if client has any questions. Always talk about psychology. Robert Hoekman Jr, author of “Designing the Obvious”, “Web Anatomy”, and other UX design books, has said:
“The root of design is psychology. Anything else is art or decoration or something else.”
Designing for user experience is basically “applying psychology to design”. Being able to give reasons to your design decisions shows that the design is thought through and professional.
I think that it is important to focus on building trust between the designer and the client from the beginning of the process. In design process one of the goals shouldn’t be to make a client happy, but to make him trust the designer in delivering solution that fulfills the company’s goals. As Mike Monteiro, co-founder of Mule Design, has said:
“Happiness is a side effect of good design, not a goal.”
The results that come with new design will make the client happy.
So this is the design process I follow and which has been working for me for designing e-commerce and introductory type of websites.
Thank you for reading!
Let me know about your thoughts on it in the comments.
This post was inspired by an essay “My Design Methodology and Approach“ I wrote for Design Theory and Methodology class in university.
Sources used:
1. http://www.businessnewsdaily.com/5202-to-market-successfully-yourcustomer-cant-be-everyone.html
2. http://www.mayecreate.com/2014/08/why-everyone-is-not-includedin-your-target-market/
3. https://vimeo.com/121082134
