Slice and dice

Our client

Thinslices is a software development company based in Iasi. “Elephants with a special way of doing things”, they’re a 70+ multidisciplinary team of people that constantly turn their crafts into world-class products. Going through the three stages of product development (zero to product design, design to MVP, MVP to one), Thinslices creates digital products that have the best chances of turning into businesses, all the while internally embedding a company culture that is unique to the local landscape.

Project Specifications

Research & Analysis

Thinslices came to us because they needed a brand new website that would serve their new marketing endeavours, both as an employer and to their prospective clients, showcasing what they’re all about in a clearer, more authentic and flexible manner. We started off with outlining the research and analysis phase, after a couple of extensive meetings with them:

  1. Objectives
  2. Resources
  3. Audience
  4. Market & Competitors
  5. Specifications & Requirements

All about the audience

We identified two main audiences that we would care for in the process: future employees and prospective clients. For each of these two categories, we went beyond generally defining them and asked ourselves the following questions:

  1. Who exactly are the people that make the decision to hire Thinslices and what are they looking for?
  2. Who are the people Thinslices wants in their team and what’s most important to them?
  3. What is their business goal? What are their career goals?

We wrote down three fundamental aspects for each of the identified personas in each category:

  1. Context — what is their current situation
  2. Behaviour — how are they searching for a solution
  3. Goal — what are they trying to ultimately achieve

Both landscapes are very crowded. The local IT workforce numbers are heavily below market request, so every good developer has to make tough calls between a large number of options. And Thinslices wants great, not good. On the other side of things, we needed to show their clients that they’re unique and deliver value on a lot of fronts. Answering this plethora of questions helped us understand how to go about structuring content at a sitemap level and at a page level, how to create clear flows and communicate visually through typography, colors, layouts, illustrations and iconography.

User experience

The whys and the hows

We started off with the sitemap and content structure. We then created user flows for both the employee and the client. This gave us a clear vision of how we needed to approach the website’s usability so that each of these two users could reach their navigation goals faster and easier. We changed, adapted and made decisions on content structure and information architecture based on what we needed to achieve.

The wireframing let us create the skeletal structure of the website. We did several mockups and adjusted by always going back to the decisions we made in the previous phases. We did wireframes for each page, with versions for desktop, HD desktop, tablet and mobile. It’s important to say that we always design with mobile in mind, so that smaller screens don’t take anything away from the experience.

User interface design

Visual style

Copy was really important to our client so we needed to create a visual system that would not only be brand-aligned, but also serve the content of the website by creating a solid hierarchy and intuitive navigation. Using the Atomic design methodology (http://bradfrost.com/blog/post/atomic-web-design/), where everything is structured on five levels – atoms, molecules, organisms, templates, pages – that offer consistency and scalability, our client and the team members were able to better understand the design system by having everything laid out in front of them.

Illustrations

The design as a whole is very geometric, with clear and minimalistic design elements. We wanted to convey a sense of warmth and smart playfulness through illustrations, but still keep some sort of geometric aspect to them. That’s why we went with isometric views on all supporting graphics and mockups for the projects page.

Iconography

These icons were designed with two purposes in mind: to support the content related to company values and to develop a visual iconographic style that would assist Thinslices in creating more icons for future marketing materials. We managed to step away from generic icons that you can find anywhere, and create unique ones that also strongly and clearly support the message we were conveying.

Wrapping it up

Responsive final design

Since more than half of all internet traffic worldwide comes from mobile phones, we never design a website without having the definitive goal of it looking great and offering a good experience on mobile phones. We tested and adjusted so that no glitches or errors would be present at phone size display.

Thinslices has an amazing office in Iasi, designed by one of the best and most creative architecture studios around. From the beginning we all knew this was an important thing we needed to show, so to create a strong employer brand. Photos from the offices, meeting rooms and events play an important role in the overall final design.

Working with a team that understands the importance of UX/UI design and the process behind it, more so because they apply it in their own projects, meant great satisfaction at the end. We’re extremely happy with the result and how everything developed. We’re also proud that we could help a company that is an example of successful local entrepreneurship.