THERE ARE MANY THINGS TO TAKE INTO CONSIDERATION WHEN DEVELOPING A NEW WEBSITE. BELOW IS THE PROCESS THAT WAS TAKEN WHEN REDESIGNING THE AVOCET COMMUNICATIONS WEBSITE.
RESEARCH
DEFINE THE PROBLEM, UNDERSTAND YOUR TARGET
The first few steps in creating a new website is to define the problem that you’re trying to solve, and to develop user stories, or personas. These personas are representations of groups of users who have similar interests and motivations, share behavioral patterns, and usually share basic demographics. Once you understand who will be using your website, you will be able to design a catered user interface and user experience that allows for them to achieve their goals in the least amount of clicks.
To design an experience means to plan and act upon a certain set of actions, which should result in a change in the behavior of a target group when interacting with your website.
COMPETITOR RESEARCH AND ANALYSIS
After you understand who will be using your website, you need to research what your competitors are doing. This competitor analysis serves to inspire you to come up with alternative methods while educating you on the current trends in your market.
PLANNING
DEFINE SCOPE: SET REQUIREMENTS BASED ON USER FLOWS
User flows, also thought of as user journeys, map out the circumstances and decisions that influence how someone achieves their goal. User flows are understood by creating conceptual diagrams that show task flows, or a repeatable series of actions. This helps to clarify why your users, represented by personas, may want to buy notepads for example. Understand the problems they may face. Consider their motivation, attitude, and end goals. List the benefits that users will have when the project is successfully completed. What will users gain from it? Assign roles and responsibilities to those that are a part of the website redesign process. Create a project scope document that establishes deliverables, features, and functions that are in consideration on the project, as well as a timeline with milestones.
DELIVERABLES: CREATING A SITE MAP AND WIREFRAMES
Site maps serve as a visual representation of the architecture of the site, what pages are necessary? Once you have declared the necessary pages, it’s time to create a wireframe.
WIREFRAMES: If site maps represent the architecture of the site, then wireframes serve as a skeleton, or blueprint layout of what the site will look like. There are many services available today that allow you to wireframe your website with ease. UX Pin for example allows you to use their platform to plug and play using predetermined wireframe elements. You can also use Adobe Illustrator to wireframe the functional elements of a website. Color and layout is not important in this phase, as it is not about design, but rather about layout and getting your elements on the page.
CREATIVE
STYLE GUIDES: Style guides are used to outline the aesthetic and technical specifications of the look and feel. The style guide establishes how the brand is conveyed in a design and serves as a reference in order to eliminate inconsistencies. These guidelines are related to hierarchy, alignment, color palette, font family with specific weights to use, iconography and sometimes specifications on how the logo should and should not be used.
MOODBOARDS: Moodboards focus more on the creative elements, such as lifestyle imagery, product imagery, and patterns. It conveys the overall aesthetic that should be achieved in the design of the website. Keywords that queue feelings can also be included in the moodboard, for example, the Avocet website keywords were creative, integrated, and knowledgeable.
After you’ve established your wireframes, style guide and moodboard you are ready to begin design.
COPYWRITING: Creative copywriting can do wonders to accompany a great design, and should establish a consistent tone of voice. It is important to make sure this copy is consistent and targets your personas, so your users feel comfortable when reading the copy on your site. This is where you can reference the keywords in your moodboard to align your copy with the way the site should feel. The copy should compliment and flow with the designed user experience. For the Avocet website, the keywords creative, witty, and knowledgeable allowed the copy tone to support the clean, smart design without obstructing the user’s path to his or her goal. Good copywriting also takes into account SEO keywords, so that your website will rank high in the user’s search results.
DEVELOPMENT
After iterations of design and receiving client approval, it’s now time to start coding with HTML and CSS. You may find it necessary to set up a content management system such as WordPress in order to easily make revisions after the site goes live. If you are selling a product on your site, it is also important to set up an eCommerce platform like Magneto to track user details and other product information. You will also want to use your SEO keywords as meta tags in the code along with validating the code to make sure it complies with web standards.
TESTING AND MAINTENANCE: Once the development is completed, the site is ready to review in a browser-testing environment. Compare the interactive test site against the design mockups. Does everything match up? Have the correct fonts and colors been used? What about line spacing and font size? If your website needs to be responsive, does it act the way you want it to on different devices? What about in different browsers?
After tediously testing links, viciously validating the code, and repeated attempts to “break” the website, you are ready to launch. Congratulations, your new website is live and is accessible by millions of people!
– Dan Colgan
