Design Thinking Journey part. 1
The web has always been an architectural and dynamic system. Some of you might have started developing websites and applications a while back, others might have been introduced to web design recently, but all of you need to think variously about how you approach a business challenge. Even though it requires a logical and acceptant approach, there are a bunch of techniques and that aren’t black or white, which can help you understand the process and improve your strategy when you’re building a modern project, help you set up powerful setups, and other awesome personal programs.
The following UX Terms are covered in this article so you can have a better approach:
General Knowledge | Strategic Management | Project | Backlog | Design Thinking | Epic | Persona | More Personas | Playback | Client Playback | Playback 0 | Delivery Playbacks 1-N | Hill | Hills Playback | Scenario | Sponsor Users | UI Spec | User Story | Sitemap & Flow | Sketches | Wireframes | Responsive Design | Grid | Color Palette | Typography | Details Attention | User Testing | Feedback Capture Grid | Prioritization Plot | Story Map | Planning Poker | Release Blueprint | Team | Program.
I was introduced into the world of Design Thinking quite recently when I made the shift between User Interface Design to User Experience Design. Back in the days, this process was not clearly defined, actually, an Architect or Business Analyst were important roles in understanding and defining a project’s direction, while the interface layout was created by a visual designer and front-end developer. I will walk you through a small journey that I’ve created, based on which we can hopefully extract relevant data and define a clear journey for a proper Design Thinking session.
I attached to this article a lot of templates and programs that can get you up and running with Design Thinking: Deliverables, User Needs, User statement and frameworks. In my next article, I will add a full-stack collection that has attached free materials that you can use freely during workshops. Some of the deliverables are used for team collaboration, brainstorming and performance improvement, while others are for personal debates. Design Discipline is an important subject, so I attached useful resources, in order to help you have a better understanding of what Design Thinking really means.
As a regular design consultant, unfortunately, you have to be responsible for a whole processes understanding of our customer needs. Even though some things about marketing and management will never change, this type of work doesn’t always apply. We have the responsibility to create and design new ways for the customer to engage with the product. The client doesn’t care about symbolism or patterns and sometimes he doesn’t care about the code. He doesn’t want to know that you can’t quickly duplicate a sample of content because you used an ID instead of a class. It is not their problem to worry about things like that, and you have to remember that you always have the responsibility to armor and safeguard them from these things. The customer wishes to engage with the product and have a quick and efficient way he can update the information. They want a reliable and robust product which works on a vast array of browsers and devices. Simple, right? Not quite. Please recall that you must always follow the culture and brand of the client. Those goals are perpetual, but nearly, everything regarding the way we accomplish this will have to go through an intellectual thinking break.
To have a better understanding, we have to perpetuate a change in the client’s brain. After all, you have to keep in mind that there are three main stakeholders or groups of people to whom the project matters the most: The client (the person who pays for the app), the users (the people who will use the app) and you (the designer/developer who creates the app). You will have to remember this arrangement and make sure you do the right things for the right people for the right reasons. You’ll need to have the stakeholders happy, so you’ll have to begin making more knowledgeable decisions about how to organize a proper Design Thinking Session. The client doesn’t care about all technical specs. As a matter of fact, the only person that cares about those things is you. Design every app in a manner that can adapt and adjust on your needs and always try to have a fast environment. ( attention to the users ) and a robust one (thinking about the client).
Good design means good business.
I know, is old fashion and overly used, however, I still think “Good design means good business”. All startups require a good UX / UI / product designer in order to handle the marketing work. As I was saying in a previous article, in 2006 I created my own personal website. It’ wasn’t easy at all. Was a monumental amount of learning that I had to do on my own, relying on a regular approach with loops of trying and failing my way toward each small step. This was my first form of self-publishing, in which I wrested the reins of publication from the author and journalists whom I appreciate, forcing myself into the public eye. Actually, this blog is also a form of self-learning that I do in order to practice writing and to sharpen it. Of course, I don’t expect to chop my way towards fame, fortune or a Pulitzer award by writing a couple of articles. However, this is my choice. I like to reinvent myself as a Web professional and merge the two loves of my life: words and design. Hope you’ll enjoy my sharing and collaborate when you have a personal remark or a proposal. You can write back, I attached a contact area here.
Since new expectations are set and established among other stakeholders, digital technology comes with a large variety of materials, we have to always improve our methods. A good designer must be user-centered, have architecture skills and everything-is-everywhere strategy. We’re not only designing apps. We’re also building the process, which, in turn, redefines the whole architecture structure of the business. A simple change can represent more than just a quick adaptation. This is a full-scale meta-morphosis system.
Nowadays, stakeholders want from marketers to embrace the customer experience. A regular designer must create and execute seamless journeys for the customer, following a step-by-step process. From discovery to actual app engagement. There is a lot to consider and we have to integrate each individual touchpoint. The product must be logical and consistent. Even though the speeches, posters and all other marketing elements still do a great job, you have to work in a dynamic environment and have a solid understanding of materials in order to deliver a good app. As designers, we have to learn a lot of stuff, from marketing toolbox to apps and digital content, and this is not always clear since some of those tools support big data and have powerful algorithms. Those represent only the peak of the iceberg. Those new tools and materials that we have to learn, are themselves constantly changing and we have to continuously improve our knowledge. It’s not enough to have a set of skills. New ways of thinking are required, new types of partners and client proposals will follow and you have to be all set. Remember that partners have very little or no knowledge of classical marketing system, and that can represent often a big problem when you talk about contemporary apps.
As I said, we are constantly faced with new expectations, new materials, and new partners. Clearly, we have to come up with new ways of knowledge sharing. In order to bring together different disciplines, a good methodology, and working ability. We have to provide a proper framework. We also need to establish a common language that all of us can accept. I have chosen to adopt the language of design and development since this serves as the core of the future of UX Design. You’ll see me using the words “design thinking” a lot. Those are used to describe how we conceive new marketing experiences. Also, words like “Agile” or “Scrum” are used to describe different types of work. Most importantly, the term “user” is used to describe the audience, because it shows how customers interact with experiences. As end users. A complete glossary will be attached to this article, so you can have a better understanding when it comes to terms that I frequently use. I will come back with an extended version so you can have a walk through all the design thinking materials. All of those will be on a page, in the same place.
The Design Thinking process means, of course, more than a yaw in terminology. This implies a change in the way of thinking. You have to involve some fundamental changes in your commerce approach. Our thinking is opening and improving, just like the technologies we work with every day. I want to write here what I’ve learned so far, and share with you what I think is a base for the imminent UX design profession. I hope you’ll enjoy the journey, and contribute to the growth of digital design.
An important approach that I master is “Strategic Management”. Back in the days, when I was introduced to agile and team management, I had to learn and understand new concepts like continuous improvement and user-centric design. This helped me shape my previous experience and set a new expectancy. There are a lot of good designers around the world, however, I raised the bar, creating different definitions of what is valuable and how a good product should look. Thinking about the fact that the internet is everywhere, brands and products shifted to online marketing. This has revolutionized some industries and alter the way we live and think. Of course, digital designers had to adapt and shape their knowledge. As such, it makes sense to have new approaches that can lead to a conceiving app and that can create improved marketing wisdom.
Plans are worthless. But planning is everything.
– Dwight D. Eisenhower
There are a set of categories and different types of paths that I honor, even though it depends on the project. You have to keep in mind that every client is different, and every design thinking journey has a different path, so there is always a new way of exploring and understanding a business case. As I said, a crucial element or process that I would like to discuss, it’s called “Strategic Management”.
Many people believe that the marketing strategy should be more closely aligned with the practices and principles of Agile development. I don’t think this is entirely real. I like to think about Strategic Management as an open, iterative way to teach and boost team accomplishment. It replaces the rigidity of long-term planning and establishes an assumption that leads to a better teamwork process. Even though you have to involve all team members and solicit a regular input, in some ways, Strategic Management only lacks and improves the ability to adapt to new ways of thinking. Strategic Management should be collaborative and simple to learn.
Strategic Management requires embracing Agile and Waterfall.
Strategic Management is a merge between Design Thinking and Consultancy.
Strategic Management is an ongoing exercise and a complementary process.
Strategic Management has to illustrate business goals in incidental audiences.
Strategic Management must be open-source for the team and stakeholders.
Strategic Management must accept ambiguity and accost reality.
Strategic Management must have always a unique and personal approach.
Strategic Management should value emphasis overcast.
A business case, a blueprint or a set of activities that the team agreed to bail. The project represents a common goal for each individual team. The project has several definitions, however, it always implies an individual or collaborative set of actions or a sequence of events that lead to achieving a particular and appropriate aim. A normal corporate project has a temporary period, however, there are “projects” that are permanent like the social system. We’re going to approach only the corporate one, because, in order to accomplish a particular assignment under pressure you’ll have to adapt to a perpetual learning and the corporate environment represents the perfect case study. The social system is another matter and maybe will be answered in a personal post.
The list of all user stories that the team has to deliver, their priority and status. This must be ordered and should have all that is known to be needed in the product. A common place where we store tasks and requirements for any changes that will be later added to the app. The workload will be managed in a dashboard that will help your team organize all of those in a proper way. This will also add to your attention the knowledge of the problem, a note of the situation, this will help you set goals, have a strong solution and implement within a proper and legitimate domain.
The process of understanding, envisioning and planning all the user experience that involves diverging and converging solving. A proper Design Thinking session has all parties invited and is applied correctly only when you involve BA and CX. A good understanding of the process has to be comprehended by all roles and good communication between team members should be a crucial factor in having a proper outcome. It is a way of processing and applying shared knowledge as a collection of observations based on empathy, however always in a plain relationship with the user’s wishes.
Design thinking has 7 main areas of study: Observation, Understanding, Concept, Ideation, The Prototype, QA and UAT. Those are the general ones, however, I will handle a complete, full-stack journey in a future post because there are particularities that should apply when you involve different types of businesses. You will also have to remember that design thinking is an area of data analysis collected throughout a rigorous observation in the journey that you want to accomplish.
An epic is the main element that can be broken down into smaller tasks (called “stories,” or “user stories”) based on the request/need of your customers. A cluster of user stories that spans scenarios, approved not to have repetition across epics. (Ex: “As a manager, I want to see my team performance.)
The persona is an imaginary user/character that you create based on the actual app users. You have to assign personas and roles, in order to create an empathy map, as-is scenario, user journeys, and other materials. A persona helps in having a whole understanding when you reach interviews and user blueprint. Is based on research and incorporates user behavior patterns.
The number of personas that you create is in a relationship with the app architecture and data. When you have a complex app, the user management system might have more levels and you’ll have to create personas that will help you understand the whole system. You can have as many as you want, however, always focus on the important ones in order to extract only the proper information or material so you can have an integral summary later on. Each individual persona will have a journey, an empathy map, and an as-is scenario.
A playback is a demo of the offering in the user experience, that is mostly used to collect feedback and align the team and stakeholders. The playbacks and iterations are a key element when we talk about a pixel-perfect product. Your team will have to adapt and adopt a strategic management system in order to have the whole understanding of the app data and user wishes. I like to have at least one or two iterations or playbacks per sprint with the team and align all areas and ideas.
A series of ad hoc iterations with the client, under NDA, that prove the market drives, user experience and progression of the project. Those will help you have a whole other view of the things that you created or purposed and also help you shape your understanding of future needs. Is a critical approach if you want a happy client.
It represents a milestone playback. The team must commit to a particular experience for the customer, however, in parallel, we offer design materials. Playback 0 is the main and crucial point when you want to have a proper process. This will represent a main knowledge gathering milestone based on which you will compare and adapt your app.
Delivery Playbacks 1-N
A series of milestone loops at which the team shows the client the progression of the project. (end-to-end scenarios, live code and mockups.) When the end of each sprint approaches, a delivery playback will have to come in place. This will prove the client that all the planning had a meaning and a purpose, so all materials will be explained and discussed in a granular manner. You can have as many client playbacks as you want, however, there should be at least one delivery playback per sprint. A general rule that I apply, keep the team constantly engaged and have the client see the result at the end of the period. Keep in mind that each time you have a design debate with the stakeholders you will have to adjust your backlog and material.
A hill should always be a concentrated domain when we talk about User Experience and represents a business goal to the release. I prefer to add at least one hill and a technical base when it comes to individual roles, however, a regular project has 3 hills and multiple technical bases. Hills settle the project journey and the team. A hill is a statement that guides you and set your team toward a common result and have proper outcomes that are aligned with user wishes. As the project will move forwards, hills will evolve and adapt as well as your perception of the scope. Those must help you turn the idea into a real app.
A Hill Playback is an agreed milestone playback, at which the team will deliver the outcomes. It is the date when you can envision the user experience journey. You can now compare your initial 3 hills with the result. This should be a breakthrough since all the problems are solved at this particular instant.
The scenario is an integral user experience, decomposable into small steps, each step translated to codable user stories. This must give you a whole overview of the user interaction and should be breakable into small steps in order to prepare the deliverables. All user stories and tasks must have a logical order and a good scenario might just be the answer.
The sponsor users are often leading playbacks. They are the user engaged throughout the process, in order to represent a target persona. Sponsor users interact with the process, with the prototype and the app so they should have a good perception of the measurement. We want to involve those particular users and have them serve as the main characters of your app. When the sponsor user is happy because he can handle and navigate easily through your materials, you know you delivered a great app and know-how maturity.
A paper that communicates user interface requirement, however, it also reveals all technical specs. This should always be related to the Release Blueprint. Nowadays we have tools similar to Zeplin, Inspect by Invision, The Mockup Club, Avocode, Figma, Origami and many others that make our life much easier and generate a complete spec for your app. Even so, sometimes, a manual set of UI specs might have better outcomes.
A user story is a requirement expressed in terms of UX. It should be codable and have the following: “As a customer, I want an inquiry that aims to offer products by their price”. A user story has to be a straight definition of the requirement. You will have to precisely provide important data if you want a proper and understandable story.
Sitemap & Flow
It is often helpful to map out the content and organize everything hierarchically. This helps you understand the flow and the structure of your project. A sitemap contains all steps that a user has to follow and all pages that he accesses when he uses the website or app. You should be able to see the architecture flow and hierarchical order during the planning of your app. Please note that user flows and sitemaps are typically hierarchical and structured in lists, meaning that you can see an architectural organized system.
Sketches are quite important when you want a solid project. I draw sketches of the app with all team members and stakeholders, in order to have a quick result and a starting discussion point. Also, this will help you to have a whole overview of the pages of your website or app.
Wireframes are the black and white version of your interface. They come in various levels of detail. My conception says that is best to keep them low-fidelity for as long as possible. They are used to explore many interface variations so those should be easy to maintain. A set of wireframes should always be ready and all stakeholders must give their feedback about essential process steps. When you talk about architecture or user wishes on a granular level, you must have all in the right place.
Responsive Design serves as the reworking of your layout to different screen sizes. Keep in mind the aspect ratio, text size, native interaction and the number of clickable material. Everything should be modular and should adjust to different browsers and devices. The items will shrink, move or resize when you’ll want to.
Grids are used for having a balanced design. It represents a structure for elements and enables responsive design. The grid is a structure completed by a number of columns that have items laying down on top of it. Grids are used to empower responsive design.
Color pallets convey emotion in the user’s perception and provide a different experience on the color and context. Don’t forget to have a relationship among colors! (monochromatic hues, complementary colors, and so on.)
You always have to remember typography. A good typeface can drive the user to a whole new experience. See categories (serif, slab serif or sans-serif), choose the weight and style for the font (bold, italic, etc.) and be aware of your font ratio and line spacing. Good type is readable and balanced, so establishes the right information hierarchy.
Poor attention to details is often the most common defect users notice. I think is really important the use of colors, gradients, strokes, shadows, and alignment. Please remember to keep changes subtle and keep your layout consistent. This will make your design more cohesive.
Have a checklist to prepare for a real-time task-based test. When you take feedback from a client or user, prepare your questions, your prototypes and documentation methods ahead of the initial schedule. This should be done by an objective person since the designer is subjective, however, any constructive comments are useful. You can observe the user behavior when he uses the app.
Feedback Capture Grid
The feedback capture grid is used to facilitate real-time capture of feedback. You should use presentations and prototypes as a start point, however, a whiteboard should also be enough. You should capture things like: User feels, critiques, a question raised, ideas, etc. You can use hand-written sticky notes in order to prioritize those later.
You should be able to organize the feedback and requirement set using a prioritization plot. Whether you’re using surveys, or you capture real-time feedback on prototypes, all requirements need to be prioritized. This framework can give you a sense of what is the most important part of your project. Also, you can use this for internal purposes, in order to prioritize hills, scenarios, stories or epics. This is a key standstill when you have done all other materials because you can easily see the importance of your ideas, the high’s and lows, and you can debate all and reposition them afterward in a more proper manner.
The document that captures your involvement in user story backlog is usually captured using a story map. You can post a row of hills and, beneath, post a row of epics that fall under each hill. For each epic, post a column of associated user stories. Prioritize those vertically and draw a line when you think you achieved the Minimum Viable Product.
As I remember, the first time I used planning poker was in an Agile team. This method helped us estimate relative sizings of user stories. The exercise is quite easy, each team member will be allocated a collection of poker chips or cards labeled with numbers that represent relative sizing. Round up all members, and each user story existing in your backlog, all team member should give an estimation. ( Simultaneously. ) Then you can compare the results, and the person who has the most should discuss with the person who estimated the less and come to a conclusion. After that, another set of estimations will be made.
The Release Blueprint is an archive that highlights the progression from market opportunities and hills, to scenarios and codable user stories. This is often used to outline the key concepts. You should start with a small summary of current market needs and competitive landscape, and after that, you can provide the objectives of each hill, as well as the user stories derived from your research. The release blueprint is also a report or a document where you chase the entire progress of a project. From Hills to user stories. You have to remember that even though the hills are linked to personas, proper strategic thinking involves those types of material.
Each project has a stakeholder, a team and a user. See your team allocations and ratios in order to track gaps in staffing, especially when it comes to user experience designers. This can be done with tools as Jira, Trello or Kantree.
Create your own program in order to structure the milestones. Even though all deliverables are primarily structured around playbacks, you will have to review the state of the project across Hills.
Those are just some corporate terms and some general knowledge that I had to share in order to have a starting discussion point, however, I think are quite necessary since without those a regular architect or designer could not survive in this area. I wanna talk about each individual one in my next publications, but I wanted to walk you through this small journey that I’ve made. As I said I will handle all of those in a future publication so we can have a good understanding of what Design Thinking really means. In other thoughts, please visit my facebook account and remember to like, share and subscribe. Also, you can leave your opinion below!
Research: Web Survey Tool (EFM) Human-Centered Design Toolkit Avoid Bullshit Personas Service Design Tools d.school Bootcamp Bootleg Contextual Inquiry Scenario Maps Complexity Analysis CogTool Interaction Design Patterntap Library UI Patterns Library Mobile Patterns Library GUI Tooklits Library Balsamiq Wireframing PowerMockup Wireframing Mobile Wireframe Templates UX Mag Wireframes Magazine Smashing Magazine IBM Design