Intive Blog

How we go about UX in intive-FDV?

“How do users interact with apps?” This is the question we ask to ourselves in intive-FDV every day, many a time along every project. The answer varies, depending on the type of user, the app, the client, the market. However, if there is something we do have perfectly clear is that the decisions taken along the design and development processes are the ones that actually meet up not only the market needs but also the user needs. This is why we defined a process to work making good UX (user experience). As a reminder, “User experience comprehends all the interaction aspects of the end user with the company, its services and products.”

Screen Shot 2017-08-31 at 5.38.30 PM

So, in intive-FEV we have created five dynamic stages for our processes, which not always are lineal. We are hereby sharing what we consider most challenging for each of them.

The 5 stages in making good UX

Screen Shot 2017-08-31 at 6.17.48 PM

  • Requirements: During this stage, it is essential that the customer is available to team-work and is able to provide constant feedback. Team-work also helps the customer define objectives better.
  • Analysis: The key element in research is to see what the competition is offering, and what is being done well and badly. In this way we can set up patterns with what everyone else is offering out there and what we can improve (pros-cons). This stage is essential, because we start to define our model users, to reach them and see what they think, what they do and how they feel with what our customer is offering them today (in case of having one) or what other similar services are being offered.
  • Conceptual design: In this stage the challenge is having the flow of information and browsing as closed as possible, so that along the development no information is added with the consequent impact this may have on what is being carried out. The focus is on critical items to improve user experience. Prototypes in low quality are created and the structure to display the information is agreed on.  There is a first validation, ideally with users, developers and the customer, to confirm we are on the right track and to analyze things that can be improved. Once the first iteration is tested, we go forward only if the results are convincing and, in that case, we go to the next stage, where we give “color” to the app, we start to provide it with “style”.

Example of prototyping low-quality Wireframes:

Screen Shot 2017-08-31 at 5.40.55 PM

  • Visual design:  A look and feel is defined. We look for visual references, bearing in mind who the users will be, this is fundamental since they feel identified with the visual side. Needless to say, we also take into account the brand manual (provided there is one) and the platforms it will be implemented on. The challenge is to generate an app with identity and a unique personality, which does not end up being a generic app, and keep the consistence of how the information is displayed and how the actions are performed all along the app.

Example of workflow – Wireframes with style:

  • Delivery to devs: We deliver specs of the designs, sizes, typographies, colors, spaces and margins to be respected when implementing. We can make designs in high res on Photoshop or on Illustrator, tools which have been updated and allow us to work optimally on the prototype, although we can very well recommend software to automate the process:
  • Balmasiq it used to make wireframes in low res
  • Invision is a tool to make designs interactive, both in low and in high res. These are uploaded already made and real browsing is generated there, both to show it to the customer and to test it with users.
  • Other applications such as Marvel, Sketch or Zeplin are used to make designs and flows of screens. Devs can here get icon trims, font sizes, colors, etc. They have access to all the materials in the corresponding sizes for the different resolutions. The choice of each tool depends on each team, always thinking of facilitating and making the job easier and more collaborative with customers and devs. Each has different compatibilities with tools such as Photoshop, Invision, Drive and Dropbox.

The challenge here is to keep considering the role of the designer in the project even after the design is delivered, since most customers do not allocate hours for this stage and end up making modifications and taking decisions later which are inconsistent with the previous ones with no feedback from a UX designer who thinks in friendlier terms for users.

Conclusions

The interaction between devs and the UX design team is crucial. If there is no communication and teams are disconnected, many issues can come up:

  • The design can get difficult to implement and demand much effort, or simply not meet the deadline.
  • Adaptations for different operating systems, should be validated by many developers (iOS – Android), since some actions need tailoring considering the native elements of each system.

To guarantee a bigger chance of success a developer should be included from day number one of the project. His/her participation and active listening will make the job collaborative and much more fruitful.

All stages are of great relevance and it is vital to think of the user during all of them, creating solutions and validating them with different people in the project: customer, designers, devs, model users, etc. This way, we will get different viewpoints and get closer to the real experience, caring for consistency and the final quality of the app.

Paula Becchetti

Paula is the editor of intive’s blog. She holds a degree in Audiovisual Communication from Universidad Nacional de San Martín (UNSAM) and is a Content Manager specialized in blogs, web content, email marketing and social media. Her extensive experience in the software industry makes her very valuable when it comes to translate technical content into a colloquial language. According to her own words: “I connect with the world through technology, but also through everything that breathes, sport, music and my travels.”

Add comment