Here is where you can learn more about the outlined methodol- ogy and techniques:
— businessmodelgeneration.com, the website of the famous book about how to generate your individual business model. They also offer an online tool, a free preview of the book9, and a lot more.
— mycoted.com/Brainwriting, a good introduction into Brainwriting methods. Part of a comprehensive Wiki about creative techniques maintained by the UK-based company mycoted.
— uxbooth.com/articles/complete-beginners-guide-to- design-research, the "Complete Beginner’s Guide to Design Research" by Andrew Maier. The title is a little exagger- ated, but it is a good introduction with useful further links.
— theleanstartup.com the website of the Lean Startup book by Eric Reis. The Lean Startup helps readers discover ways to create more desirable products with less waste.
9 businessmodelgeneration.com/book
User Experience & User Interface Design
User Experience & User
Interface Design
At this point you probably have a concept for your app. In the previous chapter you learned how to generate and validate multiple ideas. This section is about the methods that are useful for transforming your concepts into usable products through iterative design. It focuses on describing a range of techniques to shape your vision. You can use them to outline early ideas at a high level, as well as define detailed guidelines for the final implementation.
User Experience (UX) is how your proposition is generally perceived by the end users. Was the journey easy and clean? Did they have enough information at each step? etc. It is a broader term that can be applied to designing services and software products. User Interface (UI) design is a term that is specific to software products. Whether it is a website or a stand-alone app, the UI is where your users will experience what you offer to them through interactions, visual design, flow, messaging etc.
Designing an application from scratch requires a different approach than improving on an existing product. In both cases you will frequently switch between the big-picture and detailed design mindsets to make sure that you continue to improve quality while staying on track to complete your vision.
You should use the methods described in this chapter as a toolbox rather than a recipe and apply them in any order that works best for a specific project that you are working on. If you are on a very early stage and just need some way of outlining your concept, you can use sketching or drawing a user journey map. When you get to another design iteration
B
Y
Ann
User Experience & User Interface Design
and need to refine UI the same methods can be used just with different attention to detail.
The design steps - conceptual thinking, defining interface and verifying your concepts with users - create a cycle that you can repeat as many times as you need (or have the time for).
User Experience (UX)
To give your app’s users the experience they will appreciate you need to be very clear about the goals of your project. What is it that will be different about your app? What kind of people you are hoping to attract? etc. Methods described here are useful for capturing in a visual and logical way the larger context of your project.
Personas
Personas are fictional profiles that represent your application’s audience.
The persona’s profile structure usually contains information like name, age and a profession. A description of their specific interests and how a particular proposition fit in their lifestyle. How does it help them to achieve certain tasks? In other words, what would motivate these users to give your app a try?
Typically a project has more than one personas. Ideally the profiles should come from previous research, but even if they are based only on your guesses, writing them down is one of the most important steps you can take. For each persona you can select a profile picture to get some visual reference. It helps in building empathy towards the users this persona represents.
User Experience & User Interface Design
Why do you need them? Well, it is not uncommon for the makers of a product to approach problem solving based on their own experiences, preferences and previous knowledge about a certain domain. Acknowledging different user needs early sets you off to a good start to avoid this trap. Whichever step you take from here think of how your users will perceive the design if they saw it for the first time.
User stories
Once you get a better idea of the type of users you are design- ing for, you can start defining more granular scenarios - user stories. Thinking in user stories is thinking in flows - the journeys from point A to B within the application. An example of a story would be a purchase flow, uploading or sharing a photo, making a note etc.
By listing the ‘must have’ stories early on you will get an idea of how much work there is ahead before the application is ready to be released. This will allow you to capture the full experience before diving into the interface details. A list of stories is the brief for your app, it captures the main user needs, together with knowing your users’s persona profile you can start now get on with the detailed design.
After you have the main journeys outlined, you can break each of them into smaller steps - tasks. Each task is a separate micro flow within a larger journey. For the sample flow of uploading a photo, think whether users will need to access a gallery on their phone? Do they need to select a picture? Can they add more than one at one? All of those activities contribute to the overarching story.
User Experience & User Interface Design
When you think about a solution to a particular problem keep coming back to your personas profiles. Some users will need more guidance than others and you might consider put- ting extra messaging in the UI for them. Even if it is unlikely that everyone will notice every bit of information design that you put in place, as long as it is available for those that need it, and balanced, so it does not get in the way of more independent users, it will work for the wider group.
Flow diagram
A Flow Diagram demonstrates steps in the flow and the major decisions points users will run into while navigating inside your app. It is more logically defined and allows you to think through the possible journey’s routes in a visual way.
You can build up a flow chart for the whole application or ‘zoom in’ and focus on a particular journey. On a higher level a flow diagram outlines the app structure. For example, you can identify how many different screens you will need to design. When you focus on a specific journey it is a great technique to capture all cases that you need to design for (like, have you thought about what to show to users if there is no internet connection available?). As your project mature you can iterate on your diagrams and update them to reflect the accurate state of your design.
You can read more about the chart’s building blocks on Wikipedia1.
User Experience & User Interface Design Experience map
As the name suggests, an experience map is an overall impres- sion of the entire experience you are creating for your users. This kind of overview usually takes form of an infographic/ poster that others involved in your project can understand and relate their contribution to. To illustrate the steps in user experience you can use the screen shots from your app or, if it is early days, or you want to keep the map more implementa- tion independent, go with illustration or simply text.
Depending on the idea your app can contain the entire user experience or can be only one of the touch points on the map alongside the customer service centre, a supplier, delivery service, website, social media channels or anything else that fits into a setup of your specific idea.
If your application is only one part of a wider experience, drawing the map is an excellent exercise to understand and demonstrate the bigger context in which the application will sit in. When you move to the UI definition and interaction design, having those the touch points crossovers identified is really useful. Understanding those dependencies will inform how you create an experience of sending users away from your app or welcoming them back again. The map details can vary for different personas and can also change depending on whether it shows an initial - first time experience or a return journey.
User Experience & User Interface Design