November 13th, 2024, posted in for_founders
by Adelina
Ugly apps are rarely just about aesthetics. They usually come with a lot of usability issues. Just as designing an app is not only a matter of choosing the right typeface or color. “Designed” means carefully thought out. It means every element works together with the rest of the elements to form a coherent whole. This coherent whole is our goal whenever we redesign an app.
A case for product re-discovery
There are dozens of frameworks out there aimed at helping you launch your product. Product discovery methodologies have skyrocketed and it's no wonder. Being an innovator has become the start-up equivalent of a rock star.
Fewer speak about what happens next. And even fewer about how, despite everyone's best intentions, an app might unintentionally end up looking like this intentionally nightmarish UI experiment. People never plan for ugly. Ugly just seems to happen along the way.
So, instead of yet another cutting-edge-launch-your-app-in-5-days framework, we focus on working with what`s there, hidden behind the UI debris. Much like restoring a historical building or a painting, redesigning an app is about recovering the initial goals and business vision someone had for their product. Goals or vision which might be unintentionally hindered through bad design and time passing by. Some might call it “design debt”.
So, the re-discovery process might mean doing one or all of the following:
- remembering why a feature or UI element was added in the first place. Does it still stand? Can it look better while achieving the same goal?
- weeding out features no one uses or unifying redundant flows
- visually integrating features which were hastily added in because they are needed, but feel out of place in the UI. Redesigning screens which were originally implemented having frontend development speed in mind, not user experience.
- choosing the right design personality for your app, based on your business goals and the purpose of the app
As you've probably noticed, we haven't mentioned typography, layout, spacing or color even once. These are just tools. At the end of the day, the goal is to have an app which looks significantly better and is significantly easier to use.
Credit: Michal Malewicz
With this in mind, we've broken our redesign process into 4 steps.
Step 1. Conduct an UI audit
In this first step, you give us a test account and let us run wild. The purpose of the UI audit is two-fold: get familiar with the app and identify repeatable patterns which we`ll later design as reusable UI components. A huge part of UI design is doing the most possible with the least number of elements. This is also what gives interfaces a cohesive look and ensures a well-rounded user experience.
As a product owner, your expertise is invaluable for the first aspect. So, in the process of getting familiar with the app, you`ll hear us ask questions like:
- Who are your main users? Besides them, are there any other types of users engaging with your app?
- What would you say are the main pain points of your app?
- Who does the app compete with?
- Are there any identifiable design constraints?
In addition to this, we comb through the app for patterns which will then become UI components. Rather than just looking at button styles, checkboxes and input forms, we also look at what actions are performed most by a user. For web, mobile and desktop apps, this would be some variation of CRUD operations. We then try to establish interaction patterns by asking questions like: Would it be better to edit items in a separate page or a pop-up? It seems like the tables could use some advanced filtering, what would that look like? By answering these questions, we are also actively redesigning the UI components which go along with them.
The UI audit also helps us decide what screens/flows to work on first. This is important for the second step, when we establish a design personality for your app. Rather than resuming ourselves to abstract design systems, where all you see are disparate elements or mock example pages, we always redesign top down. We create “fully-functional” screens, out of which design systems grow organically. Instead of a bunch of elements which tell you nothing about how they work together visually, you get fully redesigned screens with a personality.
Step 2. Establish a design personality
Apps don't exist in a vacuum. They tie in with a particular type of market, users and a main business goal. In the first step we got familiar with all of this and now it's time to establish a design personality to accurately reflect it.
For most web apps, dashboards and tables are a good place to start. Dashboards are great because, on the one hand, it's the first thing users see when logging in and, on the other hand, they are packed with UI components: charts, cards, tabs, navigation menus. Establishing how the dashboard looks pretty much sets the tone for the entire look and feel of the app.
Of course, personality and purpose are very much interconnected. For example, an analytical dashboard should allow users to drill down into the data, so it would probably have a lot of filtering and data export options. On the other hand, a strategic dashboard allows executives to quickly see trends and metrics which are important to them. So this type of dashboard would look quite different from the first one. It would focus on higher-level reporting and probably have a lot of KPI cards and key results neatly summarized.
Another thing your users probably see a lot is tables. Getting tables right is crucial, especially for data-heavy apps where they account for most of how the app feels. So, as part of redesigning tables to be more user-friendly, we usually try to:
- Condense information where possible. Can columns be combined or removed? Can we hide or group columns?
- Increase legibility through padding and row height, redesign the table header
- Improve the sort, filter, search and pagination functionalities
- Replace text with visual cues where possible (e.g. action icons, status labels with different colors for various states)
Step 3. Break everything down into components
Now that we have the first screens, we can start building the UI components library, which we`ll be using throughout the app. Reusable UI components are pieces of the interface you can use in various parts of your app. For example, you can have a button component with various states (pressed, not pressed, active, disabled) and various sizes, which you can use to build various UI instances.
Following atomic design principles, we treat complex components as a sum of several more simple components. “Atomic” components are components which can`t be broken down further without ceasing to be functional (e.g. removing the text label from a button renders it useless). Complex components are built up from atomic components and can vary from a basic search form (which is a form label + an input + a button) to global elements, like headers and footers.
This approach keeps interfaces looking consistent by rounding up all the components that make up your UI and making sure they work together.
Source: Creative Tim
If you would rather go with a theme, we often work with UI kits created by our partners Creative Tim. These are based on some of the most popular design systems used today, like Material Design and Argon. UI kits pretty much do everything described above, they are ready-made UI components libraries. You can check out some of the most popular themes we've used in our projects here.
Step 4. Iterate on existing screens
Although described as steps, going between screens, basic components and complex components is a back and forth motion more than a linear process. Based on your feedback, we tweak screens, flows and therefore the components that go along. We iterate on existing screens until everyone is happy.
UI redesign is a natural part of an app`s progression. Whether you want to take your MVP to the next level or your app has been suffering from design issues for quite some time, we can help. Drop us a line at [email protected].
