UX/UI Design

UX/UI Design

UX/UI Design

User Interface (UI) Design and User Experience (UX) Design are both important in product creation, especially in digital products and services. Although still a relatively new field, companies are beginning to realize the importance of optimizing their product/platform design to win new customers, satisfy and retain old ones via the UI and UX designs. Not so long ago, many people started talking about ‘usability’. Thanks to the work of Jakob Nielsen and Steve Krug. In any case executives did not really see the importance; having a product with tons of advanced features was more important than something highly usable but technically limited. The real impact was felt among users who interacted with the products actively and daily. How well integrated the UI and UX of your product/platform is will determine the overall satisfaction gained by your customers to make your product or technology easy and inherent for the users. When it comes to product onboarding and launching, interaction models, design wireframes, user task flows, storyboards, sitemap, and UI specifications, combining several years of experience in the Biotech industry, Data Analysis and Software Development, HannaPerle, is able to observe the target customers and provide the best solutions to make their experience with your product a fulfilling one – with usability, adaptability and functionality being the hub. Leave the worries of your platform’s interface, visual impression, screen layout, page transitions, animations and other mini interfaces to our UI designers. Let our UX designers take care of how your application’s interface work, with a focus on structure, functionalities and processes to provide seamless experience for your users. We will cooperate with you and your team to provide customized solutions to blend your UI and UX as seamless as possible for the best interaction, appearance and functionality of your product.

Our aim is to connect your business ideas and goals to the needs of your customers thereby creating mutually satisfactory experience. The world has changed, and products now succeed only if they provide stunning UX/UI.

Information Architecture


Information Architecture

Think about the expectations of the customer when they want to use your product – what are the things they need for a complete workflow using it? This information should be provided from A – Z and in the simplest comprehensive way. Since customers are sometimes lazy and do not want to make any extra effort to get what they need and will pay for, you need to motivate them with the right information architecture so that they would easily adjust to the functionality of your product and find all they need without big effort.

Data Architecture for Easy Processing

Given that new business models and techniques are driven by data and information, Data Architecture is as much a business decision as it is a technical one. It describes the data structures used in a business and software development. This addresses data storage – for easy future retrieval; data in use – for easy access; data description – for easy use and application and data processing – for easy control of information flow.

Navigation System for Product Onboarding

As UX designers and software developers, it is our task to provide our clients a wholesome experience – hence a smooth journey from the start to the end of the product onboarding and usage. This ensures a higher percentage of returning customers, since easy navigation is more essential to users than search.

Information Science for Better UI/UX

The analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information are important matters to consider for better architecture in product design. Great products shouldn’t be just easily usable but seductive, pleasurable and inspiring – providing a great end-to-end experience.

Product Database Development

Design and develop databases with ease. Cost of development should barely be a concern, considering the money saved futuristically and the enhancements it will offer your data, especially when incorporated with conceptual, logical and physical considerations.

Information Framework

This provides standard definitions for all the information that flows through a business and between service providers, partners and users. By adopting the right models and using them in applications and UI, you can: reduce integration costs with enhanced UX and save hundreds of design hours.

Brainstorming, Wireframing and UI Prototyping


Brainstorming, Wireframing and UI Prototyping

UX Ideation Techniques

To brainstorm for UX ideations, you need to highlight the problem you want to solve and then identify imaginable solutions. The perceived worst solution may turn out to be just what you need. So do not leave any stone unturned in brainstorming to generate the best possible ideas. Imagination is better than knowledge.


Wireframing is a visual representation of a user interface. It is the structure on which your product prototype is built on. The wireframe shows the main information group, outlines the structure and layout. If created correctly, the wireframe describes the user interface and will be the main structure of your product.


Think out of the ordinary and explore potential design solutions – consider new realities to unimaginable extents. Explore multiple media to get a feel of the realistic operation of your product based on pre-defined terms. This would help generate more innovative ideas. Basing your ideas on psychological knowledge and data gathered from various research, solutions may be visualised as sketches, diagrams, wireframes, prototypes and final products at long last.


The prototype, which comes at the very early stage can save a lot of developing cost and time. For starters, you can simply draw some sketches on a piece of paper, take pictures of them and then join them together using simple design tools. This can be done for both desktop and mobile apps. The initial sketches can then be advanced into interactive wireframes. The prototypes (simple or advanced) must be interactive and fit the final user interface as much as possible. It should simulate the interaction between user and interface as realistically as possible, in other words, function and give outputs like the real product would.

Interaction Design


Interaction Design

User interaction with products to provide 100% engagement is not only paramount to converting warm leads into sales but also to high customer retention level. The way customers interact with our products is important. The simpler the interaction the prettier it is.

With a special focus on user behaviour, we provide the best possible interaction between your target users and your product or platform.

Design Focus Integration

Information should be integrated in the design in such a way to enable the user to best understand the interaction. The users should be the focus of your design. If your product will be interacted with from international sources, you may want to think about the best possible design integration that will accommodate the access from different locations.

Sitemap for UI/UX

Sitemaps, as hierarchical diagram, show the structure of a website, application or platform, with the aim of providing easy content classification by UX designers. They are an important step of the user centred process as they ensure content is in places users would expect to find them. They can also be used as a reference point for wireframes, functional specifications and content maps.

Task flow

Focus on single tasks and keep it simple. With a linear description, you show the high-level steps to take to get to a specific goal. The flow does not branch out with other options or decision points but keeps the linear and sequential pattern. Since the design is simple, it is helpful in creating thorough and sequential flows and especially serve as a precursor to designing potentially complex user flows.

Information Design

Intuitive information design is needed to succeed in a highly competitive digital market full of consumers with cognitive overload and an extremely short attention span. As a first step in the design process, you need a good flow. Flow depicts movement and designers need to consider how the user will navigate through the product – a website or an app. It is therefore the first step towards creating a working prototype. Creating the flows will ease the information design, since you’d think about what happens to the user before & after they visit a particular page and help them focus on the important things.

User flow

User flows are more complex than task flows, with multiple ways to begin/enter and end/exit the flow. The idea is to integrate multiple types of elements, such as: key pages (e.g. for websites) or key screens (e.g. for apps), action buttons, user decision points, and system decisions. User flows are for specific user (i.e., a target audience group or a persona). It doesn’t have to be linear but can branch out in a non-linear path with the goal of seeing possible turns through the route to optimize the user experience.

Visual Communication


Visual Communication

Product instruction guides are read with reluctance nowadays and users would rather skip the helpful information necessary for better product usability. Times have changed and regardless of inclusive instructions in product guides, users are quick to blame you should they have unsatisfactory experience with your products. A mixture of knowledge and methods based on psychology, anthropology, sociology, computer science, graphic design, industrial design and cognitive science are employed for enhanced user compliance with products.

Animations may be used to showcase product attributes to customers – to interpret the functions of a product, along with its features in a comprehensible way. Evidently, the importance of this kind of visual communication in the industry is rising.

Product Usability Level

The product designer is responsible for a comprehensive approach to communicating with customers or clients in the best available and compatible visual means. Advanced visual communications can increase the usability level of your product. This method has been shown to have higher success rate than textual instructions. We ensure that the UI visually communicates the path laid out in the UX design.

Analytical Thinking and Creativity

If you’d visualize UX at the crossroads of art and science, you’d see the high demand for acute analytical thinking and creativity – an outstanding blend of visual Art, hard-core Psychology and Mathematics. This process involves analysis of human behaviour and acting upon the metrics. With these metrics you can come up with solutions to well understood problems – product usability for instance.

Graphic Design

This focuses on the creation of major graphics for product illustrations. It may also include broader advertising campaign, website, or print materials. The graphical elements created fit within a broader visual communication process. The complexity of colour selection, team collaboration communications, and new file formats that make images smaller in file size and more portable overall are also considered. The results are not only essential for the product usability but also may be used in marketing campaigns and brand awareness purposes.

Digital Animation

If done and used in the right ways, digital animation technology can bring matchless values to business and entertainment activities. Since humans tend to remember videos and images more than textual contents, it is natural that animation can be effectively utilized to enhance the reception levels of product illustrations. Animated videos can effectively improve the quality of reception of the product user.

Computer Illustration

Digital tools may be employed to make images for easy product illustrations, providing an effective means of encouraging customers to use a particular product. Digital product illustration is a huge support for branding and the technique may be used as a tool for easy product usability. In product illustration you want to show what the values of the item are; how those values are important for the user and how to make the illustration understandable.

Testing the Design


Testing the Design

By testing your design, you can build outstanding products that work for people and ensure return on the investment.

Incorporate the necessary UX design testing process to save you unforeseen costs, guarantee user satisfaction and successful product launching. The testing process includes behavioural and psychological evidence of the modifications necessary to meet your customers’ needs. We keep testing throughout the product design process to ensure consistent improvement.

Since UX/UI design aims to find a pleasurable, seductive and inspiring user experience of a product, the results of the work should always be measurable through metrics describing user behaviour. HannaPerle evaluates your product by testing the designs with real users in real scenarios under the supervision of qualified UX researchers. This is essential to deeply understand the user concerns and usability issues so as to become better at correcting them.

The Science behind our design testing methods enables us to gain deeper psychological insights into the potential users’ behavioural patterns, preferences and options on how to improve the product and the brand at large.

Usability Testing

This is a user-centred design philosophy with the aim of effectively solving a problem accomplished by repeated testing and with many iterations on the design. This provides an impeccable way to gain valuable insights into what works and what doesn’t.

Test Plan

Laying out a plan for the test will help you save time and cost. For starters, a plan may include the following highlights:

the features, functionalities, tasks, and results to be tested,
How to specifically measure the success or fail-rate of the test,
Recruiting real users to actively test the design and give sincere feedback.

Running the Test

Choosing the right test location or scenario should be well considered. The ‘User’ should be persons with easily readable body language, such that you can easily observe their physical expression to the product usage – e.g. if they are struggling or intrigued with the functions in other words, observe the needs, behaviours, goals, and/or frustrations.

Design Validation

You may validate the usability of a digital product or service at any stage in the design process. This serves to assess the usability of the developed concept or prototype of a physical or intangible product or service. When validating, you want to check if any issues will be encountered when interacting with the prototype or final product. You also check for the completeness of the user experience when using the product and if the users’ needs are fully met.

User Test Documentation

Having a summarized record of your findings will help to know which areas to focus on in the design optimization, if need be. Your documentation may be one or more of the following: Spreadsheet; audio recording; screen recording. It could also be in the form of easily relatable sketches. A properly documented design testing also has the advantage of serving as a guide for your next iteration or design decision.