April 11th, 2024, posted in learning
by Adelina
The first step to fixing any UX problem is recognizing you have one. We’ve seen and built many different apps over the years, so much so that we’ve developed a 6th sense in finding your existing app’s pain points. And how to fix them.
But how do you even know that your app has serious UI or code issues?
If you do, you’re likely getting complaints from your users, your staff, you’re getting negative reviews on app stores, or even you, the owner, are having trouble using it. Maybe you’re also aware that your app’s UI is outdated and it might deter people from using it. Or your app has usability issues and minor bugs that you haven’t had the chance to fix. You can find out more about the signs that your app needs a UI/UX redesign in this article.
We’ve learned what questions to ask in kick-off meetings, what to look for in these apps and what we could do to improve their user experience. So in this article, we’re going to give you a rundown of how we improve an existing app’s design and code, from start to finish.
Do you really need a redesign?
Before you contact an agency that does UI/UX design and development, ask yourself one major question: do you really need this? What would be the goal of redesigning your app? Getting in tune with current UI trends? Trying to widen your target audience? Competing with similar businesses? Ask yourself this question and figure out what your goal is.
Don’t use an app redesign as a band-aid for more complex issues within your app. If there are major user flow issues, broken functionalities, or lacking business aspects, a new design won’t fix it. Thankfully, hiring an agency to help you with both design and code means fixing these wider issues as well, but you need to set your goals first, and be sure of what you want and need.
A good reason for a redesign is if you’ve added lots of new features over the years, and you want to add more, but your current UI has become cluttered with all these options. Users have been telling you that they have trouble finding these options, that the app has become too complicated, or you’re getting lots of customer service requests.
The takeaway from this is: before you begin an app redesign, be sure you need it at all. Gather your team and set a series of potential goals to reach through a redesign. If these goals will help you gain new customers and raise your retention rate, then a redesign might be a good idea.
Getting to know you & your app
We often work with businesses that have already built an app but they realized it’s not working for them anymore (both literally and figuratively). And they come to us knowing they want their app to work better, but oftentimes they’re not exactly sure what that means. Deep down, they know what’s wrong with their app - so it comes down to asking the right questions.
1. What is your business model? What exactly do you do on a daily basis?
First of all, we have to know how your business works. Whether your app is an internal tool or a tool for other businesses, we need to understand the foundation of it all. This is even more crucial if your business is more complex in nature.
We’ve worked with apps created for a variety of complex industries, from broadcasting to artist management to oil drilling - so we’re accustomed to learning about activities we haven’t heard of before. The key here is getting a really good understanding of how your business works, in as much detail as you can provide.
Telling us what you do on a daily basis is also very helpful - since your app most likely fulfills the daily needs of your business, knowing how your work day goes helps us figure out your most common user flows. Sometimes, when telling us what you do day to day, you uncover issues your app has.
You’re probably used to them already and they’ve become part of your daily routine: something like, “I can never find this page I work with so I always keep it open in a separate tab”, in other words, “Our app’s navigation is badly sorted and I can never find what I’m looking for”. Just with that one statement, we already know that we need to re-organize your app’s navigation, add a search functionality or a bookmarking feature.
2. How does your current app work? Can you give us a walkthrough?
We often use this question to kick-off product discovery meetings with new clients. We allow them to guide us through their app as they know it, not only to get a better understanding of their business model and of what the app flows are, but also to identify potential pain points.
Sometimes, in these moments, they’ll show us a specific user flow and a bug would appear on the spot. Or they’d say, “this seems hard to use but we got used to it”, or “the design is dated but we didn’t consider it a big deal”, or “this takes a really long time to do but we don’t know how else to do it”. We’re there to help, so it’s best you’re honest about your app and its issues.
Getting a walkthrough of an existing app is a great way to find issues and bad user flows because you’re seeing it as it’s really used. And most of all, clients will always know what they & their teams personally don’t like about their apps. We ask as many questions as we can during this process, based on what you’re showing us - “Why do you do things this way?”, “You have this functionality but you don’t use it, why is that”?, “What part of this functionality is troublesome to you?” and so on.
3. What are the biggest troubles you face when using your app?
Sometimes it’s best to just ask. People who already have a functioning, fully-fledged app and who have been using it for a few years have enough first hand experience to know what's not working for them anymore. So the key part here is asking the right people: actual users of this app.
In most of our cases, it’s going to be the client’s team. We identify the types of users the app has (admins who can control everything, users with certain admin-like permissions, or users without access to admin actions) and we talk to members of the client’s team those roles represent. So let’s say: a higher-up in the company, a department head, and a regular employee.
If the client already has a development team, then they’re most likely aware of existing bugs, especially those in charge of QA. So we usually collaborate with these teams to better understand how the app works and to find ways to work together in solvings its code issues.
In other cases, actual customers will be the ones who hold all the information. In this case, we’ll need the client’s help to find current customers we can talk to. Alternatively, some might receive customer reviews or have a customer service department, so we ask for as much useful information as they can give.
When it comes to current customers, here are a few questions we ask to get an idea of your app’s pain points:
- What goals do you fulfill through this app?
- How do you use this app to fulfill these goals? Walk us through the steps you take.
- What troubles do you face when taking these steps?
- What would you improve in your experience of using this app?
- If you could remove or add something to this app, what would it be?
We go in more detail about this in our article about understanding apps through preliminary interviews.
4. Do you have any style preferences for the design? Can you share your visual branding with us?
Sometimes clients come with a specific image in mind. They’ve already researched design resources and they’ve probably seen dashboards, UI Kits or specific apps that they liked and which they felt inspired by. We encourage clients to share any visual references that could be useful for us, and then we take it into our own hands and turn it into something that works & looks good.
We sometimes work with already-existing dashboards, templates or UI Kits that can be easily transformed into code, such as our Laravel dashboards made in collaboration with Creative Tim. How does that work? We use these pre-made visual elements to design your app, and then our developers use the code element of these templates to bring those designs to life. This way, both the design and development processes will take much less, and it’s ensured that what we designed can be coded exactly the way it looks.
A lot of already-established companies will often provide a visual branding guide - this will contain their logo, brand colors, brand font, and any other visual elements (like certain illustrations or icons they already use). This way, we’ll already know what colors or fonts to use, which saves lots of time. Alternatively, if the clients want to go for a different style, we come up with something new. The key here is knowing what you want and communicating it.
5. Can you give us access to your app so we can play around with it?
You’ve given us all the information you have, so now it’s time for us to poke around and draw our own conclusions. It’s essential for us to have access to your app, so we can map out all the pages and user flows that we’ll need to redesign. And plus, it also helps us understand how it works, since we can act as real users.
What we recommend here is that you give us access to a testing environment so we won’t affect real data from your app. If your app is accessed through a paid subscription only, it’s best that you create user accounts for us to use. We can play around with that portion as well, to find any potential issues in the subscription creation process, but it’s also helpful to have login info for ready-to-go accounts. And most of all, we’ll need accounts for all user types.
6. Who are your biggest competitors and what do they do differently?
Another great way to determine what we can improve in your existing app is by looking at your competition. Especially those you consider to be at the top of your industry. This not only allows us to understand your app better, but it can also give us some insight into what others do better than you do.
If they offer the exact same things you do, then what sets you apart? Why would a customer choose them and not you? And what can you do better than they do? By answering these questions together, we can find potential solutions for your current app.
How much are we changing?
We’ve discussed your business and your app - what works, what doesn’t, and why it doesn’t look good. Another key item to discuss is how big of a redesign and code overhaul you want and/or need. Keep in mind - if it’s not broken, don’t fix it. It would be a waste of time and resources to improve something that already works.
So to determine how much we need to update in terms of UX and code, we have a few questions we ask, which can vary depending on what kind of app you have:
1. Is your conversion rate low and if so, where exactly in your current flow does it drop?
You’re probably providing a product or service. And at some point in your existing app’s flow, users might abandon the process and leave. Maybe they complete the signup process and when they get to the serious stuff they change their mind. Or they reach a pricing page that provides a trial but they abandon setting up a trial when they’re asked for banking information.
It’s important to analyze these aspects, to gather usage information and find out what part of your app makes users abandon what they’re doing. Most of the time you might not even realize what the problem is, since you’re not an actual user who’s never seen your app before. This, in fact, is another reason why we like to go through your app ourselves and act like potential users.
If you don’t have an analytics system implemented, there’s another simple way you can gauge how users feel about your app: you can simply ask them. Create a survey and post it to your platform as an announcement, or even email it to all users. Ask your users if they have trouble using your app, and if so, when and where, and what they wish was different about it.
Pro tip: don’t ask your users something like “What problems do you face when using our app?” right away. Start by asking if they have any problems with it in the first place, then get to specifics. This will help jog their memory, and will also weed out users who don’t have any issues with your app, and who, thus, won’t get you any useful answers.
Once we figure out what part of your flow affects your conversions, we can get to figuring out UX or code solutions. Adding more contextual help, key information that might not be obvious to new users, a progress bar to show what steps are coming up, pop-up guides, FAQs, access to a customer service chat, and more. If the problem is code-related, such as bugs that irritate users, we will identify these bugs through QA testing and then we’ll fix them and retest to make sure the user flows have been improved.
2. Is your current design in need of a refresh or an entire overhaul?
UI trends keep changing over the years, and the biggest example is the recent trend of flat UI as opposed to skeuomorphism. This is best seen through the evolution of brand logos, as lots of them have become minimalist. If your current app was designed when skeuomorphism was a trend, then it most likely looks dated now, as most users will be accustomed to flat UI instead.
That doesn’t mean that people will avoid using your app because they don’t consider it pretty. They might, but if the service you provide is exactly what they need and you do it well, a dated design won’t deter them from using your app. But if your services get good reviews and yet, you feel like you lack users, UI might be at fault. In fact, your competition might be performing better because of nicer UI.
So at this point, you have to be honest with yourself and determine if your app just needs a few style updates or if it should be entirely redesigned. Maybe you used a template that didn’t give you much creative leeway or you’ve rebranded your company over the years while the app was left behind.
A great example of skeuomorphism vs flat UI. Source: Icons8
What we can do here is take a look at your app together and discuss what works and what doesn’t. By blending in ideas from your team and our team, we can come up with useful insights and ideas. Our designer eyes will detect what doesn’t look good, and we’ll come up with improvements.
3. Should we refactor your app’s code as well?
One thing is for sure - if we make changes to your app’s user flows, code will be involved. And it will be involved for sure if we code the design changes we make as well. So it begs the question - do we also carefully look through and refactor your code as well?
First of all, you might ask - what does that even mean? Refactoring code means making improvements to an app’s codebase, without making functionality changes. It will act the same, but behind the scenes it’ll run smoother. If we’re improving user flows, refactoring your existing code will help create a smoother baseline for new features, including down the line. Plus, it’s a great way to identify and fix bugs.
There are numerous benefits to refactoring a pre-existing app’s code:
- It’ll make its code cleaner, easier to read, understand, and to build further upon. This is especially beneficial for older apps that contain walls of code, as unnecessary bits will be removed and the code structure will be cleaner.
- The development team will get a better understanding of the app and thus, will have an easier time adding new features.
- It’s a great way to find bugs you might not have even been aware of. Even with QA testing, some bugs are such edge cases that only looking through the code can help you find them. And most of all, with older apps, there’s bound to be technical debt (old bugs that were never fixed), which can be fixed through refactoring.
- It won’t be too difficult to onboard new developers in your project, as the code will be easier to understand.
- You can publish updates and make them accessible to existing users while the code is still being improved behind the scenes.
But how do you know you even need this? Usually, the best way to know is to simply have a senior developer take the time to look at your code. If they’re taking hours to understand what’s happening in there, that’s a pretty clear sign you’re in need of refactoring. Also, if your app was launched years ago and you’ve never refactored its code, that’s also a pretty good reason to do it now. Pushing it further away will only make it more difficult and costly down the line.
4. Do you want to adapt your app to mobile devices as well?
Let’s say you have a web app that’s been specifically designed & coded for desktop, but which has a responsive version as well. It’s the same thing but shrunk to a more narrow screen and with content stacked one below the other. But your analytics info says a lot of people use your app on their phones, and some might even complain about the bad user experience on them.
Admittedly, this depends on the nature of your business and what kind of users you have. But if your research and/or customer reviews show that you’re losing conversions because of this, it might be a good time to invest in adapting your app for mobile.
If you decide to do this, what does it entail? First of all, the way we create our designs ensures that we can adapt them to mobile devices easily. So in terms of design work, it doesn’t exactly mean our work hours will double. It’s just a matter of taking desktop designs and adjusting them to smaller screen sizes, and where needed, creating different screens that are more suitable for mobile users.
Just like the desktop app, we’ll play around with your app’s existing mobile version (if there is one) to find potential pain points and figure out what we can improve. Alternatively, we can finish the desktop redesign first and adapt those new flows to mobile. This way, we’ll already have a starting point.
5. Should we fix your existing bugs?
The older an app is, the higher the chance for major technical debt. Over the years, for budget or time issues, you might have ignored bugs in your app and chose to focus on new features instead, to grow your business.
But now, users are coming in and complaining about bugs in your app - bugs that you’ve been aware of for years, but which were never a priority. After a while, these users will get tired of repeatedly complaining about bugs and will eventually head to your competitor.
In this case, it might be a good idea to carefully test for, and fix these existing bugs, especially if you’re doing an app redesign. If you’re changing user flows, these functionalities will interact with pre-existing code and might even lead to new bugs. Fixing existing issues will create a better starting point for new features, will help old code and new code interact better with one another, and will, of course, improve user experience.
What does this activity entail? Before coding the new design, a QA team will sit down and test all user flows in your current app. With your help, this team will detect edge cases and find potential abstract bugs. The QA team can also look through your older dev tasks lists and bring those unfixed bugs back to the surface.
Then, of course, the dev team gets to fixing these issues. When they’re done, the QA team will retest and make sure everything works as intended.
Making sure it works
Once the new design is complete and approved by all stakeholders, we usually head straight into development. Before we do so, if you want to be sure you’re heading in the right direction, you can do A/B testing to find out if current app users prefer the old or the new design. This can give you an extra layer of confidence before you permanently transform your existing app.
Once all the coding is done, we do our own testing to make sure it runs smoothly and that we fixed all lingering issues. So that once the new app is in your hands, there’s a low chance of you finding any more bugs. And your users most likely won’t either.
When you officially launch your app’s redesign and/or code overhaul, make sure to announce it to your users, partners, clients or any other stakeholders. Their data in your app won’t be affected, and they need to know that for sure. You don’t want users to enter your app one day and freak out that everything changed. In fact, it would be a good idea to announce it before the launch.
Plus, on any dashboard or info pages, we could add messages that inform users of the new changes so they’ll know exactly what to expect. UX done properly shouldn’t be hard to figure out, but you can still provide video walkthroughs if the user flow changes are major. This works best with older, large apps with a lot of functionality.
And most importantly, don’t forget to look out for user reviews. If they’re not happy with the new changes, start a dialogue and figure out why. Create surveys and email them to your users, or post them directly to your app. Ask first if they like it, and if they say no, ask them to name a few reasons why. Just like we mentioned earlier, don’t jump straight into asking “What do you dislike about our redesign?” - start by asking how they feel about it in the first place.
The key to this stage is keeping a dialogue open between you and your users. Be open to feedback and listen to what your users say.
And there you have it, these are the steps we usually go through when redesigning and/or improving the code of an existing app. Overall, it all boils down to setting clear goals, knowing your users, finding your app’s pain points and carefully listening to feedback. Relaunching an app can be scary, but do it right and it will work in your favor.
Looking to get your app redesigned or having its code improved? Contact us and let’s see what doesn’t work for your app and how we could fix it.
Not ready for a redesign yet, but you would still like to get a sense of the work you will need to put in? We provide a free UI/UX assessment, no string attached.
You book a free consultation call and we evaluate your application against core UI/UX best practices. You then get an overall usability score for your product and actionable improvement recommendations for 3-4 complex screens (screens packing a lot of functionality). Read more about how you can get $3k worth of expert UI/UX advice for free by clicking on the banner.
