Tristan SenyciaI first discovered the importance of the UX/UI design process back in 2012. I had had no prior experience with product development, so my natural instinct was to map out all the business logic and workflows and then issue an RFP to a handful of offshore software development firms.
Approaching the project through the eyes of inexperience, I saw the product development as primarily technical. However, when I received proposals back from the software development companies, I noticed that right at the beginning of the development process, they had allocated time to UX/UI.
Around the same time, I also learned about the need to test my ideas by engaging my initial target market with prototype designs. This was incredibly fortuitous because it meant I could complete my initial product concept within one month and then take the design to market in Sydney and Melbourne.
Interview on the UX/UI design process with QubStudio
Today I invite our neighboring design studio QubStudio to help us unpack the UX/UI design process. The UX/UI process is an integral part of product development of web, desktop, and mobile apps.
Firstly there is the Planning stage, where we interrogate the business model and create various other product documentation, for example, workflows and mind maps, etc.
Then next is the UX/UI stage (Design stage) which is the user experience development process. Given the criticality of getting the stage done correctly and how easy it is, for even experienced product teams, to make mistakes we have decided to discuss the process with highly experienced professionals: Lyubomyr Koval the Founding CEO of QubStudio, and Den Sliusarchuk UX Lead Developer at QubStudio.
Tristan: How many staff do you have working at QubStudio in the capacities of UX and Design (UI)? Just to get an idea of the size of your team.
Lyubomyr: We have a team of about 30 specialists. They are not all UX (User Experience) engineers, we also have designers (UI) and front-end developers. We are also strong on the back-end development side.
In fact, we are a full-cycle digital design agency, which means we also do graphic design and branding services.
If we are talking about full product development, we should start by looking at the market and not from the product or development perspective. We should research the end customer’s problems, their [business] goals and needs, etc. The user experience design process allows us to define and model the product concept that we or another software company will end up developing.
I would like to introduce you to Den Sliusarchuk, he is our chief of user experience and will be able to share a lot of knowledge and experience about the user experience and user interface phases from leading UX at Qub.
Tristan: Sure, so the question to Den along these lines is: can you describe the typical steps involved in the Product Design of a new application whether it be mobile or web.
Den: Hi everyone, actually the thing is that the UI/UX process always depends on the project/product itself. If we are creating a product from scratch, this is one kind of process but if we are re-designing an existing product, it is quite a different process.
Based on our experience, we note that clients often don’t see the value in UI/UX design. Usually, clients consider the value to be in the development of the final technical features but don’t know all the steps that lead to the final implementation of those features.
Our main goal is to identify the users and customers of the product and define why they need a particular feature, so as to understand the value to the end customer & users.
Step #1 – Discovery Phase
If you talk about doing design for new products and for startups, we always start by doing a discovery phase. During the discovery phase, we have a lot of workshops with the founders to try to understand their market and their potential customers: what they need, what they think and feel about competitive solutions already in the market. This is also a phase that we generate more ideas and define a unique value proposition (UVP) for the product. The diagram below depicts the discovery phase as quite chaotic as we iterate through a variety of solutions to the customer’s problem(s) we have identified.
Step #2 – Design Process
After we’ve completed a thorough discovery phase we then move into the design process, starting with the user flows and the overall information architecture of the application. This is a preparatory phase in anticipation of creating pictorial representations of the product.
Step #3 – Information Architecture Phase
We need to describe the main user flows and the informational elements that will appear on each screen or page. This is called the information architecture phase and it helps us to save time and money for our clients because it is easier to iterate the design as expressed as a mind map rather than within professional programs like Sketchup and Invision (after the process is already started). The diagram below plots out the cost of and ability to make changes to applications over the lifecycle of product development.
Step #4: Wireframing
After that, we start creating low fidelity wireframes, which enable us to visualize our application by laying out the features and content and to clarify the calls to action, etc.
Lyubomyr: Low fidelity wireframing also helps us to visualize the interaction design. Based on wireframes we better understand all user interactions leading to the achievement of user goals within the application. During this stage, we iterate the flows in order to make them as intuitive and as short as possible.
Den: This is the stage where we start to add buttons and other elements to create some consistency within the application.
At QubStudio we use Invision all the way from low-fidelity prototyping through to full-color, high-fidelity prototypes which look and feel like real applications. Once we have created higher fidelity wireframes we switch to User Interface (UI) mode and create the UI concept which consists of two or three of the main screens of the application in full color.
Step #5 – UI concept creation
The intention of the UI concept is to show how the final version of how the application could look. We usually provide clients with a few options for the UI concept. We build the UI concept for the product customers/users, taking into consideration the unique value proposition of the product and empathy maps etc.
Step #6 – UI design stage
After that, we switch to the UI design stage, where we create almost all of the screens of the application in accordance with the chosen UI concept.
Lyubomyr: So in summary, in the first stage of design we define business logic, user flows, and visual style. We work through the flows using wireframes to model the interface of the system. Based on the wireframes and the customer persona(s) we create the visual concept.
The visual concept helps us to communicate the vision back to our client to determine whether we’ve accurately captured the business logic and more subjective aspects of the design, like the use of color and style. The UI concept needs to resonate with a customer of the application, which often is not the Product Owner of the application. This is one of the challenges that we have with some of our Product Owner clients.
Tristan: So that’s one of the difficult parts to get right – to build the application for the Target Market, rather than the person who has engaged you (when these are two different people). Are there any other steps that are the most difficult to get right in the design process?
Lyubomyr: Of course, it depends on the type of project, we aren’t specialized or that knowledgeable about certain domains, like fin-tech, healthcare, or social media. For each project type, it takes us time to research and analyze the domain of the project. In this case, subject matter experts on the client side are very valuable to us.
Tristan: I remember doing a project with another studio and they took a design thinking approach to the project. But they hadn’t spent time in the UK corporate world and so they had no idea what tools were available to someone who works 9 to 5 in this position.
However, as a Product Manager on this project, I was able to fill in that blank in the information that the designers didn’t have, so I completely agree with you on that one.
Den: The only thing I’d like to add is that each project is different. This means that our approach to each project is unique in terms of the design processes and product documentation (the types of documentation we create to provide the Product Owner and developers).
Clarifying all of these details for clients at the beginning can deliver a lot of value to the project. This is what I have noticed over the past few years because even once you have completed the UI prototype and you send the link to your client, it is often difficult for them to interpret it as a standalone deliverable. Sometimes it isn’t clear what the MVP scope of works or finer grain interactions are.
Benefits of creating supporting documentation for the UI prototype
A lot of design companies make the mistake of creating a UI prototype and then sending it to their client thinking they’ve finished. Being in the digital industry, we are used to all these digital tools like Invision, but those who aren’t in our industry often prefer other representations of their product like a full-color presentation of the workflows (how all the screens relate to one another).
Firstly, this makes our clients feel like they are getting more of a tangible deliverable. Secondly, it helps clients to communicate with their internal stakeholders. It’s like the difference between buying an ebook on Amazon vs a real book, it’s often more pleasurable to experience a real book.
Using documentation to store product knowledge
Another benefit of the design process is that by documenting we are organizing and storing a lot of the most important information about the product. It is actually very difficult to keep all of this information in your head throughout the duration of the design process, particularly given that design evolves rapidly through iteration.
Another drawback of only creating a UI prototype (without supporting documentation) is that if a new someone needs to be brought onto the project, the whole team needs to spend a lot of time to synchronize on the product concept. However, if we can give this new team member a whole package of documentation, they can review it and get up to speed within a one-hour synchronization meeting.
Tristan: So what you’re saying is there is no exact standard set of documentation that you create. You create a custom design process for every product.
Den: Actually, it always depends and so we take a very custom and project-specific approach. Say we are doing a customer persona, sometimes this is a very valuable document for the project, other times it is far less valuable because some products are driven by use case.
Regarding what is important to capture within a Customer Persona, sometimes age is important, sometimes it’s not, sometimes we are looking more for psychological/behavioral patterns.
Also, sometimes the client has already developed their own flows. The point is that we can’t do all projects using the same process. What we are doing is craft design, with the aim of capturing all the subtle differences between projects. We don’t sell our clients deliverables that they don’t need.
Lyubomyr: As we are based in an offshore location there are always limitations, which define the critical path we need to take to deliver value and quality. Of course, doing everything from classical theory for user experience will add value, but it is not optimal because we now live in a rapidly changing world, so we need to choose the right instruments for the best results within those constraints.
Tristan: So what I am hearing is that you are trying to choose the highest leverage activities that you can do during the design process. And for startups, this needs to continue through development all the way to taking the product to market.
Tristan: Last question, what kinds of expertise are required during a typical design process?
Lyubomyr: In general, in order to deliver a standard app design project of a web or mobile application, we need at least two specialists; Lead User Experience Designer and a User Interface Designer. On top of that, it is good to have a Product Designer or Product Manager. Of course, we are always working in partnership with Product Owners, who bring broad domain expertise and customer and market insights.
Den: And the Product Owner is the final decision maker during this process.
Lyubomyr: Also it’s sometimes useful to invite a Copywriter to the team, they also help to add relevant wording to the interface. The copy (wording) we need to use depends on whether we are developing the application for teenagers, doctors, engineers or financial brokers, etc.
Tristan: That’s right because they each have their own set of words and it’s also important to embed within the user experience relevant calls to action.
Guys, thanks for spending the time to give us an overview of the UX/UI design process and interrelated activities and even more importantly explaining where the value lies in creating a custom design process for each unique product.
I feel that there is a lot more to discuss in our next interview and look forward to inviting you back!
About the Interviewer
Tristan Senycia is a Product Manager at YouTeam – a curated b2b marketplace that matches businesses with dedicated engineers from pre-vetted software development agencies.
He is also the founder of LeverPoint Advisory, which consults in the areas of commercialization management, go-to-market strategy, High-Tech marketing strategy, and customer development. Contact: tristan@youteam.io
About the Guests
Lyubomyr Koval – Co-Founder and CEO of QubStudio.
Lyubomur founded QubStudio with a graphic designer, Victor Fedyuk with the shared vision that digital products and websites could be designed more efficiently without compromise on aesthetics. Qub prides itself on design applications that really make a difference.
Den Sliusarchuk – Chief of UX at QubStudio
Den is a highly experienced and creative product designer, specializing in transforming Product Concepts into seamless User Experiences
More about QubStudio
QubStudio is a team of devoted professionals that love their job and enjoy working together. Established more than 8 years ago Qubstudio was one of the pioneers of user interaction design in Central and Eastern Europe. Today, with 200+ successful projects in their portfolio, they are recognized as one of the industry leaders.
Vineet Gupta
Ashwini Dave
Iryna Bilyk
Ishita Paul