Creating an appealing and intuitive design isn’t about placing elements on the screen and adding some color. It’s about a deep and thoughtful process of researching, testing, and building a customer journey that will be pleasant for users.
This article will tell you a lot about the role of a product designer in the development process and the main ways Yalantis makes it possible to turn your idea into a beautiful design.
UX vs. UI design
At Yalantis, we’ve built a skilled team of UI/UX designers who work to deeply understand customers’ needs, then craft powerful designs for their web and mobile products.
Still not sure about the terms UX and UI? Let’s define them and see how they differ.
UX stands for user experience; the aim of UX design is to make an interface understandable and convenient for users. The quality of a UX design is determined by how easy it is for a user to interact with an application. To create an intuitive interface, a designer conducts detailed research, analyzing best practices, adapting common design patterns, and coming up with the best possible UX pattern to solve users’ challenges.
The UI, or user interface, is all about aesthetics and usability. When crafting the UI, the designer thinks about how to make an emotional connection between the user and application. Designers may choose eye-catching colors and typography or add graphics and beautiful pictures.
Altogether, the UX makes an app useful and meaningful, while the UI makes it easy to use and beautiful. Both parts are equally important. Few people will use your app if it looks beautiful but has absolutely terrible navigation and element positioning. And not all users will enjoy an app with a motley or outdated design.
The role of the product designer at each stage of development
In one of our previous articles, we wrote about the phases of our development process: negotiation, discovery, development, and post-release support.
During the negotiation phase – the first phase of our SDLC – our designers negotiate the product vision with you to make sure their designs will align with your expectations. They also estimate the time needed for design during this phase.
The project has started, so it’s time to turn your ideas into reality.
Step 1. Research
Our designers start by conducting detailed UX and UI research. They carefully analyze the project requirements, think about how to solve specific design challenges, and consider what patterns can help us implement the design.
During the research phase, we provide you with the following deliverables:
UI mood board. Our research continues with creating a UI mood board that helps the designer capture the look and feel of your product, its visual style, and its tone of voice. Typically, a mood board consists of images and colors that will be associated with the application. For instance, check out this UI mood board for Talos, the project we recently worked on:
User flows. User flows are the very first text-based wireframes for the project. They allow us to place the user into the flow of the application and determine if the conceptual model agrees with the user model. Also, navigation represented in visual form is easier to understand. At this stage, we also define your project’s information architecture. The resulting diagram shows all components of the app and how they’re connected.
UI concept. At this stage, the designer can be free and creative as wind and create very first concept screens for the app just to get a feel for the project. Thanks to this step, you’ll be able to see how the app could look and work in ideal conditions. When the concept is ready, we send it to you for feedback. Here is one of our concepts that you can find on our Dribbble page:
Read also: UX Design Techniques
Step 2. Architecture
The first concepts are ready, and the designer is sure they’re on the same page with the client. Now it’s time to design the whole app!
Wireframing is a stage that brings more clarity to everything we already have. Wireframes offer a visual interpretation of the user and business needs for any given feature. They’re a schematic representation of the app that demonstrates how interface elements will exist on pages. To better understand what wireframes look like, take a look at our wireframes for ConnectHome, an app for home automation.
Here are several ways you can benefit from wireframing:
It takes less time to make changes. Changes in product design are common during development. With wireframes, changes can be made within minutes. On the other hand, changes to a fully designed screen may take much longer. So by creating wireframes, you save time on changes and hence cut development costs.
Our developers can start development without waiting for the final design. If you have a strict release date, the development team can save time by getting started right after you’ve accepted the wireframes. They can create basic elements and then add details later.
Improve UX copy. Wireframes help to arrange fonts, lists, and headlines neatly and aesthetically. While wireframing, a designer figures out the optimal font size, head position, and content quantity by trying different options. Also, they can search for the best formatting to maximize readability and persuasiveness.
First, our designers create low-fidelity wireframes and send them to you. These provide a very basic structure that shows how the main elements are situated. After you approve this initial version, we send these wireframes to our developers so they can immediately get to work. They analyze the navigation and create an architecture for the app.
Step 3. Composition
Next, we get to designing high-fidelity wireframes. Our designers concentrate on refining the graphics, spacing, and layout to get a more precise vision of the end product. At this stage, our developers can start implementing basic elements of the app.
Now it’s time to add some color and a final flourish to our wireframes. Here comes the most significant moment – our designers come up with the visual design of the product.
And that’s the point when all our knowledge about the product comes to the stage. All the information from research, product vision negotiations, UI mood boards, and UI concepts are put together to create a stunning app design that builds an emotional connection with users.
We make icons and other user interface details clear and accurate and make sure they evoke positive emotions. We also pay attention to the information hierarchy and content structure. To ensure your typesetting is both professional and appealing, we follow the typographic checklist by Ilene Strizver.
As a result, we get the final appearance of the product. Check out examples of our JetJournal design:
Before designing the whole UI, a designer shows the prototype of the application. Prototyping aims to breathe life into wireframes. Static high-fidelity wireframes are unable to convey animation. But prototypes with interactions can do it pretty well.
A prototype is a live version of the design: you can tap buttons, send forms, open menus, and so on.
No long-term collaboration is possible without having a common vision and being involved in the project’s ideas. A designer should be involved in the project throughout the whole process of app development, not only at the design stage.
By getting deeply involved, a designer really turns into a product designer. Our designers take an active part in the development process even after creating the designs. They consult our developers on implementing UI components and update the design specifications in a timely manner.
In case of change requests, a designer conducts research and comes up with a detailed estimate of the changes to all areas that will be affected.
Testing is hard not to mention. Companies like Yalantis have whole QA departments that do their best to find flaws in designers’ hard work. However, sometimes it’s even more effective to do five-minute testing. It’s a good way to check some parts of a ready design or wireframes directly on users.
Our QA specialists test each feature. Besides testing the functional part of the application, they also pay attention to the app’s usability. They share their concerns about usability issues with designers, who try to improve the usability in accordance with this feedback.
At this final stage, a designer works with the development team to ensure the specifications are clear, understood, and implemented as intended.
Before the official release, sometimes the product may first be released in a limited segment (beta testing) and tested in the real business environment. The latter is called UAT, or user acceptance testing. During beta testing and user acceptance testing, users try out your application and share their feedback. Designers then make changes according to this feedback and present an updated app design.
You’ll never know exactly how your app works under conditions you can’t predict. That’s why we offer post-release product support, with the help of which you can quickly make changes to an app after the initial release.
For instance, it may happen that your users come up with their own navigation flows and don’t use your app as you expected. In this case, a designer should rework the app’s UX or add new features to prevent misuse.
Or you might start getting feedback from users with suggestions for improvements. For instance, when users start complaining about a complicated UI/UX design, a designer may make simplifications quickly so you don’t lose users.
You yourself might also come up with an idea to enhance your app. With post-release support, we can define the scope of work and get down to the design. The workflow is the same as during development – we conduct research, create wireframes, come up with a visual design, and then deliver it to the development team.
What helps a designer perform better
Every company has its own tips and tricks to perform better. We’ve decided to reveal some of our secrets for creating masterpieces and delivering them on time.
A design specification is a crucial document that contains all information about a design that’s useful for developers. It aims to eliminate misunderstandings between the designer and developers and save time for developers.
Design systems are collections of reusable graphical components, design rules, and style guides that define a common visual language for product teams. They consist of colors, icons, pattern templates, and guidelines that help create a consistent product and facilitate the design process.
By creating a design system, you get the following benefits:
Strict order in the project so you can easily access all files and never miss important files.
The quality of all screens stays at an equally high level. With a design system, your product won’t look like a patchwork blanket if you decide to add new features or remove outdated ones. Also, a design system facilitates development, since the development team only needs to add prebuilt components.
Developers get a clear vision of how to build the required components to maintain a unified style. This way, designers don’t spend time clarifying the design of each element; instead, they can immediately get to work.
Thanks to the design system, we have rules even for naming files and folders. Such dedication to detail provides clarity and order to the project. Hence, it won’t take a lot of time to figure out what’s going on in the project in case a new designer joins.
A design system makes users’ lives easier by reducing the cognitive load that exists when the user switches from a mobile product to its desktop version.
A user interface kit, or UI kit, is a collection of files that include the most important UI elements for the projects: icons, fonts, custom buttons, navigation bars, color palettes, etc. Take a look at the UI kit we created for a recent project:
The main purposes of UI kits are to optimize the workflow and save money. Just like design systems, they help developers and newcomers to the project quickly hop on board and make the app more consistent. Reusable parts are quickly added to new screens, so a designer can quickly add basic elements to the screen. This saves time and hence reduces the cost of development.
Every platform has its own style guidelines that help create a smoother user experience. Android has Material Design, while iOS has the Human Interface Guidelines. It’s crucial for designers to follow these guidelines when designing native mobile applications; knowledge of these guidelines is a basic requirement for designers at Yalantis.
We’re adepts of Agile methodologies, which help us perform better, deliver iteratively, and always keep in touch with our clients. As a rule of thumb, we apply the Scrum methodology to our development processes. Scrum is an Agile methodology that divides the whole scope of work into sprints.
Sprints at Yalantis last two weeks, during which time we design and develop a particular part of an application defined in the sprint backlog. So instead of deploying the whole application at once, we work iteratively.
Thanks to this approach, you can see the results of our work every two weeks instead of waiting till the end of development. This helps us get feedback on developed functionality and correct the project plan to be sure the app meets your expectations.
Technology is in the process of constant growth and development. That’s why self-education is important for any product designer. We need to constantly educate ourselves by taking online courses, reading useful articles and research, listening to podcasts, and even taking a look at spheres adjacent to design. Our Yalantis design team has a great bookshelf with useful design literature.
As you can see, designers establish the look and feel of the product. Their suggestions and professional advice are a guiding light for developers and a source of tech ideas.