What is UI and why does it matter?
Let’s begin with the word “interface”. To put it simply, it’s a tool that allows two systems to interact with one another, which leads to a particular result. And if you look closely, interfaces are everywhere.
Take a bathroom sink tap, for example. There are 3 options: the one with knob handles, the one with a lever, and a sensor tap. Materials and designs can also vary. But in all of these cases, we’d be talking about a tap control element that allows you to adjust temperature and water pressure. And it makes it sort of an interface.
If you are a plumber, then, of course, you can choose one of the options yourself. But it’s better to ask your client how they would prefer to interact with the plumbing system. Also, it would hardly occur to you to install a water column in the middle of the bathroom: such an option is certainly not up-to-date, and it doesn’t meet the user’s needs.
Same with applications: user interface (UI) is what the user sees when they launch your app. The designer’s goal is to show the user how the application works and bring them to the desired outcome, whether it is ordering groceries or setting an alarm clock. But how do you know what your users expect from the app? How will they interact with it? What are their preferences? All these questions fall within the context of UX design (User eXperience).
Why is UI inseparable from UX
UX design is a so-called “user experience design”. It is a ground for UI design — “user interface design”. Each of them has its purposes.
| ⚙️ UX goals | 🎨 UI goals |
| Learn about people’s past experiences and current needs | Create an interface based on those needs |
| Develop a user flow — the user’s path towards some task | Develop the visual part of the interface (fonts, color schemes, buttons, illustrations, animations) |
| Create a prototype | Style a prototype |
| Make things convenient | Make things nice and clear |
| Provide a personalized and memorable experience | Provide an aesthetic pleasure |
Going back to the sink tap example, UI is everything related to materials, colors, shapes, and temperature markings, and the way it all works is UX.
As you can see, UI and UX are closely connected. You cannot implement UX without UI design. But even the most beautiful interface will have a poor response if it doesn’t reflect users’ needs.
No wonder, it’s common to view UX and UI as a single entity, and to call a corresponding role as “UI/UX designer”.
How to design an interface
The process of developing a user interface normally begins with user and competitor research and ends with testing and developer handoff. However, each agency may have some of its own tricks and a unique order of steps.
We already have an article describing our design process in general ⤵️
Here we want to walk you through the UI development process, using one of our projects as an example. Friday is a mobile application for arranging parties with friends. It allows users to create their own events, as well as join friends’ activities — meeting at a bar, going to the movies, or throwing a house party. So step one is…
Do preliminary research
The UI design process should start with analytics. Among its goals are:
- defining the problem that the application should solve;
- understanding your target audience, their goals, motivations, lifestyle, as well as their experience of solving the said problem and interacting with similar apps;
- finding out how your competitors address that problem, and what you could improve.
You can read more about competitor analysis and user research in our blog ⤵️
For Friday app, we conducted a quantitative and qualitative competitive analysis, while our client provided us with customer data.
Interestingly, there were almost no applications on the market that would do exactly the same thing. There were apps for organizing large events, but only 1 or 2 worked for small groups. So we had to turn to indirect competition, for example, social networks.
Map out a UX flow
Based on all the research information, analysts create user scenarios, and UI/UX designers develop a user journey map. Here at Purrweb, our go-to tool for this stage is a mind map (a.k.a. a functionality map).
A mind map is a diagram depicting all the app’s features and navigation between them.
A mind map allows you to see the entire user path through the app, which is very convenient since the designers’ goal is to simplify the flow. For instance, in Friday app, we were able to reduce the process of arranging a party to three simple steps.
Mind map takes only 8-10 hours to create, but it allows you to avoid misunderstandings with the client and set the ground for a full-fledged design.
Create first layouts
Once the client approves the mind map, it’s time to move to wireframes, rough outlines of the product’s content and structure.
The final designs can differ from the wireframes
Wireframes allow you to elaborate on the navigation, map out the main elements on the app’s screens, and figure out how the user will interact with these elements.
Design a concept for your client
Not every agency follows this step, but we’ve come to understand that the design concept is the best way to reach an agreement on the app’s design.
The concept presentation focuses on several fully designed screens. Basically, at this point, we lay the ground for the entire application design. During this stage, Purrweb designers also create UI kits from key interface elements (buttons, icons, widgets, indicators, templates). This practice proved to be very useful: later on, it greatly facilitates the developers’ work and decreases associated costs.
We go for the screens that are the most content-heavy in order to incorporate as many visual elements as possible. Then we build a UI kit from what we have — to set a direction. In fact, the color scheme, fonts, some cards, buttons — they are all created at the design concept stage.
We use Readymag to develop the concept. It’s a convenient online tool for creating landing pages and presentations. Such a presentation does a much better job at putting across the future app’s idea than a couple of screens do.
Apply the UI to the rest of the app
The client usually approves color schemes and fonts along with a concept. Then all you need is to apply the design to the rest of the app and add more details like icons or illustrations.
Don’t forget that UI design should consider user preferences too. Initially, we chose a dark theme for Friday’s interface, because it associates with parties. But a lot of people don’t like a dark theme in general, so to give users a choice, we added a light theme as well.
Develop an interactive prototype
A prototype is an interactive model that reflects the look and feel of an application. Its “clickability” allows you to trace the logic of your app. Therefore, the designers themselves are those who need it the most — to make sure there are no errors in the user flow. Other benefits of prototyping include:
- enabling developers to double-check themselves during the development process;
- being an asset in usability testing;
- helping to prove the idea’s viability to potential investors.
There is a lot of UI design software that works for prototyping as well. Purrweb designers prefer Figma — it is a cloud app, which is ideal for teamwork. It allows you to work together on the same project and keep changes in sync. Moreover, Figma offers many features that make UI design easier, such as auto-align and bulk editing.
Once a prototype is ready, approved, and finalized, it’s time to hand it over to developers. Purrweb is a full-cycle agency, so our designers work side by side with the developers and receive feedback each time they submit new design materials. They are always aware of any design flaws that might turn up during the development process. It allows them to prevent such problems in the future.
For more than 7 years, we’ve been helping startups to create beautiful and easy-to-use applications. If you have an idea but don’t know where to start, fill out the form below, and we’ll get back to you.
