Discovery to Design
•Download as PPTX, PDF•
0 likes•105 views
1) The document outlines 5 crucial steps for planning a website: site map/user flow, customer acquisition funnel, content development, wireframing/site architecture, and visual design. 2) It emphasizes establishing goals, conducting an audit of existing sites, and identifying top priorities. Wireframes bridge content to design and plan information hierarchy and focus. 3) Content development involves identifying pages, types, and an ideal reading level of around 4th grade. Copy should be trimmed, broken into paragraphs, and include images. Mobile-first and responsive design are recommended approaches.
![Process
[pros-es; British proh-ses]
noun, plural processes
1. A systematic series of actions directed
to some end: to devise a process for
homogenizing milk.
creating a website.](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Discovery to Design
Similar to Discovery to Design (20)
Recently uploaded
Recently uploaded (20)
Discovery to Design
- 1. From Discovery to Design 5 crucial steps for planning your website @Astute_Anna hello@astute.co
- 2. Process [pros-es; British proh-ses] noun, plural processes 1. A systematic series of actions directed to some end: to devise a process for homogenizing milk. creating a website.
- 3. Common Agency and Freelancer Process 1 ) Kickoff Meeting/Conversation 2 ) HERE ARE YOUR DESIGNS!!!!
- 5. What Can a Process Do For Me?
- 6. Superior Product Better Experience Improved Results What a Process Can Do
- 7. Site Map/User Flow1. 2. 3. 4. 5. Customer Acquisition Funnel Content Development Wireframing/Site Architecture Visual Design
- 8. What is best for your users is best for your business
- 11. Try to assemble a small team for input Establish goals for the site Complete an audit of the existing website Host white boarding sessions for brainstorming Refine goals: Identify 1-3 top priorities for the website. Guidelines for Planning
- 13. The sitemap is a basic outline of the content and hierarchy of the site.
- 15. The user flow diagram visualizes the different paths a user may take through a website.
- 18. FOCUS.
- 20. Design that does not drive results is not good design
- 21. In preparing for battle, I always found that plans are useless, but planning is indispensable. - Dwight D Eisenhower
- 22. Content
- 23. THE #1 THING THAT HOLDS UP A WEBSITE PROJECT
- 24. - Identify pages based on your sitemap. - Break your pages down according to what type of content you expect to live on each page. HOW DO WE GENERATE CONTENT?
- 25. Homepage: Subpages: 6th Grade 8th Grade Million dollar words don’t earn points here. They lose users. IDEAL READING LEVEL FOR WEBSITE CONTENT
- 26. Earnest Hemingway’s The Old Man and the Sea registers at a reading level of Grade 4.
- 28. Use smaller paragraphs and include icons and images to break up content and make it infinitely more readable. Simplify and make your content easy to skim. EASILY “DIGESTABLE” CONTENT
- 29. TRIM THE FAT The “freshness” of your content should therefore be a by- product of the consistent intent to deliver value to your visitors in a manner that is enjoyable for them to consume.
- 30. http://www.usability.gov/how-to-and-tools/ methods/writing-for-the-web.html RESOURCE FOR WRITING ON THE WEB
- 31. “It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove.” Antoine de Saint Exupery
- 32. IF YOU’RE NOT A COPYWRITER, HIRE ONE.
- 34. Responsive web design has necessitated that wireframes, along with every other step in our process, become less concrete–A little more flexible.
- 36. • Plan an order for the presentation of information. - Look at the content that has already been compiled. Is there a clear hierarchy that is inherent to that information? • Ask, “What is the main point of this page.” Start there and plan around it, ensuring that you aren’t stealing focus from the main point. SO HOW DO WE DO IT?
- 37. Wireframes are the bridge from content to design.
- 38. DESIGN
- 39. Mobile First We start with the lowest, smallest common demoninator and build up, “progressively enhancing” our websites – adding features and functions as we go.
- 40. Atomic Web Design “We can break entire interfaces down into fundamental building blocks and work up from there” - Brad Frost
- 42. Site Map/User Flow Customer Acquisition Funnel Content Development Wireframing/Site Architecture Visual Design
Editor's Notes
- The reason I want to discuss this planning process, it that’s I’ve seen it be a challenge for a lot of people–myself included. People get so caught up in trying to get to the finished product that they skip vital steps. I place a lot of importance on processes now, but I wasn’t taught that. It’s something I had to learn over time. I think sometimes in the interest of saving time, people try to skip planning and strategy and that the biggest mistake you can make. You’re really setting yourself else for a redesign next year. First, let’s talk about process.
- This is not a process. This is essentially skipping the entire process! I know, because I’ve worked this way. (CLICK)
- By implementing real processes to inform decisions as I move through a project, I’ve been able to (do the following): Create Superior Products Elevate the user experience Provide better (trackable) results BONUS POINTS: Because we are creating superior products, we are able to charge more for our services
- By implementing real processes to inform decisions as I move through a project, I’ve been able to (do the following):
- I’m going to go over the 5 crucial steps of the website planning process CLICK THROUGH and I’ll go over how they work for me. Before we jump into site mapping, let’s talk about planning. The first, most important consideration is CLICK “What’s best for your users is best for you business.”
- It’s really easy for clients to focus on their goals rather than the goals of their users. While we’re focusing on identifying goals for the site, remember that the end user’s goals are the most important consideration. If a user arrives at a website and they are forced to stumble through someone else’s goals rather than being able to find what they are looking for – well, you just lost that user. So how do you get started?
- It’s amazing the things you can discover just by starting a conversation with your clients. Ask what’s working for them and what isn’t. Listen to their answers. Their questions. Let your client tell you what they need. Once you’ve gotten this conversation started,CLICK
- Try to assemble a Small team for planning Establish goals for the website Complete an audit of the existing website (where applicable) What’s working? What isn’t Host Whiteboarding sessions for brainstorming Refine goals: Identify top 1-3 priorities for the site. (sales, leads, brand awareness, educate, etc)
- let’s review some guidelines for planning. AFTER REVIEWING GUIDELINES: So before we get started on sitemapping and user flow - let’s talk about whiteboarding for a minute. 2 ways. Generally, it splits based on the situation. Working with a small internal team – whiteboard, pass out markers, brainstorm. If you’re working with a larger “client” team,sticky notes, encourage everyone to get up and be involved, People are actually getting out of their chairs and moving sticky notes around. By giving them this power, you’re keeping them engaged, making sure that everyone contributes. Starts to feel like a party – breaks up the monotony of meetings and makes it a fun experience. photograph results and document more clearly afterwards. This evolves directly into your sitemap.
- A basic outline (text or visual) of the content and hierarchy of the site. Like a city plan – you have to know where the roads are before you start putting up buildings. What content needs to be included? How is content going to be organized. The site map is your first visualization of what content will be included on the site and where it should live.
- It is your first step towards creating a content-centric final product.
- Very simple site. Established what types of content should be included and built out the hierarchy to present that information.
- Again, the site has to be built around what your users want. If your site isn’t encouraging users to convert, it isn’t working for you. Ultimately, but creating a site for users, you’re serving the business in the most effective way. CLICK
- Using the site map and user flow diagram, organizing your content and visualizing how users will progress through your site, you can begin to map out a clear customer acquisition funnel.
- So what are conversions? Sign up, purchase products, contact us, etc. Our goal with developing a customer acquisition funnel is to use our content to guide to the user through the site an encourage them to complete one of our goals. You are theorizing about the journey that a user will take from the moment they arrive at your website, to the point of conversion. So how do we do this?
- Identify customer goals, align client goals with customer goals, FOCUS ON THOSE GOALS. The more focus you can have, the better it is going to perform. It’s important to remember that every element that is added to a page, takes focus away from those core goals.
- If content is the heart of a website, the customer acquisition funnel is the brain. Converting users to customers is what makes a website a business tool rather than a pretty picture. Don’t get me wrong, good design is important, but good design alone does not drive results. In fact, CLICK
- Developing your strategy doesn’t stop when the site launches. There’s nothing final about a website. That’s the beautiful thing about it! Even if everything came out perfectly upon launch, things are going to change. Users are going to changed based on new technologies. We have a wealth of free user data that we can use to determine if the decisions we’ve made are working or not. The planning gets us to a place where we have a viable product, something that works, that we can improve upon rather than building something on guesses and fairy dust and having to scrap it and rebuild next year when we get tired of looking at it because it’s nothing but pretty pictures and trendy design elements. Deep breath. CLICK. (to content).
- The most important part. The story. How we sell. What we base our designs on. But it’s the “Hard” part. This is the heart of the website.
- This is why, we require that content, at least a rough version, is completed BEFORE design begins. Design is the fun part. It’s what the client, or the boss or the stakeholder is itching to see. Everyone is a lot more motivated to get content completed when they are buzzing on the anticipation of seeing what their website is going to look like.
- Include sections, headlines, images, sidebars, etc. As you are generating content, keep in mind CLICK that the ideal reading level for website content is lower than you might expect.
- If you are a recovering English major (like myself) or a bit of a vocabulary snob (…like myself), it may be hard to let go of your big words and fancy syntax. Here’s a fun fact: (next slide)
- Time to get over myself and my big words
- It’s what they do everyday. They can do it better and faster than you can. They can create copy that is optimized for search engines They can create copy that is engaging, grammatically correct, and easily readable at the appropriate grade level.
- This isn’t the part where I start talking about the importance of tight, visual wireframes. It’s just the point where we should start thinking about a rough layout. CLICK
- We’re deciding how information should be organized on a page. What is the hierarchy? In what order should content be presented? CLICK
- How is this information going to appear on cell phones? Desktop computers? Inbetween? Where the sitemap is the plan for the overall architecture of a website, wireframes are a plan for the architecture of the individual “pages”. It’s taking the plan we’ve been building up to point, and zooming in – taking a more granular approach.
- It’s easy to skip this step. Don’t. It’s as important to the overall plan as every other step we’ve discussed. CLICK
- Speaking of design… well, this is the fun part. The part your clients are looking forward to. But how are we designing for the responsive web?
- The idea that rather than starting by designing for the desktop browser and scaling down, “gracefully degrading” our website designs, we start with the lowest, smallest common demoninator and build up, “progressively enhancing” our websites – adding features and functions as we go. Adding features is far easier than removing them – trying to shift and stack elements to fit into a screen that is a fraction of the size it was originally designed for.
- A methodolgy presented by Brad Frost in 2013 as a way to create full design systems for our websites. “All matter is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe. Similarly interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there.” So from the minute I heard about Atomic Web Design, I really liked the idea. The benefits of building out this design system seemed clear, but I really didn’t know how to apply it to my processes. I felt lik I should completely eliminate page mockups from my process, but that was a hard sell from a client standpoint, and old habits die hard. As a result, I’ve been working on a sort of hybird model and I had the good fortune of hearing Sophie Shepard explain it well at Breaking Development in Nashville.
- We’re moving back and forth between the style guide, which houses the atomic elements (our design system!), and the mockups. This method improves workflow and eliminates inconsistencies among elements. As your designing your mockup, you pull elements from your style guide so: a button is a button is a button. A huge benefit of working this way is that our websites are inherently future-proofed. We can adjust elements and update styles easily. At this point, we’ve set ourselves up for a successful website. We have mockups and a style guide that will ensure consistency in development and have, as a result, done our best to create an effective and future-proof website. By moving through the whole process, we arrive at each next step with a fully-formed plan of action.
- Our Designs are informed by our Wireframes. Our Wireframes by our Content. Our content by our customer acquisition funnels and our Acquisition Funnels are defined by our Site Maps and User Flow Diagrams. We’re not just guessing. We’re not just making something that looks good. We’re making something that works.