How We Tailor UX/UI Design at TRIARE: Workflow Part 2

Design Discovery

Every project starts with a challenge. A client usually comes either with a ready solution that needs a redesign or simply an idea. Depending on the request, we ask different questions.
If it’s a redesign, we gather all the data points.
Where the client is coming from? We carefully consider the background of the project, its competitors and the market where it operates. It gives us an industry blueprint and allows us to set the right expectations for achieving more.

What design is needed? There are plenty of techniques based on particular requests. As you learn later, the number one rule that guides our work is the business goal a client aspires to achieve. Then, we consider relevant solutions for the user experience (UX) and later the design itself, the user interface (UI). These considerations will play a huge role in the redesign and, eventually, upgrade of the product.

What’s the target audience (TA)? The more accurate and vast amount of data we get, the more effective design will be. In this case, a client must have at least the basic understanding of who his customers are. Even better, user personas
Example of the user persona

Are there any stats for a particular feature? Our job is not simply making an app or a website prettier. We strive to improve the user engagement fundamentally. To prove what we would have achieved, there should be some starting point. For instance, if at this moment users stay at a particular webpage for only 8 seconds, we will succeed by moving this average to 40+ seconds.

 The number one rule that guides our work 

is the business goal a client aspires to achieve.

If there is no product yet, we start exploring.
Who do you see as a customer? Who will use and, eventually, benefit from your product? What pain do you solve for the customer? Is the solution a painkiller or a gain creator? A designer does not simply create a visual side of the project; he or she leverages design thinking to understand how the customer will perceive and use the product.

Who are competitors? Again, this aids in our work to choose the most appropriate way to make the project stand out. By looking at competitors, we understand the do’s and dont’s and supply our client with a wide range of options.

Sometimes we do sketching on paper during the design discovery period

If our client struggles to answer these, we recommend to review our article on business model canvas for a startup.

Scope of work (SOW)

Based on the gathered information, we are able to improve our estimates by supplying a detailed scope of work, including user stories and technical documentation.

Prototyping

Having digested all the project inputs, we dive into the UX stage.

Vivid wireframes for your project.

At this point, TRIARE team will provide a functional, colorless or a single tone mockup to encompass key features of the product only. 

Examples of wireframes

Landing sample

Then, we move on to the UI stage. We gather screenshots for a moodboard stored on Figma or Google Drive. We use these screenshots as anchors for a great visual solution, something that our customer enjoys and approves

Example of a moodboard

This sketch helps to choose the optimal design and lays the ground for the home page or a key feature. We created a landing design for MyMarq, although it could be one or several pages.

Home page of MyMarq 

At this point, designers fix all the paddings to make the UI look more systematic. They also can suggest animations or other original solutions (check it out at the https://irio.com). The team shares some preliminary results to fix minor flaws or inconsistencies: different font type or button size, tweaks to the logo or blog posts position.

An example of animation

Style Guide

Before delegating their work, designers compile detailed style guides that include the following elements:

• Error messages, empty states and icons
• Buttons (there are usually 4 button conditions)
• Typography system
• Frames
• Other key elements
• Onboarding steps for use

Example of the button conditions

Delegating to development

This is when magic happens and insightful pictures transform into powerful solutions. However, it is not done on its own. At this stage, the designer becomes a mentor of developers to whom he or she delegates the wireframes and style instructions. Importantly, one must pay attention to the differences for Android and iOS development.

Web and mobile design contrasts

Generally, making a mobile application is harder than a website. Navigation in mobile apps is totally different. There is always a sidebar or a top-bar. Geo location is a popular option, too; thus, it needs to be incorporated in the UX. It is the time when a back-and-forth with developers takes place: the designer must embrace all the functionality and limitations along the process.

Interaction methods differ as well: from swiping to double tapping and force touch (in iOS). There is a potential of camera use as well (how do we call this option from the app? Where do saved pictures go?). In addition, a gyroscope plays a powerful role in helping to locate a device in the environment (something that websites most of the time don’t need.)

Transformation

Finally, designs from Figma transform into a real solution. Notably, designers do not leave the process. On the contrary, they continue to work shoulder to shoulder with developers. Only a designer can notice a 1-2 pixel difference, distinguish 40% opacity or a shadow. He or she helps the developer to fix inaccuracies that don’t influence the overall usability but do shape the attitude towards the project.

If not such cooperation, the final user of the product might get distrurbed without ability to tell what’s going on. As one TRIARE team member pointed out, 

a designer and a developer “get together, 

then break up, and after that get along again.” 

There are some tensions sometimes; but these are rather passionate discussions in which a truly great product is being born. 

Release and work with feedback

Notably, all stages are smooth and overlap. But our designers say that the most grateful job is to work directly with the user feedback. Indeed, a period that follows release is the time of sudden insights. First, because the product is never perfect; it is being polished amid continuous incremental improvements. Second, we can only pose hypotheses and test them but never know for sure.

Picture that shows a feature prior and after customer feedback

To Wrap Up

UI design extends beyond nice pictures and UX is more than just pleasant and intuitive usability. In this article, we aimed to showcase how to stick to client’s business goals and perform above user expectations. But more is yet to come. App development, beware.