Every design has a goal
While it may seem obvious, I didn’t always consider it. Especially when it comes to digital products like apps and websites. This is a super important concept to realize. As Web Developers, we have to make lots of decisions about the various layers of the website. Let’s start with the presentation layer, focusing on the HTML
and CSS
(yes, JavaScript is part of the presentation layer but may not be discussed here).
Imagine you need to pick colors and HTML
elements for a website for an imaginary client. Instead of letting emotions lead the way (this color feels right) you can operate using cold hard reasoning and facts. For example, choosing royal blue to convey trust instead of it looks right. Design thinking gives you a framework (I really like that word) to make decisions that you can defend with goals and logic instead of emotions.
The steps to design thinking
Empathy towards users
Build the product with the user in mind.
Define the problem
From the user’s perspective, not your organization’s.
Brainstorm ideas
Consider unique solutions first. No idea is too weird! This is the last step before prototyping.
Create a Prototype
A mock up trial of the product. Shown to team members and sometimes stakeholders.
Test your idea
Test your product, focusing on your target audience.
Iterate
Analyze the feedback gained during testing and identify areas of improvement.
Refine the prototype. The end result should be the most effective version of the product possible.
Keep in mind that different teams design think differently. Different team members may work in tandem on different steps, or collaborate on one step (sequential vs collaborative iteration). Some teams don’t go through the steps in order, and/or prefer to circle back to previous steps at another time with fresh eyes and new insight.
The purpose of design thinking is to create the most cohesive, customer-focused client possible. Using a tried and tested framework is the best way to make sure nothing important was missed and increase the likelihood of commercial success.
Tools of design thinking
Problem Statement
A concise statement of the design challenge. Make it as clear as possible, because this is where you’ll focus the team’s efforts for ideation and solution generation.
User journey maps
Identifies pain points, and areas of delight for improvement by visualizing the user’s journey and experiences as they interact with a product, service, or website.
Empathy maps
A tool to understand users by capturing their thoughts, feelings, actions, and experiences.
Brainstorming
A technique that encourages free thinking and creativity to explore diverse solutions, without fear of judgment.
Prototyping
A low-fidelity representation of the product. This is the realm of sketches, wireframes, and mock-ups. Prototypes promote team discussion by generating feedback and challenging assumptions about the user and how they may use the product. Keeps everyone on the same page and allows for quick iteration.
Visual design tools
Software like Adobe XD, Figma, or Sketch allows for team collaboration using interactive prototypes and high-fidelity designs.
User testing
Observes user interaction with prototypes/existing solutions. Helps to validate design decisions and identify areas of improvement.
Storyboarding
What is the sequence of events a user will take when interacting with a product? Helps team members visualize and communicate concepts, user flows, and potential solutions.
Design Sprints
A time-constrained process to accelerate the design thinking cycle. Things like prototyping, testing, problem framing, and ideation are done during this step.
Planning a website using Design Thinking
Let’s use my friend Dr. Udit Kondal MD MPH as an example. He is a plant-based Physician and public health expert. Sometimes using the stage name Dr Oo, he has seen firsthand the negative effects that the American meat-centric diet has had on his patients. Since he is a busy Doctor seeing 20-30 patients a day, he can only counsel so many people on their diet in the short amount of time he has with them.
Another goal of the website is activism and advocacy. A blog that criticizes the practices of the meat industry and how bad it is for global warming and the conscience of humanity. To shine a light on the needless suffering of animals that are a part of the industrial farming industry.
Reaching people - on and offline- on a larger scale to discuss the plant-based diet benefits was the main reason for creating a website. Dr. Kondal is also seeking representation to secure speaking engagements, so it makes sense to mention that somewhere too. So you might call the design of the website a personal business card with a blog.
So a goal starts to form. Create a website that discusses the benefits of a plant-based diet and criticizes the practices of industrial farming using media and writing. The goal of the blog/media is to give the audience a preview of the content of Dr. Kondal’s speeches. But how do we know if the website is doing its job? It would help to have some kind of objective metric to measure design impact.
Using metrics to measure design success
The website should generate leads such as speaking engagements and clients seeking nutritional guidance. We should define a target conversion rate- the number of people who complete an action, such as users who sign up for the newsletter or submit an inquiry for a speaking engagement. We can also measure website traffic and blog post engagement.
We can also track the amount of leads generated in a given period (how about a month?) We can also measure the bounce rate- the amount of time users spend on a page before leaving and taking no action like buying a product or clicking a link to another page.
What about SEO- search engine optimization (the way websites rank in search engines)? Does the copy for the blog and the metadata help the website rank competitively in searches for plant-based physicians?
Does the audience leave the site empowered to make healthier choices, embracing a plant-based diet? Did they get their answers regarding plant-based nutrition? We can do a Q&A (question and answer) with our target audience to find out.
Putting it all together
Now that we have outlined the steps and goals for the website, we can start actually generating ideas and content!
Coming soon… Or maybe it should be a separate post? If you are like me- neurodiverse with attention challenges- you dislike super-long blog posts. Let me know what you think in the comments!