UX/UI and Visual Design at Melon

In the next two years, user or customer experience will be the companies’ battlefield, marketers predict. It is one of the areas in which expectations will increase the most and will scoop some of the highest levels of investment. Cutting-edge technologies to improve user experience will be the top innovation projects that companies will undertake. That’s what they say. 

Having this in mind, and not only, Melon has gathered a fresh team of UX, UI and visual designers who build user-centric mobile and web applications – useful, easy to use, engaging and beautiful.

The history

Melon’s always had a design department. One of the companies that merged in 2003 to found Melon started as a design and creative studio, focused on video editing, flash and 3D animation. After the merger, the creative department offered print and on-screen graphic design, corporate identity, marketing materials, games, etc. Naturally, when the software development led the way, the design department followed and focused on user interaction and user interface design. The design team became a necessary ad-on.    

At the moment, user interface (UI), user experience (UX) and visual design is an important business line at Melon. The current design team has gathered ripe and fresh designers who are looking for design-first projects.  

The approach

Design is problem solving. With UX and UI in mind, the designers craft for a user in a context, not for separate specifications from a list. Their job is to create amazing experiences. UX design aims at boosting user satisfaction by improving the usability, ease of use, and pleasure in the interaction with a product. UX design is the more analytical and technical field and UI complements it with look and feel and interactivity of the solutions. Melon designers say that UI design is moving towards removing any unnecessary elements to focus on functionality.

Melon designers have sharp senses and infinite curiosity needed to translate users’ necessities – both problems and opportunities – into the right interactions with a certain software product, system or application.  

The process

All of the steps are reversible and the process is agile rather than water flow. 

The work begins with data gathering. The aim is to understand the audience and the objectives to identify the most valuable features, make design decisions and prioritize. This includes research and interviews with the stakeholders. 

What follows is a requirements workshop meant to reach a group decision. Melon designers say that often the most valuable insights come from the conversation rather from the individuals’ input or expertise. Next is creating a number of user stories – short narrations describing interactions between the users and the product. Then the designers build a map and information architecture – a high-level diagram representing information hierarchy and organisation of screens and their flow. Then come the wireframes. These are schematic blueprints representing the skeletal framework of every individual screen. Wireframes flow chart is what the designers call the interactive prototype showing all product’s screens and navigation interactions. They show structures, or dummy content and imagery, calls to action, other elements and ad placements. They lack fonts, color, and final images which allows the designers to explore content, navigation and interactions separately from visual content.

Then, the designers run a usability test, in which the user performs a series of tasks. 

Usability testing is the designers’ sanity check. It’s the observation of users’ behavior when engaging with a product. It is an integral part of the UX process. The designers use it to explore concepts, navigation, content, page layout and functionality.

Based on users’ input the designers create a workflow to emulate the interaction with the product. Again they run usability tests with an interactive flow of screens and again the users’ input is taken into consideration. Based on all the tests, the result is a clickable black-and-white visual representation of the user's flow to complete tasks within the product. This is a quick and easy way to test and validate a product before fully developing it.

This is when the second big phase begins – visual design. Purposefully, the designers have kept it all very generic until now, black and white, with no fonts, branding, etc., the idea being to ensure that the product makes sense to the target user group.

For a start, they create a mood board – literally it’s a board where the client and the designers pin their favorite images, fonts, objects of style, etc. It facilitates the communication on what the graphical direction will be. 

The look and feel of the product are demonstrated in 3-5 high fidelity mock-ups. The visual design concept captured in a few selected key screens will later be applied to all other screens of the product. Prototyping comes next – creating interactive hi- or low-fidelity visual mock-ups. Then the designers create and adapt all visual elements of the user interface for each screen resolution and platform and put together a document that ensures perfect understanding and implementation of all visual elements during development no matter what programming language will be used and if it happens in-house or not. 

How long it takes

Some projects may last for years – like the site of Mtel– the largest GSM mobile phone operator in Bulgaria. It took Melon two years. Initially, the client had 30 000 unique pages when we started working on their UX. But when it comes to mobile applications, time-to-market matters a lot and in this case Melon delivers the product between two and six months. 

Types of usability testing

Sometimes our clients come with ready specifications for the user interface and we have no access to their end users. At other times, the client organizes the usability tests and again Melon has no access to them. 

And there are cases when we run the usability testing or we use helpful online tools. Especially when it comes to mobile applications, our experience has proven that the test group doesn’t need to be large, seven –eight people give the 90% chance of catching usability issues. 

The UX and UI designers simply approach a project with the intent of understanding how the user is going to interact with the product. Then, together with the visual designers, they craft for them useful, easy to use, beautiful and engaging experience.