1. Core Structure & Design (Prerequisites)
- Competitive analysis (see how others solve similar problems and try not to reinvent the wheel.)
- Data analysis (look at any existing data, or get some tracking installed ASAP for data measurement.)
- User feedback analysis (have your existing users said anything we could take into account?)
- User stories (personas, fictional people matching the characteristics of real people, who might use the site, including their backgrounds and motivations.)
- User flows (based on the manufactured scenarios, plan flows and routes for the users to take, as a foundation of the wireframe.)
- Red routes (map the most ideal routes for users to take, and eliminate obstacles to accomplishing those tasks.)
- Keyword analysis (learn about your business, inside and out, and get inside the mind of the customer, to locate important words and phrases to use in the website and in any advertising or marketing campaigns.)
2. Plan and Create Content
When you have a website, you need to know what you’re going to say with it!
- Content Analysis
- Content Plan
- Content Writing
3. Compose Visual Concepts
- Brainstorm & sketch (the team will sketch, discuss, vote, disrupt, and have fun while coming up with ideas for the visual designs based on the data designs.)
- Wireframe (finally sit down and add details and structure to the visual design ideas, mapping pages to the user flows, and make sure we don’t leave anything behind.)
- Prototype (we’ll start creating visual designs on some digital tool or on paper, and have people test the concept for usability.)
- Information Architecture (organize the navigation and content in a very clear, consistent way, for users to understand.)
- Language (work on the concepts for the written verbiage on the site, to fit the culture, language, and mindset of the users of the website.)
- Accessibility (asses the requirements of people with different skills and limited devices, and accommodate this in the visual designs and code.)
4. Add a little bit of love
- Assess the sustainability of the website and the project, and work to decrease the footprint of the website on the world.
- Slow down and make sure the website is secure, private, and honest, being considerate and ethical.
- Step outside our own view and background, and try to open up the design process to be more inclusive and less biased.
5. Create the Code
- Implement website design in code
- Make the site require less effort for visitors to fully grasp and understand.
- Make the website responsive for all common device types (Windows, Mac, Chromebook, Desktops, Laptops, Tablets, Phones, Smartwatches, Google Chrome, Safari, Firefox, and more).
- Reduce wait times for the users, and aim for lightning-quick load times (reduces user agitation).
- Focus on interesting and clear gestures, where necessary (button hovers, transition animations, and more).
- Show users proper error messages where necessary, to indicate when it’s our fault something’s not working.
- Give clear and immediate feedback of successful user actions.
- Finalize the layout, settle on images and icons, and solidify the font & color hierarchy.
- Apply SEO and Metadata pieces, including favicon, social share details, and more.
- Focus the site largely on identifying the client’s pain points, and speak from a perspective of the mission of the business.
6. Delight the User
- Adjust the micro copy of the website, to add clarity and personality.
- Tune the micro interactions of the website, adding shine and polish, and toss in a couple little easter eggs to the interactions.
- Make the transitions meaningful, spatial, clear, functional, and intentional.
7. Analyze the Data
- Key Performance Indicator setup (you have goals, and things you’d like the website to achieve. We need to map out success and failure, and have a way to show the performance).
- AB Test plan (every website is set to accomplish goals, and it’s either achieving those goals, or it isn’t. Either way, there are some things we can do to test, like having a version A and a version B of some feature or page, to find continually-better ways to get more success from the website).
- Test (test, observe, fix, repeat. We need to record user sessions and take surveys, to test the functions of the website and find the friction points).
Categorized in: Web Development
This post was written by Jarrett Tilford