Wireframes, mockups, style guides, technical analysis, and more! The design process can be quite daunting but knowing there are specific steps helps in managing the outcome and creating consistency throughout an entire website. The final designs you see on Symantec.com go through quite an extensive iterative process before making it onto the site. In this post, I’ll share the thinking behind a typical project and how each step adds to ensuring the end result works.
On larger projects, we typically go through a process which includes the following stages - gathering and understanding requirements, wireframing, usability testing, designing page comps, user acceptance testing, and launch. Visual Design, Project Management, Information Architecture, Development, Content, and Stakeholders all play key roles in ensuring the success of website launches.
The team collaborates on design projects in a weekly meeting.
There are various needs from cross-functional groups which need to be assessed and taken into consideration before a designer even maps out an initial design. This planning stage is important before even touching a pixel. If done properly, it helps to minimize churn in later stages of the design process. As designers, it's important to understand stakeholder needs and development limitations before getting to work. Asking the right questions in the initial discussions which will impact your work is crucial. If requirements compete with design standards, this is the time to speak up!
Wireframes created by Information Architects represent the skeletal framework of a site with the purpose of arranging elements to best accomplish a particular purpose. This is usually informed by the business objective. Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications.
Wireframes focus on what a screen does, not what it looks like.
The wireframes depict the general page layout or arrangement of the website’s content including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like. We also do usability testing, when possible, to validate our assumptions and get quantitative feedback from actual customers before we spend too much time on the smaller details.
Designing Page Comps
The vision of a web page concept manifests itself in this stage. Mockups of what actual renditions of a page would look like are designed and crafted to visualize the final outcome. Font, colors, imagery, and other user interface element styles are carefully considered and applied. The specs for the implementation of the design are meticulously documented to aid development in building out the design.
Idea boards for designs across the site.
Idea boards like the above help keep elements consistent across a site. This board serves several functions. The first is for each member of the team to have visibility into what others are working on. And, it’s a means to coordinate and make sure we're all on the same page with design elements and treatments and that our designs are cohesive. This is always a challenge with several designers working in parallel in a large organization.
User Acceptance Testing (UAT)
This stage consists of testing and quality assurance specifically for functionality and design adherence to the specs. We cross-check on various browsers and platforms to ensure everything looks and works well. During this portion of the project, you can never have too many eyes on a project because everyone is focusing on different areas.
The last stage of a project consists of locking down any outstanding items and arriving at a ‘go’ decision. Once live, post launch tracking and testing become key to measuring the success of a launch.
Hope this helps you in your process and in understanding how we go about bringing you the end-product you see on the site.