Design & Development - User journey mapping and wireframing tools to improve your product

Links

Story Mapping Figma File

Ideo - 3 Tips to Help You Prototype a Service

Transcript

Hi there. My name is Eric Johnson and I'm the founder of Imua Studio working eight design development agency based in San Francisco.And we're really focused on in this series of videos, helping people learn about both no code tools so that they could build products faster, but then also some of the kind of design principles and strategies that could be applied alongside the development process to get the most out of the product that you build.And we want to kind of share some of this because we found it especially helpful in our process. And we want others to try these strategies out so that they can either de-risk or simplify, or in general, just to have better success building a modular product.And this is a visualization that we are, I often use and you have to give credit to Accenture and solutions IQ who built this.And it's kind of a visualization of the development process kind of comparing two different mindsets. And there's a temptation especially if you haven't built something right on the web before or any kind of complex software project there's a a tendency to want to be very specific and detailed in the planning that's done so that you can be as clear as possible and avoid the potential for miscommunication or not a building for a certain environment or circumstance or edge case.And doing that is good intentioned. But maybe sometimes can be overly prescriptive as far as the solution goes. If you don't fully understand what the problem that you were trying to build for and understand not only is what your, your interpretation of the problem and solution, but how do the people that you're building for interpret that problem and experience it, and how would they be best in having it a product or a service that would address that.Yeah. And so this approach up top is conveying that you can be very specific in kind of gathering requirements coming up with the proposed solution coming up with a plan and sometimes spending too much time on this and then setting goals for building it when it's really hard in software development to fully no, and anticipate how long are things going to take.And that's another kind of sometimes a motivation for being very specific. And that often unless you're very, kind of practiced in doing this that can lead to a lot of requests to change things of all things realize that maybe the way that the plan came together, doesn't actually align with a social that'll work for the end user.And then at the end you've got this hodgepodge solution that when you compare it to the original plan could look like what you've originally set out to build.But isn't as cohesive and simple of a solution as would have maybe been developed if you had involved more user feedback in your process.And so we're of this agile approach is based around the concept of picking small achievable milestones to iteratively build towards solving your user's problem more and more effectively, and then eventually adding all of the nice conveniences things on the, on the margin of the experience that really make it stand out, but at the core really testing early that concept that's central to the success of your solution, so that you can be proven wrong by feedback from your users.So we just have some suggested reading here. We're really inspired by IDEO and kind of their approach for designing products and one tool that we found effective very effective in the process is this concept or notion of journey mapping involving user perspectives in the design process very early on to document step-by-step the aspects that a user will experience, and then breaking that down and really understanding all of the interactions between what can be a very complex ecosystem.And that gives you the ability to understand more visually what you're building and gives you the opportunity potentially to focus in on a very specific aspect of what you're building.And this is a required step in our process, even all the products that we built and is an incredibly helpful tool for ignoring temporarily.What does the maybe interface look like and getting back to what problems are being solved and who is involved? So one tool that we used to collaboratively build this map together is Figma, and it's a project based design tool for creating designs for digital products.And if you're new to this kind of world of interface design, or visual design it can be a very powerful and sometimes intimidating tool but it can be used in simple ways to start the design process.And so we find it very helpful to do our journey mapping in a tool like this, and then side-by-side, you can start to prototype things.And if you're going to build a design in Figma bubble which is our favorite no code development tool actually has built integration with Figma so that you can import some of your screens directly from Figma, so that all the hard work you do in terms of creating a higher Polish design after you're done with maybe wireframing, you can then start building with some of those elements in bubble.So that's a a huge win if you're already using Figma. Now it's still a newer feature and it's not going to necessarily make obsolete the, the experience or the need to build out a front end in bubble.You'll likely have to make some changes and add some responsive behaviors and adapt to what the import does, but it can save a lot of time.And it's especially powerful if you just want to build on top of what someone else has built. Figma was really great for having prototypes available for both wireframing doing kind of low fidelity ups of what you're building, but if you want to take it to the next level there are full UI kits that have been built to really accelerate the process of going from a low fidelity version to a higher fidelity version, if you're okay that using the design language that someone else has established in the the interface that they've created, but it's especially helpful set of resources for understanding what does a well thought out design look like?And you can at minimum be inspired by some of the the elements and layouts and hierarchies that have been put forward in some of these great UI kits.We, as I mentioned, use Figma and in all of our engagements with our clients, and we found a great templates in the Figma community for doing this story mapping a journey mapping exercise.And so that'll be included you know, like below and w would be essential homework to complete when performing a desire for development engagement with us.But really we advocate for doing something like this in any capacity that you're working with a designer or developer just because it can help create a common understanding of what is being built and then create a structure that then a design can be based upon.So I hope this is helpful. We'll include some links in the transcript below and looking forward to any questions that you might have, please don't hesitate to reach out if there are specifics about this, that you're interested in learning more.All right. Thank you.