How to redesign an App focused on UX

There are different design approaches to redesigning an application, and today I will share one kind of structured approach for Minimum viable product (MVP) Redesign that I summarized from my university of design in Germany and it is suitable for the UX design beginner or students. So in order to redesign an application in a meaningful way, it is first necessary to clearly work out what should change and why. For this purpose, understand the reasons & requirements for the redesign is very important.

Understand the reasons

First of all, it is important to understand why your application should be redesigned from the point of view of various stakeholders. Therefore, the first step is to clarify the following questions:

• What should be changed from the perspective of the Application operator and why?

• What are the requirements from stakeholders?

• Have the wishes and requirements of the users changed?

• Is customers feedback on the product not good?

• Has the audience or target market changed?

Redesign Thinking

After clarifying the reasons, for example, we want the product to optimize the customer experience, then we must now determine whether it is based on user experience or usability. There is a difference between user experience and usability. This time we consider more about user experience then we can start our redesign project now. For design beginners, I think it’s also necessary to go through app redesign in a complete design thinking process, but there are also some difference between design thinking and redesign thinking. In general there are 6 phases, 1. Analysis, 2. Define, 3. Strategy Check 4. Ideation, 5. Concept Development, 6. Prototype & Visual Design, to help designer understand existing products and user needs to improve user experience and usability.

01 Analysis

In the Analysis phase, the first thing is to understand the product you need to redesign, so we can firstly analyze the information architecture of the existing app comprehensively and intuitively by making a screen flow, in order to find possible problems or mark the areas of requirements for product stakeholders in the previous step.

At the same time, we can take a look at the app’s developer documentation in App store or company development documentation, which contains a detailed description of the features and can help us understand how the company defines the features it developed. After the initial analysis of the product being improved, we can focus on the competing products and find the strengths and weaknesses of the competitor and our product as well as the opportunity area through SWOT analysis.

In the second step, we need to understand the target users of the product, and we collect user needs and pain points through qualitative and quantitative research. Generally speaking, quantitative research focuses on finding out what the problem is, while qualitative research focuses on why the problem occurs.

Include in your research at least three points of information that can be (1) data from your users or competitors, (2) information from a survey, (3) information from interviews.

Then add insights with as many post-its as you can. Discuss with your team and group the findings by topics: demographics, general interests, technology adoption, skills or behaviors related to your service or product, and if you have the information, include the main objective of the users, pains and gains.

This concludes the first phase, in which we focus on uncovering valuable qualitative and quantitative data to prepare for the next phase of analyzing and filtering information.

02 Define

Next we enter the second phase Define. Once the information is grouped and classified, start by defining the name of your person and the scenario they face where your product or service is relevant. Segment your user group using demographic data from quantitative research and psychological data from qualitative research, and use the most repeated Findings to define what goes on your Persona Map.

According to personas we can create a user journey map, which compile a series of user goals and actions into a timeline of steps on a path that moves in a continuous direction. On the timline there are user thoughts and emotions for each stage based on qualitative research.It includes actions, motivations and emotions that occur at each interaction or touchpoint, including the emotional highs and lows, paying attention to where they get stuck or frustrated. It encourages and reminds you to consider the holistic customer experience: their feelings, questions and needs while they interact with your app.

03 Strategy Check

Then we need to weigh the optimize of low-satisfaction or enhance of high-satisfaction feature against its costs to implement to determine whether or not adding it to the roadmap is a strategically sound decision, so we identify the priority areas through the Kano Model for your current product’s features that need immediate attention to rectify under-performance.

Besides we analyze and build the current business model or value proposition canvas to ensue that our redesigned or redefined digital product is still in line with the company’s strategic layout and enhance core competency.

04 Ideation

At beginning of ideation phase we should identified and foumlate our Opportunity Areas, so we can set up a workshop where we need to discuss and propose some solution possibilities based on the prioritized problems, features and needs. Here’s where you can present our hypothesis through How Might We, But remember that “How Might We” questions should not be too broad or too narrow. A well-framed “HMW” question will contain the right amount of inspiration to enable you to quickly begin brainstorming potential solutions. Here are a few examples that perhaps can be useful to understand:

An Example of a Well-Framed How Might We Question

“How might we design a product that makes our users feel confident and secure during their online financial transactions?”

An Example of a How Might We Question that is Too Narrow

“How might we design a product that helps users deposit their paycheques in three easy steps by using a guided workflow?”

An Example of a How Might We Question that is Too Broad

“How might we design the world’s most innovative banking app?”

After formulating our hypothesis, we have roughly found the direction of the solution. Next we need to set up railings for the road to keep us on track. This is where we can use Design Principles, which can be a few highly condensed adjectives or nouns, to help us get our bearings. It provides direction for all design decisions and makes your new design recognizable and runs like a red thread through all pages of appliction.

Next we can conduct a Brainstorming with Crazy 8's method. It is a fast sketching exercise that challenges people to sketch eight distinct ideas in eight minutes. The goal is to push beyond your first idea, frequently the least innovative, and to generate a wide variety of solutions to your challenge. we don’t need sketches very beautiful now, just to communicate your ideas clearly.

Everyone puts the ideas of Sketches up on a wall and vote for their top ideas that maybe potentially the viable solutions to the How Might We Questions and discuss each other more in detail in order to narrow down the ideas.

05 Concept Development

After confirming the final idea we start to develop the idea from partial to whole, at this time we can build the foundation and structure like a house, and in the case of digital products, we can build Information Architecture to achieve this purpose. While IA isn’t really visible to end-users, it is the backbone for the design. The information architecture is to create an experience that allows the user to focus on their tasks, not on finding their way around.

But how do we build empathy closely with our users and make sure we get an information architecture that fits the user’s mental model? Is there a way to learn what customers know, what they think they know, and how they prioritize information?

Of Course！Card sorting(Open vs. Closed) is a generative UX research method that reveals users’ mental models by having them arrange topics into groups that make sense to them. Designers use the data from a card sort to improve an app or website’s information architecture. There’s immense benefit here as well. Card sorting allows businesses to create intuitive user experiences by organizing and categorizing content the way customers do in their minds.

After building the overall framework, the content generated by the card sorting method is not only suitable for information architecture, but also for flow chart. The difference between the two is mainly in scale and focus. Information architecture depicts the entire product from a functional point of view, while flow chart focuses on the specific steps a user takes to complete a task, like the Navigation design of the app. Then let us pick some important use cases to build flow charts.

Accroding to the Information architecture and flow chart we can then draw a wireframe to design all the interfaces for the whole with individual typography and functionality. A wireframe is a low-fidelity mockup that serves 3 simple and exact purposes.

1. It presents the information that will be displayed on the page

2. It gives an outline of structure and layout of the page

3. It conveys the overall direction and description of the user interface

After confirming the overall basic interface plan with the team members, we can start creating high fidelity wireframes. They are a more visual representation of your product. Drafting a wireframes is like making your creation suitable for the public. It’s not the final version, but it’s acceptable to show to other people and can also be used in our next step User Testing.

06 Prototype & Visual Design

After getting feedback from the user testing, we can modify our prototype again, and then we can start thinking about the visual system, for example, we can create a style guide.

Based on the Style Guide, we can design our High Fidelity Prototype which is closest resemblance to the true graphical representation of the products as they can to allow thorough usability testing on all the detailed aspects, including UI components, colours, layouts, the information hierarchy, mental load of the screens on users, and other interactions. Finally we just use some interactive prototyping tools like Figma or Protopie to visual and interactive your final product.

In the end our result is a redesigned minimum viable product (MVP) based on the original app, which is a tool to minimize risk during product, service or business model development. MVPs help teams quickly validate our ideas with minimal cost, release our redesign faster, and ensure it has product-market fit.

I hope this article can help design beginners to get a basic understanding of User Experience, and enjoy in exchanging my ideas with each other.