In the fast-paced world of digital product development, where user expectations are higher than ever, design consistency plays a critical role in determining a product’s success. It’s not just about making your product visually appealing—it’s about creating a seamless, cohesive experience that resonates with users and drives business results. In this blog, we’ll explore why design consistency matters, the common challenges teams face, and how you can achieve it to elevate your product.

What is Design Consistency?

Design consistency ensures that all elements of a product’s user interface—such as buttons, typography, color schemes, spacing, and interaction patterns—work seamlessly together. It creates a cohesive look and feel across the product, making it both intuitive and easy to navigate.

Now, imagine using an app where every screen looks and behaves differently. The resulting confusion can lead to frustration, user drop-offs, and even lost revenue. A consistent design brings clarity, fosters familiarity, and builds trust—crucial factors for retaining users.

Why Design Consistency Matters

1. Enhances User Experience (UX). A consistent design reduces the cognitive load on users, making it easier for them to navigate and interact with your product. Users don’t need to relearn how to perform actions on each page, which increases satisfaction and engagement.

2. Builds Brand Recognition. Consistency in design helps reinforce your brand identity. From colors to typography, maintaining uniformity ensures your product aligns with your brand, making it recognizable and trustworthy.

3. Improves Development Efficiency. A consistent design reduces ambiguity for developers. When everyone on the team uses the same design system, the development process becomes faster and more predictable, resulting in fewer errors and quicker iterations.

4. Drives Business Success. A product that’s easy to use and visually cohesive tends to attract and retain users. Positive user experiences translate to better reviews, higher conversions, and ultimately, increased revenue.

Consistent design doesn’t just enhance usability—it also contributes to measurable business outcomes like increased conversions and user retention. Curious about the tangible impact of design on your bottom line? Check out our blog on The True ROI of UX and Design to explore how thoughtful design choices drive financial success.

The Challenges of Achieving Design Consistency

Despite its importance, many teams struggle with maintaining design consistency. Here are some common challenges:

• Fragmented Collaboration. Designers and developers often work in silos, leading to misaligned implementations.

• Time Constraints. Tight deadlines can push teams to cut corners, resulting in inconsistent designs.

• Scaling Issues. As teams grow and products expand, maintaining consistency across multiple platforms becomes harder.

• Lack of Tools or Processes. Without a robust design system, it’s challenging to enforce consistency, especially for SMBs with limited resources.

How to Achieve Design Consistency

• Use a Design System. A design system is the backbone of consistent products. It provides a library of reusable components and design guidelines that teams can rely on. An example is Storiiblocks, a Figma plugin we developed, which helps teams easily find and reuse components, ensuring visual and functional consistency.

• Automate Code Reviews. Maintaining consistency isn’t just a design problem; it’s a development challenge too. An example is Torii Style, an automated code review bot, ensure that every piece of code aligns with your style guide, streamlining collaboration and improving code quality.

• Promote Cross-Team Collaboration. Designers and developers must work closely from the start. Regular check-ins and collaborative tools can bridge the gap, ensuring that design intent translates seamlessly into the final product.

• Embrace Iteration. Consistency isn’t a one-time effort. Continuously review and refine your design and code as your product evolves to adapt to user needs and feedback.

At Torii Studio, we’ve worked with numerous SMBs that faced the challenge of inconsistent designs. With the use of these processes and tools, we’ve enabled these teams to:

• Reduce design back-and-forth time by 30%.

• Enhance developer productivity through reusable components by eliminating redundant work.

• Deliver products that feel polished and professional, boosting user trust and satisfaction.

The Bottom Line

Design consistency is more than a buzzword—it’s a key driver of product success. By investing in the right tools, fostering collaboration, and committing to iterative improvements, you can create products that delight users, build your brand, and drive meaningful business outcomes.

Ready to achieve design consistency in your product? Contact us to learn how our tools and expertise can help you transform your user experience.

Read more

Introduction

Welcome back to our series on mastering component reusability in React! In our first episode, we covered foundational principles. These include the Single Responsibility Principle, Prop-Driven Design, and keeping Props APIs simple and intuitive.

Now, let's dive deeper into how you can optimize the performance of your components.

Optimizing for Performance

Performance optimization is crucial for maintaining smooth and functional applications. Below, we’ll explore common pitfalls. We'll also look at their more efficient alternatives in React component design.

Memoization 🧬

Memoization in React can prevent unnecessary re-renders. It does this by caching and reusing the results of costly function calls or rendering. It does this when the inputs are the same.

❌ Poor Practice: Unnecessary Re-renders in a List

A common issue arises when components within a list re-render unnecessarily due to parent component updates, even when the data they display does not change.

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => <UserItem key={user.id} user={user} />)}
    </ul>
  );
}

function UserItem({ user }) {
  console.log("Rendering user:", user.name); // Logs every time the parent renders
  return <li>{user.name}</li>;
}

✅  Best Practice: Unnecessary Re-renders in a List

Applying React.memo to UserItem ensures that it only re-renders when its props change. It does not re-render every time its parent does.

const UserItem = React.memo(function UserItem({ user }) {
  console.log("Rendering user:", user.name); // Logs only if `user` prop changes
  return <li>{user.name}</li>;
});

Balancing the Use of Memoization

React.memo and other memoization techniques can improve performance by preventing unnecessary re-renders. But, they are not always the solution. Each use of memoization introduces an overhead of comparing props, and in cases where props change frequently or the component logic is trivial, this can lead to worse performance. Analyze component performance and weigh benefits against costs before applying memoization.

As a rule, consider memoizing when:

• Components that are expensive to render.

• Components that render frequently with the same props.

• Components deep in the component tree that do not change state often.

This balanced approach will help you use memoization well. It will keep you from overusing it. This will maintain the best application performance and resource usage.

Lazy Loading ⏳

Lazy loading delays the start. It also delays the rendering of components that are not immediately needed. This speeds up the app's initial load time.

❌ Poor Practice: Immediate Loading Heavy Components

Loading resource-heavy components upfront can greatly delay your app's interactivity. This is especially true if those components are not immediately needed.

import DetailedMap from './DetailedMap';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <DetailedMap />  // Loads a complex component even if not immediately viewed
    </div>
  );
}

✅  Best Practice: Using React.lazy

React.lazy helps you load components only when they are needed, improving initial load times. This is especially useful for components that aren't immediately visible. This includes components accessed via routing.

const DetailedMap = React.lazy(() => import('./DetailedMap'));

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <React.Suspense fallback={<div>Loading Map...</div>}>
        <DetailedMap />
      </React.Suspense>
    </div>
  );
}

Finding the Right Balance with Lazy Loading

Lazy loading is a powerful tool for improving web app performance. It splits the code at logical points and only loads pieces as needed. However, it’s crucial not to overuse this technique.

When to Use Lazy Loading 🟢

• Large Components: Components that are large and not needed right away should be candidates for lazy loading. This typically includes secondary views, large visualizations, and dialogs that aren't shown until user interaction.

• Route-based Code Splitting: This is one of the most common and effective uses of lazy loading. Components rendered in different routes can be loaded only when those routes are visited.

When to Avoid Lazy Loading 🔴

• Small Components: If the component is relatively small, the overhead of lazy loading might outweigh the benefits. The added complexity of managing loading states and potential rendering delays might hurt user experience.

• Critical Path Components: Components that are essential for the initial user interaction should not be lazy loaded. Delaying their availability can make the app feel slower to the user.

Using lazy loading strategically will ensure that your application remains responsive and efficient, without sacrificing the user experience on critical interactions. Always profile your app to find the best candidates for lazy loading. Avoid it where it adds unnecessary complexity or delays.

Efficient Handling of Lists ⚡

Handling large lists efficiently is crucial in React to prevent performance bottlenecks caused by rendering unnecessary or off-screen elements, which can drastically slow down the user experience.

❌ Poor Practice: Rendering Large Lists Without Optimization

Rendering large lists without any optimization can lead to performance bottlenecks, especially if the list grows dynamically.

function List({ items }) {
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

✅  Best Practice: Using Virtualization

Implementing virtualization only renders items in the list that are currently visible to the user, greatly improving the performance of large lists.

import { FixedSizeList as List } from 'react-window';

function MyList({ items }) {
  return (
    <List
      height={400}
      width={300}
      itemCount={items.length}
      itemSize={35}
    >
      {({ index, style }) => <div style={style}>{items[index].name}</div>}
    </List>
  );
}

Conclusion

In this episode of our series, we've taken a deeper dive into optimizing the performance of your components. Through strategies such as memoization, lazy loading, and efficient list handling, we've explored how to make your React applications not only more efficient but also better from a user experience.

Stay tuned for more insights in our next post, where we will explore additional techniques to further refine your React components. As always, happy coding, and may your applications run efficiently and your development journey be rewarding! 🪴

Read more

In today's fast-paced digital world, the noise of constant notifications and social updates can easily drown out the quiet focus necessary for deep work. At Torii Studio, we understand that the true value in our digital craftsmanship comes not from chasing these fleeting distractions but from engaging deeply with our projects.

Cal Newport, a computer science professor at Georgetown University, defines deep work as professional activities performed in a state of distraction-free concentration that push your cognitive capabilities to their limit. These efforts create new value, improve your skill, and are hard to replicate.

Why Deep Work Matters in the Age of Distraction

Our society often emphasizes the quick over the quality, rewarding behaviors that are more about visibility than value. Tweets, likes, and constant emails pull us into a cycle of shallow work—easy to do and falsely satisfying in its busyness. However, these tasks, while they may seem urgent, rarely contribute to long-term success or fulfillment.

Deep work, though challenging, fosters real growth and long-term value. It's akin to the work of a craftsman: there is no shortcut to mastering a craft. As Santiago Gonzalez poetically notes about coding, "Beautiful code is short and concise... It’s much like as if you were writing a poem". This level of craftsmanship in coding—or in any professional activity—requires deep work: uninterrupted, focused, and rich in concentration.

The Paradox of Deep Work in Modern Business

Despite its evident value, deep work is not the priority it should be in today’s business climate. It's easier to respond to an email than it is to solve a complex problem. It's simpler to scroll through social media than to design a piece of intricate software. And unfortunately, many businesses continue to reward the quick response over the thoughtful consideration, simply because it feels more productive.

At Torii Studio, we challenge this norm. We believe that by fostering a culture that values deep work, we empower our team to produce outcomes that are not only efficient but also enduring and meaningful. We strive to create an environment where each team member can cultivate the skill to discern and create meaningful work, rather than just busy work.

Embracing Deep Work at Torii Studio

To support deep work, we often have to reject much of what is new and high-tech in favor of approaches that may seem old-fashioned but are truly effective. This might mean redesigning workspaces to reduce interruptions, or it might involve setting clearer boundaries around communication.

The task of a craftsman at Torii Studio is not merely to generate meaning but to cultivate an ability to discern the meanings that are already there, hidden amidst the noise. Our approach is not just about doing work but about doing the right work well.

In our niche, daily stand-up meetings are a long-standing tradition and considered a "best practice”. However, we choose not to follow this ceremony and have found it to be beneficial. Instead, we hold a main planning meeting once a week, and handle everything else asynchronously, without the expectation of immediate responses. This approach allows our team to focus on their projects, fostering an environment where everyone takes ownership of their work and operates with mutual trust.

Conclusion: The Way Forward with Deep Work

As we continue to navigate a world brimming with distractions, the value of deep work only grows. It is essential, now more than ever, for businesses and individuals alike to prioritize depth over superficiality, craftsmanship over quick fixes.

At Torii Studio, we are committed to this journey, knowing that the deepest work often yields the most rewarding fruits. We invite others in the industry to join us in this movement, to turn away from the shallows and dive into the deep. It's challenging, but the results—a more thoughtful, innovative, and skilled workforce—are well worth it.

Read more

Introduction

Welcome to the first post of our two-part series on mastering the art of reusability in Web development using React.

In this post, we'll dig into the first three principles that are crucial for creating reusable components. The Single Responsibility Principle, Prop-Driven Design, and Keeping Props APIs Simple and Intuitive. These principles lay the groundwork for effective and scalable React applications, providing you with the essential strategies needed to enhance your development practices.

Principle 1: Single Responsibility (SRP)

Adhering to this principle is key. It dictates that a component should focus solely on one functionality, enhancing clarity and reusability.

❌ Poor Practice: All-in-One Form Component

Consider a form component that overly complicates its responsibilities:

import React, { useState } from 'react';
// A monolithic form component handling multiple responsibilities
function UserProfileForm() {
  const [userData, setUserData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({ name: false, email: false });

  const validateEmail = (email) => { ... }
  const handleSubmit = (e) => { ... }
  const handleChange = (e) => { ... }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          name="name"
          value={userData.name}
          onChange={handleChange}
          style={{ borderColor: errors.name ? 'red' : 'initial' }}
        />
        {errors.name && <p style={{ color: 'red' }}>Name is required.</p>}
      </div>
      <div>
        <label>Email:</label>
        <input
          name="email"
          value={userData.email}
          onChange={handleChange}
          style={{ borderColor: errors.email ? 'red' : 'initial' }}
        />
        {errors.email && <p style={{ color: 'red' }}>Invalid email.</p>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

This implementation is a classic example of overreach—handling form state, validations, and API interactions simultaneously.

✅ Best Practice: Adhering to SRP

Consider this version where the FormInput component and the useValidation hook demonstrate the value of SRP:

function UserProfileForm() {
  const [userData, setUserData] = useState({ name: '', email: '' });

  const nameError = useValidation(userData.name, [ ... ]);
  const emailError = useValidation(userData.email, [ ... ]);

  const handleChange = (e) => { ... }
  const handleSubmit = (e) => { ... }

  return (
    <form onSubmit={handleSubmit}>
      <FormInput
        label="Name"
        name="name"
        value={userData.name}
        onChange={handleChange}
        error={nameError}
      />
      <FormInput
        label="Email"
        name="email"
        value={userData.email}
        onChange={handleChange}
        error={emailError}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

The UserProfileForm component now elegantly orchestrates these simpler components, significantly boosting maintainability and readability.

For further inspiration on crafting focused and independent components, Addy Osmani's article on FIRST principles—Focused, Independent, Reusable, Small, and Testable components—is a helpful resource.

Principle 2: Prop-Driven Design

This principle enhances component flexibility by deriving behavior from props rather than internal state or inheritance.

❌ Inflexible Approach: Hardcoded Component

A component with hardcoded values is less reusable and flexible. Here's an example:

function WelcomeMessage() {
  return <h1>Welcome back, User!</h1>;
}

✅ Flexible Solution: Prop-Driven Component

Refactoring to accept dynamic content:

function WelcomeMessage({ name }) {
  return <h1>Welcome back, {name}!</h1>;
}

Now, the component can display a personalized message based on the prop it receives, enhancing its reusability across the application.

Principle 3: Keep Props APIs Simple and Intuitive

Simplicity in prop design is essential for ensuring that components are easy to integrate and maintain.

❌ Complex and Unintuitive Props API

An overly complex props structure is a common pitfall:

function UserProfile({ userData }) {
  return (
    <div>
      <h2>{userData.profile.name}</h2>
      <p>Email: {userData.profile.email}</p>
      <p>Age: {userData.details.age}</p>
      <p>Location: {userData.details.location.city}, {userData.details.location.country}</p>
    </div>
  );
}

// Usage of UserProfile requires constructing a complex, nested object
<UserProfile userData={{
    profile: { name: 'Jane Doe', email: 'jane.doe@example.com' },
    details: { age: 30, location: { city: 'New York', country: 'USA' } }
  }} 
/>

✅ Streamlined and Intuitive Props API

A better approach is to flatten the props structure and use simple, descriptive prop names. This makes the component much easier to understand and use, reducing the cognitive load on developers and minimizing the potential for mistakes.

function UserProfile({ name, email, age, city, country }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Email: {email}</p>
      <p>Age: {age}</p>
      <p>Location: {city}, {country}</p>
    </div>
  );
}

// Usage of UserProfile is now straightforward and intuitive
<UserProfile
  name="Jane Doe"
  email="jane.doe@example.com"
  age={30}
  city="New York"
  country="USA"
/>

In the improved version, each prop is self-explanatory, and it's clear what data the component expects. By keeping the props API simple and intuitive, you enhance the developer experience, making it easier to adopt and integrate the component in various parts of the application.

Conclusion

By embracing these principles, you set a solid foundation for creating highly reusable and maintainable React components.

Stay tuned for the second part of our series, where we will explore advanced techniques like Performance and other approaches to level-up your software skills. These principles will build on what we've covered today and help you further refine your components for better performance and flexibility. Join us as we continue to unlock the full potential of React development—making sure your skills and projects stay ahead of the curve.

Read more

Code audits are quality assurance procedures used to determine whether the source code on a website or application is secure, following best practices, and satisfying business needs. 

There are three different types of code audits: front-end code audits, back-end audits, and infrastructure reviews. Front-end code audits focus on analyzing the code pertaining to the client-facing side of a website or application. 

Back-end audits address the servers and databases. Infrastructure reviews are global surveys of your system. Asides from evaluating the client and server sides, they often include hardware inspections. 

At Torii Studio, we focus our code audits on the client side of systems. This means that—aside from evaluating functional elements of your system such as the quality of documentation or design patterns—we will also examine crucial client-side features such as the quality and accessibility of your user experience.

Why should you perform a Front-End code audit?

Beyond serving as the starting point for any upgrades and major changes, regular code audits are crucial to system maintenance. Performing regular front-end code audits can help ensure your system's:

• Security. Regular front-end code audits can help you to identify bugs and vulnerabilities before they escalate into bigger and more expensive issues. 

• Performance. Asides from uncovering bugs, a code audit can help you ensure that your system is working as intended and expose any issues that could compromise performance in the future.

• Best practices. A code audit can help verify whether your codebase meets your organization's standards and adheres to best practices in terms of documentation and code quality and consistency.

• User experience and accessibility. Front-end code audits provide you a snapshot of the quality of your client-side experience through information such as accessibility scores and website speed rankings.

When should you perform a Front-End code audit?

At Torii Studio, we use front-end code audits as the first step in assessing our clients' needs and developing a roadmap for optimizing their systems and processes. We recommend that you conduct a front-end code audit in the following instances:

• Before making any major changes to your system. In this case, the benefit of performing a front-end code audit is twofold. First, it can help you assess whether your system can scale up and handle the increased workload that comes with an expansion in its current state. In situations where increased capacity is needed, a code audit can help you flag which changes need to happen to make your code more scalable. 

• When your system is not performing up to standard. If your system is slow or not performing up to standard, a code audit can diagnose the root causes and help you develop a roadmap for solutions.

• You are struggling to ship new features. System bugs and poor practices can hinder your team's ability to develop and implement new features. A code audit that corrects inconsistencies and makes your codebase easier to work with can expedite your development cycle and help your team build and ship new features with fewer problems.

What’s included in a Front-End code audit? 

Front-end code audit checklists can vary depending on who's performing the audit and what they seek to evaluate. Torii Studio's custom 11-point framework is based on open-sourced processes developed by modern web companies like Google and Airbnb to assess the state of critical components on a system's client side. Here's what we evaluate:

1. Project structure

A cohesive codebase is essential for developer collaboration. Ideally all contributors should follow the same organizational structure and code should be consistent from one file to another. While there is not one specific way to structure a project, your codebase's structure should comply with guidelines issued by the technologies you're using.

2. Tooling

The quality of your automated tools will greatly impact your development team’s ability to deliver high-quality code—as well as identify bugs, poor development practices, and accessibility issues. Some of the tools we’ll examine include code quality analyzers, dependency checkers, and code formatters.

3. Design patterns & SOLID principles

Design patterns provide software developers with shortcuts to solutions for common problems during the development process. Codebases are easier to understand, scale, and maintain when design patterns are implemented following SOLID principles. More importantly, applying SOLID principles to your codebase will make it easier to test and, therefore, more robust.

4. Tests

A suite of automated testing tools that covers your entire system is essential for developers to catch and fix errors quickly. They help your team produce better quality documentation and understand how your system will react to events such as updates or new features. Ideally, your tools should combine unit tests, integration tests, and end-to-end tests (E2E).

5. Developer documentation

Up-to-date documentation is essential for effective software management and developer communication. Beyond providing teams with a record of your system's history and solutions to past problems, it helps ensure that efforts remain aligned with your requirements and goals. When evaluating the quality of your documentation, our team will analyze its level of depth and detail and whether it's up-to-date.

6. Revisioning

Version control systems (or source control systems) help developers track and manage changes in your codebase. Keeping a record of all the modifications done to a system minimizes disruptions, supports teamwork and agile processes, and can often provide quick fixes for developer errors.

7. Case style, naming conventions and code style

A codebase that uses consistent naming conventions, code style, and case style will be much easier for developers to understand and work with. When evaluating these elements, our team will check whether all files use the same format for naming conventions and if your code style adheres to industry standards.

8. Performance and accessibility

Accessibility and performance are crucial elements of your system's user experience. Poor development practices such as unused code, large files, and render-blocking resources can severely impact website speed, load times, and overall client experience. Some of the elements we look at when assessing your system's performance and accessibility level are server response times and Web Content Accessibility Guidelines (WCAG) 2.0 compliance.

9. Security

Employing software security best practices on your system's client side is just as important as on the server side. When evaluating the security level of your front-end code, we’ll assess how security analyzer software and vulnerability checks are integrated into workflows and how sensitive information is stored within your system.

10. Code quality and best practices

Ensuring best practices requires using the right combination of frameworks and technologies. 

We’ll check whether elements such as code linters and automated tests have been correctly integrated into your system to ensure that new code is consistent and complies with your organization’s conventions.

11. Roadmap and maintainability

The last step of our front-end code audit looks into your system's future. We'll survey your libraries and frameworks to find those who may be close to becoming deprecated and losing support and compatibility with your system. Once we do that, we'll identify how much of a liability the deprecated library or framework is to your system, when you should make changes, and how big those changes need to be.

What happens after a code audit?

Once the audit is completed, you’ll receive a report outlining the auditor’s findings and listing recommendations for improvements. 

In our case, clients will receive a brief report listing the 11 elements we evaluated and how they scored separately. We’ll award each category a score between 0 to 3 and then generate a global score rated using a RAG scale (Red/Amber/Green) to give you a clearer picture of the state of your codebase and how much work needs to be done.

Lastly, we’ll present the report to you and your team. We’ll go over our findings and recommendations with your developers, explain all of our recommendations, and answer all their questions. This last part is crucial because it will educate your team on what they need to improve and which best practices they can apply to build a more robust system and optimize their workflows.

Our clients have found this extremely helpful because it brings a critical eye into their processes and provides them with clear next steps for improvement.

We really valued the report and presentation. The educational part was especially helpful for our team.

— Ezequiel Cura, VP of Engineering at Capchase

How can a code audit benefit your business?

A functional and secure codebase is crucial for smooth operations, customer satisfaction, and business success. If your system needs an update or you're planning to add new features, our team can help you assess the state of your codebase and provide expert advice on how to move forward. 

To learn more about how a code audit can help optimize your system and speed up your development cycle, contact our Studio here.

Read more

Cross-platform development is gaining momentum as one of the most common solutions for building mobile apps. It’s faster, easier, and more cost-effective than native development and provides users with a better experience than progressive web apps.

Cross-platform frameworks allow developers to create hybrid apps that work across a variety of operating systems and end devices. The final product has the look and feel of an application developed specifically for the operating system it’s running on.

In short: instead of coding one app for Android and a separate one for iOS, developers only need to create one. A single codebase means fewer developers, a shorter development cycle, and reduced overall costs.

Cross-Platform Development: Pros and Cons

Currently, the most widely-used cross-platform frameworks are React Native—which was developed by Meta — and Google’s Flutter. React Native dominated the market until 2021 when Flutter claimed the top spot.

Regardless of which framework you choose, both Flutter and React Native share major advantages:

• Shorter time-to-market. A reusable codebase that only needs a few tweaks to adapt to each platform drastically cuts development time

• Lower costs. In addition to a shorter time-to-market, cross-platform teams require fewer developers, further reducing costs.

• Easier maintenance and updates. Maintaining a single codebase means that you only need to fix bugs once, instead of multiple times, and any updates will be synchronized across platforms.

• User reach. Cross-platform development solves the problem of reaching users using different operating systems and devices.

Cross-platform development’s efficiency and convenience do come at a cost. In some cases, UI/UX quality and performance will suffer. And developers may need to customize applications with native code to ensure functionality for applications with complex functions. However, compared to benefits like reduced costs and shorter time-to-market, most developers find these tradeoffs have a minor impact on the final product

Flutter vs React Native: Choosing the right cross-platform framework

Before comparing React Native and Flutter, it’s important to remember the key difference between both technologies. React Native is a framework, while Flutter is a software development kit (SDK).

Frameworks provide developers with a foundation they can customize with code to build software. This code often comes from libraries, which help developers avoid having to write code from scratch. In the case of React Native, these libraries are created by third parties and are not contained within the framework.

SDKs include frameworks, plus every other tool developers will need to build and test a fully functional application — such as libraries, documentation, and APIs. Since the kit contains all the necessary tools, developers don’t need to search for third-party support.

Below we break down a few key aspects to consider when making the choice.

Flutter vs React Native: Code Structure

Why it matters: The coding language that a framework uses will determine how easy and affordable it will be to find developers that can work with it.

React Native: React Native uses JavaScript as the programming language. JavaScript has been in use for a long time, and it’s a language that many developers know well. Since they already understand the language it uses, developers find it much easier to transition into React Native than to Dart.

Flutter: Flutter uses Dart, a programming language developed by Google in 2011. Same as JavaScript, Dart is an object-oriented language and features Java-like syntax. While some web developers may find learning it intimidating, developers who understand object-oriented languages like C++ or Python can easily transition into Dart once they’ve mastered the basics. Although a growing number of developers can work with Dart, the community is still smaller than the one for JavaScript.

Flutter vs React Native: Architecture and performance

Why it matters: The architecture that a framework uses will have a significant impact on an app’s performance, speed, stability, and overall user experience.

React Native: React Native allows developers to create truly native apps. To achieve this, the framework relies on native system components and uses a bridge that renders JavaScript into native code. Same as with native development, the resulting apps will look slightly different depending on the platform they are running on.

Meta apps, such as Facebook or Instagram, are an excellent example. Each version features small but noticeable differences in the UI that make it feel native to the platform it’s operating on.

The drawback of relying on native components is that rendering JavaScript into native code takes time. Because of this, apps developed with React Native tend to have much slower load times than those created with Flutter.

Flutter: Flutter already includes the UI components needed to build an app within its framework, so it doesn’t need to use a bridge to render into native code. These components replace native UI components, which may not be desirable in every case.

The results are applications that look and feel the same across operating systems. This is why Google mobile apps, such as Gmail or Google Maps, look nearly identical on Android and iOS.

Eliminating the need to render into native code leads to faster, more stable apps. However, having all of these native components integrated into the framework can make the overall size of applications quite large. Apps that are too large can create problems for users with older devices or that lack enough memory space.

Flutter vs React Native: Support and developer experience

Why it matters: The quality of the tools that a framework provides developers to create, test, and maintain fully functional apps will have a big say in how quickly the development cycle flows and how easy it is to solve bugs and maintain the application.

React Native: Although React Native’s use of JavaScript, widespread community support, and a high degree of flexibility yield a great developer experience, its dependence on third parties has some drawbacks

For instance, React Native doesn’t offer official UI testing and integration testing support. Instead, it relies on third-party testing tools. Although developers can integrate frameworks such as Jest or Detox, this drags out the development cycle and creates room for complications.

React Native’s documentation can be lackluster too. Since so many tools and libraries are being released, developers don’t have much time to write proper documentation. Lack of quality documentation can make troubleshooting and maintenance more difficult in the future.

Flutter: Flutter offers integrated, officially supported tools for testing units, integrations, and widgets. This creates an easy and seamless testing process for developers. As with most Google software, Flutter’s documentation is thorough and extremely organized. It provides excellent support for setup and testing modules.

However, Flutter’s limited number of plug-ins and third-party libraries can create problems. While the out-of-the-box UI packages suit a multitude of scenarios, they may not enable certain complex features. Fewer plug-ins and third-party libraries mean that developers will either have to go through coding everything from scratch or make tradeoffs in cases where there are no plug-ins to support features.

The bottom line: Competitive Advantages of Flutter vs React Native

The right cross-platform framework for your app will largely depend on the time and budget you have available and the complexity of the application. In general, React Native is considered better for developing complex apps and enjoys high levels of community support. Flutter is an excellent choice for quickly bringing simple apps to life or developing MVPs — although it’s evolving to accommodate more complex features.

Both Flutter and Dart are high-performing, trustworthy technologies. Regardless of which one you choose, you’ll benefit from a shorter time-to-market, reduced development costs, simplified maintenance, and the ability to reach a border user base.

Need help bringing your mobile app to life? Torii Studio can help! Contact us to get the specialists you need to bring your idea to life.

Read more

Low-code and no-code platforms are transforming software development. What started as a way to help developers work faster and automate repetitive tasks is now disrupting the tech industry and promising to democratize innovation.

The hype surrounding low-code and no-code platforms has spiked interest from startups and large companies seeking to innovate, streamline their development processes and cut costs and time-to-market.

And, of course, we get a lot of questions about them here at Torii.

Clients often ask why they should invest in a custom-developed platform when they can build for less — and much faster — on a no-code platform. And we get where they’re coming from. No-code and low-code platforms can be fantastic alternatives for building apps and websites. But their limitations mean these platforms are not the one-size-fits-all solutions that most people believe they are.

Low-code and no-code tools are a fast and easy way to materialize ideas and get over technical constraints

Sometimes, you just need to throw something together fast — either to test it out or because there’s an urgent need. In these situations, low-code and no-code platforms present an excellent alternative to developing an MVP or even a full-scale solution without the need to assemble a development team.

For those without the technical skills to code or the budget to hire someone to do it for them, low-code and no-code platforms have become a ticket into opportunities that had, until very recently, been out of their reach. Entrepreneurs across all industries can now bring ideas from inception to launch in a matter of weeks — sometimes even days — without the need to write a single line of code or hire developers.

Once it’s time to scale, low-code and no-code platforms can hold you back

Depending on your needs and goals, an app or website developed and hosted on a low-code or no-code platform may be all you need. After all, plenty of highly successful businesses are running entirely on these platforms.

But, in our experience, once a business hits a certain threshold and is looking to scale, being tied to a low-code or no-code platform can present some serious limitations. That was the problem that Darkstore, a same-day delivery service built on Shopify, was experiencing when they approached us for help.

The company was seeking to invest freshly-raised capital on a custom-developed platform that would enable them to launch FastAF, a standalone 2-hour delivery service for premium products.

Up until then, their Shopify website had served their needs well. It helped them launch their business and lay the groundwork for their new venture. But, as they sought to scale, being tied to Shopify was holding them back.

Using Shopify’s platform meant that Darkstore had limited control over its store and its customer journey. User experience was suffering too: limited sorting and filtering options made it hard for users to find and view products. None of this would be attractive in FastAF, which targeted an upscale and design-conscious audience.

Plus, operating on Shopify was getting expensive. In addition to the subscription price, Shopify charges merchants a commission on every sale. And integrating third-party apps for value-adding features such as live chats adds to those costs.

Torii Studio took care of FastAF’s internal fulfillment system with a desktop dashboard and mobile application for warehouse personnel. Our solution provided their teams with a suite of custom features previously unavailable to them on Shopify. They could now manage inventory more efficiently, supervise order and service centers and make real-time inventory updates with an easy drag-and-drop feature.

With this custom-developed software, Darkstore launched FastAF in Los Angeles in late 2020 and grew from one warehouse to five in less than one year. Since then, FastAF has expanded to New York and San Francisco and closed its Series A funding in December 2021 with a valuation of $200 million.

Switching to custom-developed software

So, how do you know when it’s time to pivot to custom-developed software? Here are a few pointers:

• You’re looking to scale. Plug-and-play solutions are great for starting out or businesses that plan to remain small, but they can make it difficult to grow past a certain point. If you want to increase your size, capacity or revenue, custom-developed software can provide your business with the strong, scalable foundation it needs to grow.

• You want to cut costs. Fees and commissions can quickly add up and eat into your profits. Though it requires an upfront investment, many businesses find that a custom-developed platform is more cost-effective in the long run.

• You want more flexibility. Building on low-code and no-code platforms involves subscribing to their chosen or proprietary technology stack. Depending on the platform, finding developers who can work with those stacks can be challenging — and further increase your costs and limit your capabilities.

• You want increased security and control. Relinquishing control over servers, security protocols, data storage, and the code itself means that you are never 100% sure on how secure or reliable your operation is. Having full control of your product and who has access to it can help minimize common risks associated with low-code and no-code platforms, such as shadow IT or exposure of the API.

• You want to stand out with a fantastic user experience. Pre-built templates and themes save time and help ensure consistency when you’re in a rush. But if you’re looking to compete with larger businesses, a fully-customized platform can help solidify your authority and further your brand with a memorable customer experience.

Power your growth and take control with custom-developed software

Low-code and no-code platforms are a fantastic tool for bootstrapped founders with small budgets and those looking to test the waters on a new idea. Once things start getting serious, custom-developed software is the way to go for boosting growth, ensuring a more secure operation, and furthering your brand.

Looking to build high-performing digital products that scale? Contact Torii Studio and we’ll make it happen for you.

Read more

“A great product is not just the result of a thoughtful strategy. It’s also the result of the emotional push coming from the team. From people wanting it to be a success,” says Pablo Sánchez, VP of Design at Total Brain, a neuroscience-based mental wellness platform and one of Torii Studio’s partners.

Product development partnerships can be complicated relationships to navigate. Lack of communication, poor organization, and unclear goals often doom many of them right from the start. Unsuccessful product development partnerships not only yield subpar results; they can often turn into drags or expensive setbacks. Many firms approach them with tempered expectations and skepticism.

There are plenty of tools and processes to help bridge communication and operational gaps between design and development teams. But, as with all tools, the people behind them will ultimately decide how useful they’ll be. And that human factor — that emotional push — is where the key to Torii Studio’s magic is.

After a year-long collaboration with Total Brain, we sat down with Pablo to chat about the state of our partnership. He had some pretty awesome things to say about us and even compared us to the Rebels in Star Wars. Below are some of the key ingredients that he credits with making our product development partnership a success:

Expertise: Decoding the problem

Total Brain first approached us with a grand vision for what they wanted in their platform. They had an admirable goal, a skilled and committed design and development team, and were hungry for growth. But they were struggling to bring that vision to life. There was a big disconnect between the design and development team’s original intentions and the final product. Low user engagement, quality and consistency issues, and low ratings—2.5 on the App Store and 2.1 on the Play Store—made the team’s grand vision more like a pipe dream.

It was obvious: Total Brain had a great team working with the wrong tools. Their poor experience with those frameworks was leading to communication breakdowns, slowing their time to market, and reflecting poorly on the end product.

And we were going to help them fix that with a new way of working and a design system.

When people have the right tools for a job, they produce better results. We believe that UX isn’t just for the end-user; it’s for everyone involved in the process. For us, equipping Total Brain’s team with a well-designed and carefully coded design system counted as UX just as much as designing a beautiful interface did.

Our goal for all of our partners is to provide them with long-term solutions and set them up for success. And that’s what our process did for Total Brain. Their design and development teams now have the tools to bring their ideas to life quickly and efficiently. They can build better, faster, and more creatively, trusting that the end product will meet their expectations.

Speed: Building a design system and component library

Designers and developers are focused on two different things: designers create for the future while engineers build from what has been designed in the past. They speak different languages and follow different processes. Add to that a siloed organization, and you get breaks in communication and a slow, unsynchronized process that leads to disappointing results.

Bridging these gaps between design and engineering teams is crucial for developing successful products. As Pablo describes it: “I want to accelerate innovation. But I cannot do this internally. I need to bring in a catalyst—and that is where you come in.”

To ensure a quick process, we first rearranged Total Brain’s design and development teams to work side-by-side instead of being isolated in silos. We did this by holding twice-weekly meetings with everyone on both teams to review our work and keep our efforts in sync. These meetings helped us close communication gaps, manage time more effectively, and continuously measure our progress against the set deadlines.

Once both sides were working together, we set out to build the design system. Total Brain’s design system and component library — Neuron Next and Synapse — are the force that brings the whole company together. They embodied the company’s collective voice and became the cornerstones of our process.

These libraries created a common ground for both designers and developers. They raised the bar in quality, gave Total Brain a unified and consistent experience, and sped up the design and development processes. Thanks to the design system, the platform now features an updated look and feel with significant improvements in performance and UI/UX design.

Commitment: Ensuring a successful product development partnership 

There’s no point in putting the right tools in the wrong hands. And it’s the hands and brains working behind them that ultimately make or break the process. We introduced Total Brain to a new way of working, but their design and development team’s openness to working, listening, and communicating with us was the foundation of our success.

The core of our collaboration was the energy and commitment that both teams brought to the table. Those ‘good vibes,’ as Pablo calls them, fostered camaraderie and created an environment of transparency and collaboration. “This is not your typical client meeting,” he explains. “There’s a sense that we’re a team and we’re building this together.”

That same commitment to excellence drives the final product's wow factor. Going above and beyond what was expected, keeping open communication, and consistently producing quality work raised the bar for everyone. It cultivated trust, creativity, and positivity.

“If you ask our developers about the quality of any component, they would say that they would’ve never imagined anything coming from outside of the in-house team with such a precise and thoughtful approach.” —Pablo Sánchez, VP of Design at Total Brain

Innovation: The ultimate metric

Quantifying the effects of our work for Total Brain requires focusing on different success metrics. Sure, the app’s ratings have jumped from 2.5 in the App Store and 2.1 in the Play store to 4.0 and 4.3 and daily active users have increased 300% since we came on board. But for a company like Total Brain, the ripple effects of our work hit differently and are farther reaching than metrics and numbers on spreadsheets.

The most important metric here is innovation. “You have fueled us to make our dreams come true,” explains Pablo. The design system and development process brought in by Torii Studio has opened the doors to new projects that were not feasible before. The in-house team now has the tools to integrate features like biometrics, video exercises, and animated data visualizations that will elevate the platform’s experience and add value for its users.

This has led to a broader emotional impact on Total Brain as a company: they now have the tools to succeed. Their team can now build the product of their dreams. And we’re very excited to continue helping them on their journey.

Want to give your design and development teams the right tools to succeed? Contact us and we’ll make it happen for you!

Read more

For over the years, Torii Studio has worked under one goal: helping businesses build human-centered experiences. From web and app development to flawless UI/UX design, our team has delivered first-class digital product design services to our partners since 2020. That relentless dedication to quality has now earned us a spot on Clutch’s platform as one of the Top Creative, Design, and Software Development Companies in New York.

We are beyond proud to be featured on Clutch’s platform as one of the top tech companies in New York. This award cements our position in the industry, and it’s a great nod to our unique process and philosophy.

“This is a fantastic achievement and a credit to all the work we have done so far,” said Torii Studio’s founder, Cristobal Chao. “We would like to thank Clutch and their team for all the effort and hard work they have put into making this happen.”

Clutch is one of the best ratings and reviews platforms in the B2B industry. They are the go-to resource for companies looking for trustworthy firms to partner up with.

We would like to extend our gratitude to our clients. Their support has been instrumental in our growth and our success. We value their feedback immensely and wanted to take this opportunity to share some of it:

“If you ask our developers about the quality of any component, they would say that they would’ve never imagined anything coming from outside of the in-house team with such a precise and thoughtful approach.”

— Drew Fattlar / Engineering Manager / Total Brain

“Working with Torii has been critical to getting our product off the ground. Starting from day 1, Torii helped us put together the right team for our needs, and put in place the right processes to make sure that we were building as efficiently as possible. Would recommend 10/10.”

— Christopher Chang / Co-Founder / Lume Health (YC S20)

“Torii helped us jumpstart our investment in development and design. It was a fundamental bridge between bootstrapped founders with an in-house team.”

— Nimit Jain / CEO / Kovo Credit

Moving forward, you can expect the same passion and dedication from our team!

Looking to build the next app? Get in touch, and let’s make your ideas into reality!

Read more

By 2019, just over half of the world’s population was connected to the internet. This year, that segment is set to rise to 60%or 4.72 billion individuals. For the past two decades, most of those users have been concentrated in the developed world, where a combination of disposable income, high quality of life, and good infrastructure made it relatively easy to access the internet. Those countries are now close to reaching saturation levels in connectivity and it is emerging economies’ turn to catch up.

As the populations of places like Germany, the U.S., and France age, the young and eager-to-connect will increasingly be found in countries like India, Nigeria, and Peru. Unlike their economically advantaged counterparts, however, getting that second half of the planet online won’t be as easy.

There are many factors contributing to the connectivity divide between rich countries and emerging economies. Infrastructure, education, and distribution of resources are only one side of the problem. But at Torii Studio, we know that a significant subset of the global population cannot participate on the internet simply because the internet has not been built for them.

The web was built with its first billion or so users in mind. That first wave was dominated by Western individuals with high technological literacy, reliable connections, and state-of-the-art devices. The internet’s future lies in mobile-first individuals from non-Western cultures that struggle with slow connections, unreliable infrastructure, and frills-free devices. This has created a large accessibility gap that is quickly becoming one of the biggest barriers to online participation in emerging economies.

Making the web accessible for the next billion internet users

Accessibility is often correlated with optimizing products, places, and experiences for individuals with disabilities like poor vision or hearing impairments. But hardware, software, environments, language, and culture can all present potential obstacles to fully engaging with technology.

“Connectivity issues without accessibility support break the whole user experience,” explains Nithya Sambasivan, a researcher focused on designing for low-income users. Universally accessible experiences are the key to creating a more inclusive web. Bringing the infrastructure of low and middle-income countries up to par with wealthier nations may be out of the hands of designers and developers, but building websites and apps that can operate in those environments is not.

Our Studio recently had the opportunity to build a website for our partners at WellDone — specifically to optimize it for use in rural locations throughout Southeast Asia and Africa. WellDone is a non-profit working to ensure that rural communities have consistent access to clean water by collecting data on the performance and operational status of hand pumps in water wells. Most hand pumps break down within a year of construction, leaving their communities without access to potable water. WellDone’s initiative seeks to address a relatively unknown problem to people in economically advantaged countries, but that regularly impacts the quality of life for millions around the globe.

The company reached out to us for help with renovating the dashboard application that their ground teams use to monitor hand pumps. They needed a fully optimized system that could operate effectively on mobile devices and in rural locations with low connectivity.

Our team had to work around many of the same challenges that designers and developers face when building digital products for the next billion internet users. Below we break down some of the biggest ones:

1. Poor Connectivity

Low connectivity is perhaps the most significant constraint when designing digital products for the next billion internet users. Many parts of the developing world, particularly rural areas, experience slow or intermittent connectivity. According to a report by GSMA, a mobile industry group, 4G coverage reaches just under a third of people living in low-income countries. In fact, a sizable portion of rural areas in those same countries — around 19% — is only covered by slow 2G networks.

There are economic factors at play too. Internet access is expensive for most individuals in these places. Pre-paid plans are still common, users are cautious of their data usage, and people will spend prolonged periods offline until they can afford to pre-pay for access. This all has a significant impact on performance and users’ online experiences. Apps that rely on high speeds or are data-intensive will not perform well in these settings and fall out of favor with frustrated and cost-conscious users. Google, Facebook, and Twitter have all taken note of this and launched lite versions of their platforms to offer users with low connectivity high-quality experiences. These leaner platforms are data-friendly, optimized for smaller screens, and have offline use capabilities.

Torii Studio took a similar approach as these companies by building a lite version of WellDone’s platform. Their website’s previous version had been designed for high-speed internet connections that are not available in the remote locations where they operate. This created performance issues under low connectivity and on mobile devices.

Features would render in batches once all the content had loaded and users would have to wait for extended periods with a blank screen and no indications of progress. Our team built a new mobile-optimized dashboard that progressively renders content and uses placeholders for any information that has not yet loaded. This gives users clear indications of progress and allows critical features to load faster than non-critical content.

2. Lower specification devices

Mobile phones are the primary gateway into the web for most of the developing world. But these devices are far from the sleek smartphones that are commonplace in rich countries. They are old, low-specification gadgets with short battery lives and small memories. Combined with poor connectivity, they result in a constrained experience for their users and a challenge for designers and developers.

Accessibility — especially elements like contrast, text size, and color — matters here. To make apps and websites that are truly accessible for the next billion internet users, we must ensure that a design can render correctly on low-specification devices with old operating systems and small screens. Keeping battery usage and app sizes low helps users that constantly struggle with limited memory space, the need for SD cards, and shorter battery lives.

Since WellDone’s dashboard works as a web-based application, our team focused on accessibility features such as color, contrast, and other improvements in UX to optimize the navigation functionality for users with lower-specification devices. The map feature was one of the areas that saw the most improvements. The original layout was cluttered and made it difficult for WellDone’s operators to understand the information presented. We solved this by adding a clustering feature that led to a cleaner and better-organized layout. This created an accessible and responsive experience that more easily allowed WellDone’s teams to access the information they needed.

3. Design and technological literacy

Individuals living in emerging economies have a very different experience with technology than their economically advantaged counterparts. They’re typically mobile-first and have likely never accessed the internet from a desktop before. Linguistic, educational, and cultural barriers keep a sizable part of the web out of their reach. Over a third of them cite low literacy and lack of digital skills as their primary barrier to using the internet.

Solving these accessibility issues is a lot more complicated than installing cell phone towers, subsidizing connectivity, or electrifying rural regions. These efforts will have to be combined with improvements in education and digital literacy to help the next billion internet users make the most of their online experiences. The good news is that accessible and inclusive product-building can do a lot to bridge that gap in the meantime.

Building for this new wave of web users requires restructuring our approach to design, interactivity, and user experience. Not only do we need to optimize digital experiences for slower connections and lower-specification devices—we also need to adapt our products to suit different cultures, environments, and needs. Understanding and including these users in the building process is key to meeting their needs and providing them with better, more satisfying online experiences.

Building a better digital future for the next billion internet users

Nearly 85% of the world’s population lives in regions where poor connectivity, slow devices, or a lack of tech literacy represent significant barriers to internet access. And yet, only a small portion of the web has been built with their needs in mind.

Progress has been made as tech companies race to gain market share in emerging economies. But WellDone’s initiative shows that there is still a big need for solutions to critical problems beyond access to streaming or social media. The pandemic has further increased the cost of being unable to access the web and will no doubt hinder some of the progress made during the past decade.

It also makes WellDone’s work — and ours — more urgent than ever before.

At Torii Studio, a big part of our mission involves collaborating with those who are using design and technology to build a better world. Our team is very proud to have equipped WellDone with the right tools to help the communities they serve and expand their services even further. WellDone plans to use this new and improved system to expand its digital presence, collaborate with more government and nonprofit entities, and integrate machine learning into its operations. We hope they can continue improving people’s quality of life and that their work inspires others to see design and technology as tools for building a better world for all.

Got an idea for an app that will change the world? Contact us and we’ll help you bring it to life!

Read more

Accessibility issues are some of the most common problems we solve for our clients here at Torii Studio. For 2021 alone, WebAIM, an accessibility consulting firm, found that around 97.4% of home pages featured automatically detectable errors. That number increases once errors that cannot be detected automatically are factored in.

This is a shame. There are over one billion individuals worldwide living with disabilities. And approximately 10% of the US population experiences a temporary or permanent disability. Persons with Disabilities (PWD) already face countless challenges in the physical world. These barriers have carried on into digital spaces where they are much easier — and cheaper — to remedy than the lack of wheelchair accessibility on public transport, for example.

At Torii, we believe that excluding Persons with Disabilities is not only a loss for businesses; it’s a waste of human potential. There shouldn’t be a need to make a further case for inclusive design than a moral obligation to our fellow humans. But doing the right thing has rarely proven to be a convincing argument to move businesses into taking action. Plus, overlooking the benefits of a more accessible world would minimize Persons with Disabilities’ contributions to science, technology, and society and their enormous potential to continue changing our world for the better.

Accessible digital products: A missed business opportunity

Creating solutions for underserved needs is the universal formula for entrepreneurship. Yet companies and entrepreneurs are letting billions of dollars in potential business go to waste by ignoring one of the segments with the most underserved needs out there. Few groups stand to gain as much from advances in design and technology as Persons with Disabilities.

Accessibility is often reduced to elements such as contrast or keyboard compatibility. Though these are essential features, they’re only a small part of everything inclusive design involves. Persons with Disabilities lead full, complex, and productive lives. Technology has enabled them to do things that would’ve been extremely difficult or off-limits a few years ago. They’re traveling, they’ve become beauty influencers, and they are running successful businesses. Few of these spaces, products, and experiences have been designed with them in mind. The potential for business opportunities and generating meaningful change by fixing this is enormous.

And then there’s the pandemic. Our near-instant migration online further exposed the urgent need for accessible digital spaces. Older adults found themselves trying to figure out how to use video conferencing software without the direct help of younger and more technologically literate family members. Visually impaired college students are being held back by textbooks and digital documents incompatible with screen readers. And many of the nuanced gestures involved in sign language get lost on Zoom calls. There are more individuals with disabilities online than ever before, and the move is likely to be permanent in many cases. Businesses that don’t adapt to their needs stand to lose big.

The ROI of inclusive design: innovation and growth

Looking at inclusive design through a purely ROI-focused lens is a mistake. Numbers just don’t paint the whole story. Tim Cook once famously replied to a shareholder: “When we work on making our devices accessible by the blind, I don’t consider the bloody ROI.” Apple’s decades-long commitment to accessible design has earned it a long list of awards and turned it into a favorite amongst visually impaired communities. It’s become one of the secrets behind their innovative human-centered products and one of the pillars of the company’s reputation. That is not something that can be measured — at least not in the traditional sense, as Tim later explained in an interview.

Persons with Disabilities are seen as many things, but innovative is not usually one of them. However, constantly adapting to a world that has not been designed for them has turned Persons with Disabilities into excellent planners and problem solvers. Individuals experiencing temporary or permanent disabilities have made significant contributions to science and technology while solving the everyday problems that affect them. Text messaging, email, speech recognition, and touchscreens are some of the advances for which we can thank them. These innovations now make life easier and more convenient for the non-disabled. For many Persons with Disabilities, however, they are what makes living a full and independent life possible.

“When we design for disability first, you often stumble upon solutions that are better than those when we design for the norm.” — Elise Roy

Christina Mallon, a disabled designer, argues that the extreme needs of Persons with Disabilities make them valuable lead users. Solving the most exceptional cases often reveals pain points, unmet needs, and faults in design and engineering that would otherwise take long to discover and address. It also makes products, places, and experiences better for everyone else. Same as non-disabled individuals have taken advantage of ramp access and automatic doors, they can benefit from improvements to an interface like higher contrast, more intuitive navigation, or improved legibility.

Embracing accessibility: Committing to equity and inclusion

Too often, innovation is linked to quick money when it should be about changing lives. Accessible and inclusive design is one of our best opportunities to use innovation to generate meaningful change. 

At Torii Studio, we are committed to building products that are accessible to everyone. Along with having an internal accessibility team, we partner with industry-recognized third-party consultancies that evaluate the accessibility compliance of our products. Whenever possible, we engage with users with a range of abilities to ensure usability and accessibility for all.

Persons with Disabilities have made the world better for everyone while creating opportunities for themselves. Technology has empowered them to go farther than ever, but more needs to be done. If these individuals have managed to achieve so much in a world that offers them so little, just imagine the possibilities once we make the right tools available to them.

Want to make your digital products more accessible? We can help with that! Contact us to schedule a website audit. 

Read more

Diversity has become the type of buzzword that either elicits eye rolls, heated debates, or uncomfortable silences. But as our world grows larger and we become more connected, it’s turned into the kind of word that’s dangerous to ignore.

We now have decades of research and hard data summarizing the effects of living and working with those different from us. And the numbers show that diversity is very much worth the effort. But how exactly is diversity good for us? What is the value behind something so fraught with friction and challenges? And more importantly: are we sacrificing performance in the name of scoring political points?

The hard truth about diversity is that it’s difficult. It creates discomfort, awkward moments, and even more awkward conversations. Things flow more easily when we are surrounded by others who look, think, and talk like us. Adding others to the mix complicates things. But the reason why diversity is so good for us is precisely because it’s so difficult. Diversity forces us to face friction and discomfort and interact with the unfamiliar. And nothing makes us grow quite as well as challenges do.

Diversity forces us to work harder

Diversity “is not better or worse — it’s just harder. It’s harder socially, it’s harder cognitively, and it makes us work”, explains Evan Apfelbaum from the MIT Sloan School of Management. We work harder to put our best foot forward in an environment where we don’t feel comfortable. 

A study in which one group identified as Democrat and another who identified as Republican observed that the participants’ level of preparation for a debate varied greatly depending on who they were told they would be debating. Democrats who knew they would be talking to Democrats did not put as much effort into their points as Republicans who knew they would be debating a Democrat. 

The prospect of being confronted with a dissenting opinion from someone different motivated subjects to work harder in preparing their defense. They had to be on their toes, consider opposing arguments, and identify the weaknesses in their own.

We feel better when we’re surrounded by people similar to us, but we perform best when we force ourselves to work with those who are different from us. The constraints that conflict, debate, and friction create help us think smarter and more creatively. They force us to look at our ideas objectively and critically. Echo chambers, in contrast, breed complacency and a false sense of security. They’re the types of environments in which groupthink leads to stagnation. This type of environment is increasingly becoming a liability in a rapidly-changing world.

Integrative thinking leads to better solutions

Aside from making us work harder, the tension opposing ideas create is a catalyst for integrative thinking. This approach has been proven to be one of the most effective ways to solve complex problems. It involves confronting diverging options and considering the valid points of each side. Instead of choosing one over the rest, you combine all their positive elements into a hybrid solution superior to its parts.

Considering different perspectives helps us understand problems better. The more frames we pool, the more comprehensive our solutions will be. A single person or a homogenous group will be limited in their outlook and, therefore, in the number and quality of the solutions they will come up with. Broadening the scope of the ideas they input into the process will exponentially increase their chances of coming up with better, more innovative answers. And there is no easier way to force a team to think differently than by diversifying its composition.

As a young software engineer at Lockheed Martin, Stephanie C. Hill learned the value of integrating diverse perspectives to solve complex problems. She was assigned to lead a team tasked with updating a launch-control unit system for the US navy. Her team of 30 would have to work with very new technology, a tight deadline, and an even stricter budget. It was a difficult task that required a heavy dose of out-of-the-box thinking and creative solutions. Success rested on Stephanie’s ability to harness the collective outlook, experiences, and expertise of those 30 individuals. Every team member would need to be engaged and contribute at 100%. She ensured this by creating an atmosphere where everyone felt comfortable asking questions, proposing new ideas, and openly debating others. Her biggest concern was to “allow the best idea in the room to go unexpressed because someone did not feel comfortable enough to express it.”

Stephanie’s team’s strength resided in the fact that they were diverse and embraced those differences. Welcoming diverse outlooks allowed them to establish a dialogue where all parties felt their input was valued. Every idea was equally worthy of consideration and debate. In the face of complex problems, the ability to develop equally complex solutions has become an essential trait in those working to solve them. This requires getting comfortable with conflict and debate and understanding the value that divergent views can add to our own.

Intersecting ideas breed innovation

Integrating ideas not only leads to better solutions; it also fosters creativity and innovation. Joining seemingly disparate ideas into new ones is the single most important trait of innovative individuals and teams. The more far-fetched the sources that we draw from, the more unique our product will be. It’s how computers and phones became smartphones or how wooden planks and wheels became skateboards.

Ideas don’t come out of thin air. Whether consciously or unconsciously, we steal and borrow quite a bit when we create. Frans Johansson’s book, ‘The Medici Effect,’ is centered around this concept that intersections spark innovation. He proposes that diverse sources lead to unconventional connections, and it’s in these connections where innovation is born. Every new person, idea, or experience that we come into contact with exponentially increases the number of new connections that we can make. In other words: exposing ourselves to different people, ideas, and experiences is how we become more creative and innovative. It’s no surprise that the world’s top innovation hubs are found in large, diverse cities like New York, London, or San Francisco. It’s also no coincidence that diverse teams present much higher rates of innovation.

Innovation is a numbers game — and diversification is how we win at it. It allows us to control for uncertainty in what is a risky gamble. We use diversification to manage risk in areas where a lot of value is involved such as assets, financial investments, or decisions.

 Human capital, points out Paolo Gaudiano of the NYU Stern School of Business, has somehow escaped being applied the same approach — despite involving more risk and more value than any other resource. “Any company that figures out how to diversify its human capital to increase performance,” he argues, “ will have a huge competitive advantage.” If we are not willing to bet everything on a single move, why shouldn’t we also be wary of betting everything on a single vision? When innovation is not just a nice thing to have but something we must have, it becomes about survival. And betting that survival on a single outlook is a very risky thing to do.

Inclusion is the true driver of innovation

Diversity is the future. That may sound like a tired catchphrase, but that’s because it’s true. Mixing with others, seeking new experiences, and expanding our horizons have been a constant throughout human history. Our current hypermobile and hyperconnected reality and its ceaseless demand for innovation will only add fuel to that.

Both empirical and anecdotal data have repeatedly confirmed the benefits of diversity for individuals and teams. They are better at solving problems, making better decisions, and are more successful. However, the secret to their strength isn’t solely in their numbers or in the variety of their inputs. The true power behind these teams and individuals lies in inclusion. Inclusive environments allow differences to come out and shine. They help people feel comfortable in their diversity and promote collaboration and debate - just as Stephanie did with her team at Lockheed Martin. 

Without inclusion, diversity becomes an empty quota that adds no value beyond looking nice on paper, pictures, and company mission statements. Diversity, especially on the scale that our modern world demands it, is difficult. Never before have so many different individuals from so many different backgrounds come together in the way they are right now. Learning to see the challenges in these environments as opportunities for progress, innovation, and growth instead of obstacles is the first step in unlocking their extraordinary potential.

Read more

In Cuba, locals have a common saying: resolver. It roughly translates to: solve, get by, or make do. Resolver is how Cubans describe solving problems ranging from the everyday to the complex on an island with few resources. It's how they've managed to cars built in the 1940s running for nearly eight decades without ever having access to spare parts from the manufacturers. Or how they've learned to make electric bikes using motors from water pumps and military tanks. Being physically, politically, and economically isolated from much of the world has given birth to a nation of DIY engineers, designers, and inventors. 

Examples like this one challenge our assumptions on how innovation and creativity occur. We associate creativity with unrestricted environments and an abundance of resources and opportunities. Silicon Valley's never-ending flow of venture capital, Ivy League universities with large budgets, and Tony Stark types with millions to burn on passion projects are some examples that come to mind. 

Constraints have long been seen as barriers to creativity. But look closer, and you'll see that some of the most incredible feats of creativity and innovation have come to life under very restricted conditions. 

Michelangelo worked within stylistic conventions that most artists today would balk at. Stravinsky waxed poetic about how self-imposed constraints set his creativity free. More recently, Covid-19 has gotten the entire planet into the spirit of resolver. Teachers have figured out how to continue classes using Zoom, entire companies have gone remote, and the threat of a rapidly worsening pandemic pushed scientists to develop highly effective vaccines using novel technology in record time.  

Creativity thrives when it's challenged. You can't learn to think outside of the box if you don't have one in the first place. 

Why you need to get inside the box

The human brain is an optimizer. It likes to follow the path of least resistance and find the easiest way to complete tasks. When confronted with a problem, it searches for similar experiences in the past and applies whatever worked then to what it's facing now. Once it learns to solve a problem without too much effort, it gets complacent and fixed on those limited solutions. This is an excellent tool for survival but not so for creative thinking. 

Challenges force us to get creative, iterate multiple solutions, and learn to be variable—or find different and novel ways to do things. Time, scope, and resource constraints promote high variability by making tasks more difficult and forcing us to narrow our focus. They compel us to make do with what we have and see possibilities that we would've overlooked in more abundant circumstances. 

Cubans have learned to be highly variable. They see possibilities in objects that most people in the developed world could never envision. "People think beyond the normal capacities of an object and try to surpass the limitations that it imposes on itself," explains Ernesto Oraza. This mindset marks the difference between seeing a broken washing machine or an old rotary phone as treasure troves of raw materials instead of useless trash.

How constraints pushed innovation at Zipline

Zipline, a startup that transports medical equipment via drone, is a great example of innovation under severe constraints. The company made leaps in aircraft technology, AI, and navigation systems while trying to figure out how to deliver blood and medicines to rural villages in Rwanda.

Finding a solution to a life-or-death situation in a resource-strained environment using novel technology posed some serious challenges. Zipline's drones would have to perform safe and speedy deliveries of fragile cargo over long distances in unpredictable weather. They would also have to fly close to the ground in rain and wind to airdrop packages without landing to keep the aircraft light and reduce risks for humans and equipment.

The engineering team sought out NASA's input for their drones' design. They tried to use their weather models to program the automated navigation systems—but neither the designs nor the weather models worked out for them. Flying close to the ground is considered too dangerous for aircraft, so there were no precedents for what Zipline was trying to do. 

This long list of challenges became the source of some of the most innovative features of the company’s drones. The critical and time-sensitive mission—coupled with the resource-strained setting, and extreme conditions—pushed Zipline’s engineering team to develop a fleet of aircraft unlike any other. 

Zips, as the company calls them, can fly faster and farther than any other commercially available drone. An automated navigation system combining NASA's weather models with Zipline's data guides the aircraft through nearly every terrain and weather condition. They're also cheap and easy to operate in places where fuel and electricity are scarce. Long-lasting rechargeable batteries power each drone for up to 1,500 flights. And launch sites need only an electrical generator to operate and recharge the battery packs.

Prior to Zipline, there had never been a compelling enough reason to optimize drone technology for sensitive deliveries in first-world nations. Reliable roads, state-of-the-art hospitals, and regular mail service made technology like this redundant. There were no constraints, so there was no need to think outside the box.

The sweet spot

Some constraints can be highly beneficial to the creative process. But add too many and they'll stifle it. This relationship can be illustrated with an inverted U-curve. An absence of limitations is associated with low creativity levels. As obstacles start to appear, individuals get more ingenious at working out how to solve them. However, once the box gets too tight and people don't have enough resources to break out of it, they give up, and creativity levels dip. 

Cubans have many limitations. But they also have resources that similar nations don’t have. The revolution left them uniquely blessed with a large number of unemployed engineers and other science professionals. These individuals were able to kickstart Cuba’s DIY culture and pass on their technical know-how to others. For all their ingenuity, however, Cubans are severely restricted in the types of devices that they can fashion from the few materials available to them. Building motorized bikes with water pump motors requires fewer resources and technical skills than building an operational aircraft, for example.

Read more

How many bad ideas does it take to arrive at a good one? Quite a lot. A lot more than most people think.

Stories on how creativity and innovation happen to tend to take on a near-mythical tone. From how they're told, you would think that ideas simply fall from the sky into the heads of exceptional individuals. The process in which breakthrough ideas come to life is, in reality, a lot more complicated than that. There is no straightforward way to make innovation happen. It involves assuming steep risks, working through lots of uncertainty, and facing plenty of failures. Innovation is truly a numbers game and the guarantees of success are — even in a best-case scenario — just a bit above zero.

The good news is that there are ways to control that risk. Organizations seeking to reduce the uncertainty of betting on innovation have developed a system to beat the odds that is not too different from investing in a variety of stocks to minimize losses or buying multiple lottery tickets to up your chances of winning. It’s a strategy known as the portfolio approach. It provides a way to explore the viability of various pursuits before going all-in on any given one. The idea is that running parallel ventures will increase the chances of success and that spreading resources across different projects will minimize losses in case of failure.

The 70–20–10 rule

Why is Alphabet, a company better-known for Google Search and Android, investing in researching smart homes, artificial intelligence, and self-driving cars? Because it understands that disruptive innovation is the key to securing its future. Exploring all these new opportunities at once improves Alphabet’s odds of succeeding in at least a handful and ups its chances of developing innovative products and services.

The company follows a 70–20–10 rule to investing in projects. This corresponds to the level of risk associated with each type of innovation: core, adjacent, and transformational. Core innovation involves making improvements to existing products and services. It’s the easiest type of all three to achieve because it doesn’t require you to rewrite the playbook — just add new pages to it. For Alphabet, this would entail improving its core businesses, such as Google Search or Android. Projects adjacent to the company’s main business that carry a medium risk get 20% of the resources. These include ventures into e-commerce, digital services, or developing hardware products.

On the far side of that spectrum is transformational innovation. It’s the type of idea with the potential to change the course of a company’s business or even the market. This is a difficult feat to achieve. It requires an environment that nurtures creativity, experimentation, problem-solving, and — more importantly — the opportunity to fail. Alphabet dedicates 10% of its resources to these offshoot programs. It has an entire division dedicated to these seemingly wild endeavors called the Moonshot Factory or “X.” It works as an incubator for new technologies aiming to bring about radical change — not unlike Google Search once did. Google Glass is, by far, one of their better-known projects but not the only one. Newer ventures include projects that steer far from Alphabet’s core businesses, such as Dandelion or Tidal. The first one seeks to become a carbon-free alternative to heating and cooling homes using geothermal energy. Tidal uses AI to explore oceans and promote data-driven sustainable fish farming practices.

Alphabet’s approach has had significant payoffs. “70% of our resources are spent in our core business, and 10% end up in unrelated projects, like energy…People might think we’re wasting money or whatever. But that’s where all our new stuff has come from”, explains Google co-founder Larry Page. The system has worked very well for others too. HBR found that companies that use portfolio approaches tend to outperform their peers. Their research confirmed what Mr. Page stated above: the return ratio on these small investments is huge. Projects aimed at transformational innovation regularly yielded a 70% return on their investment.

Fighting uncertainty

Portfolio approaches to innovation are, in short, the organizational equivalent of not putting all of your eggs in one basket. Some of today’s most innovative companies, such as GE or P&G, know that betting it all on a single project is not a good long-term plan. Exploring different possibilities simultaneously keeps them ahead of the curve and gives them plenty of cushion to fall back on in case of failure.

Microsoft credits a big part of its success to Gate’s decision to run parallel projects in its early days. In the 1980s, the company faced stiff competition from Apple and IBM. Gates debated whether pursuing Windows was worth it or if it was better to drop out of the race entirely. Their future was uncertain and banking solely on Windows’ success would be risky. To control that risk, Gates chose to push forward with six different projects — Windows included — geared towards competing in the PC software market. Bit by bit, the projects that were not viable failed and Windows emerged as the winner.

We have every reason to believe that most of our ideas will not be successful. Most of the time, however, we also have no way of knowing which ones will be the exception. This is why exploring them is a worthwhile pursuit and why having a backup plan matters. When we have a cushion to fall back on, the blow of failure doesn’t necessarily have to knock us out.

Playing the numbers game

Solving problems and reaching specific goals requires us to cycle through many experiments and failures. The more we create and the more possibilities we explore, the better our chances of a positive outcome. One of the most significant benefits of portfolio approaches is creating spaces for experimentation and failure. And that is paramount if you’re looking to push boundaries.

The design process at Skyline, a toy design lab within IDEO, shows how a strategy in which failure and experimentation are encouraged can be applied across a wide range of industries. It also shows how much we underestimate the number of bad ideas needed to produce a single good one. A study found that — to arrive at two or three successful products — the Skyline team had to regularly pool thousands of concepts. Designers would start with about 4,000 ideas for toys. They would then choose around 230 of them to develop into prototypes. Of those 230 prototypes, only 12 managed to get the attention of toy-makers interested in purchasing them. Even fewer of these prototypes would make it into production. Around two or three of the original 4,000 concepts became commercially successful toys. At the end of this long process, roughly 5% of the team’s ideas had been considered good enough to sell, and just 1% made it into kids' hands. That’s a very steep failure rate, especially when you’re doing it on a near-constant basis.

Creative people know that dumb ideas and failures are part of the game. As Brendan Boyle, one of the team’s members puts it: “You can’t get any good new ideas without having a lot of dumb, lousy, and crazy ones. Nobody in my business is very good at guessing which are a waste of time and which will be the next Furby”. He understood that you have to dig through a lot of dirt to get to the shiny gems. Innovation and creative work entail embracing that process and the uncertainty that defines it.

Ideas breed more ideas

A culture of exploration and experimentation is good for producing new ideas and improving existing ones. Ventures can be unsuccessful and yet still deliver solutions that may be useful when applied elsewhere. Loon, another one of Alphabet’s Moonshot projects, is an excellent example. It aimed to bring wireless internet connectivity to remote areas using balloons suspended in the atmosphere. Although it recently folded, the technology developed through it has benefited many of Alphabet’s existing projects and even led to new ones.

Solving how to program Loon’s balloons to withstand changing weather conditions helped Alphabet further its AI deep-learning technology. Likewise, the technology developed to interconnect the balloons gave way to another program: Taara. This new venture is currently experimenting with using the light beam technology developed at Loon as a wireless alternative to fiber optic cables for internet connectivity. It may have the commercial success that eluded Loon.

Conclusion

Thomas Edison is almost as famous for his astronomical number of failures as he is for his accomplishments. The small number of successes he had, however, went on to change history. Inventions like the lightbulb, the telegraph, or the phonograph are all products of a lifetime of continuous experimentation and plenty of things gone wrong. The pantheon of creative geniuses he now belongs in is filled with individuals who got very good at dusting off the shortcomings of failure and learning from them. These creators understand that failure is the price of innovation. Any organization or individual hoping to achieve the same must adopt that resiliency ethos.

The basic idea behind the portfolio strategy — to try different things and to do so often — is an approach to business and creativity that both individuals and organizations can benefit from. When paired with the right mindset, it fosters an environment where discovery, experimentation, and innovation can flourish. It teaches us to make friends with failure and to start seeing it as an integral part of the process rather than the end.

Read more

‘Listen to your customers’ is one of the most repeated mantras in product design. It’s also one of the most challenging and misinterpreted parts of product design and marketing. Depending on who you’re talking to, listening to your customers is either the way to go if you want to be successful or something that will ruin your chances of creating something exceptional.

When discussing innovation, people will get caught up in examples of Silicon Valley unicorns and Wall Street high-performers. Names like Apple, Uber, or Airbnb get thrown around a lot. Quotes from Steve Jobs, Henry Ford, and Mark Cuban start popping up. They all seem to be living proof of the idea that you shouldn’t be listening to your users. That doing it will get you nowhere exciting.

There is no denying that the inside-out strategies of these companies have led them to create some of the most disruptive products in history. It’s how Google Search, the iPhone, and the Model T were born. No amount of customer research would have resulted in an idea like Facebook or Whatsapp. What’s also true is that this type of thinking has led to plenty of failures. For every iPod success story, there are dozens of failed Amazon Fire Phones.

The flip side is that companies see products created almost to their customers' exact specifications also fail. Why is this? It’s paradoxical that something designed to be liked could end up as a flop. Why do companies that listen to their customers get trapped in Product Death Cycles? The answer still lies in the listen to your customer part. The failure is not a lack of customer input but not asking the right questions and then applying their answers incorrectly.

Users are not product designers

The first thing people get wrong about listening to their users is believing they will provide them with breakthrough ideas. This is a big mistake. Listening to your users is about gaining insight into who they are and what they value. It should never be about delegating the task of product design to them. If you don’t already have an idea, don’t expect your users to lead to a great one.

People are bad at explaining what they want and predicting their future behavior. Most are not practiced in the kind of out-of-the-box thinking that innovation requires and have trouble coming up with novel ideas. Your customers are just your customers. They are not designers, engineers, or product managers, and it’s not their job to think like one of them.

In ‘The Lean Product Playbook,’ Dan Olsen explains the difficulties people have when discussing hypothetical benefits:

“The reality is that customers are much better at giving you feedback in the solution space. If you show them a new product or design, they can tell you what they like and don’t like…Having solution space discussions with customers is much more fruitful than trying to explicitly discuss the problem space with them”.

Steve Jobs was right: people don’t know what they want until you show it to them. It’s difficult for them to guess whether they’ll like a hypothetical solution in the future. They can, however, provide helpful feedback when presented with a product that they can experience first-hand.

Pay attention to what users do, not what they say

Listening to your users is also an opportunity to observe them. Remember: people are bad at predicting whether something will be valuable for them or not. They’ll say that they like something and once the idea has been integrated into a product, realize that it’s no use to them anymore.

“Don’t base design decisions on what customers say. You have to watch’s people’s behavior to form valid insights that can drive your product to better experience and higher business success.” — Jakob Nielsen

Observing how people interact with your product will also help you ensure that it’s working as planned and help you refine it. It can reveal new problems and pain points you hadn’t thought about before. Identifying new pain points and then coming up with solutions to them is a much better gamble at creating successful products than entrusting product design to a group of people that know nothing about it. Intuit, Twitter, and Yelp have all pivoted into better products after making adjustments based on observations of user behavior.

Pinterest is another example of a company that found success by closely examining how users were interacting with their product. In its first iteration, Pinterest was a mobile app named Tote that allowed people to shop multiple websites from a single platform. It had a unique feature for creating, saving, and sharing lists of products from vendors on the app. A year into its launch, Tote had plenty of users, but few were making purchases. While trying to figure out the problem, the app’s creators observed that people were using the “favorites’’ feature to compile collections of items and then share them with friends. They recognized an opportunity in this and flipped Tote into Pinterest: a platform for creating and sharing collections that now has over 440 million active users.

Had Pinterest’s founders gone up to users and asked them what they wanted, they would have probably gotten caught in a product death cycle. People would’ve asked for things like more vendors, coupons, or shipping discounts. This would have done little to improve their sales because that wasn’t why they were low. People weren’t using Tote for purchases because, at the time, that was a very difficult thing to do on mobile devices. Technology for mobile payments was still in its infancy. The founders would’ve gotten stuck trying to make Tote work when the technology available couldn’t support their product.

Listening to your customers does not mean giving up your creative vision

Another common misconception is that listening to customers means giving up creative vision. Brands centered on being “creative” or “disruptive” are especially wary of integrating customer input into their production process. To them, it means exchanging innovation for lukewarm results that are just right.

This goes back to seeing customer research as delegating product development to customers. The purpose of talking to your customers is not to ask them what to do but to better understand what’s valuable to them. You talk to your customers so that you can better inform your problem space, understand who you are working for, and make sure that you don’t lose touch with their needs.

Innovation alone doesn’t guarantee success. If people do not understand the value you are offering and you do not understand how to bring that value to them, your ideas will likely wind up as flops. This is why design thinking approaches emphasizing listening to users have proven to be a lifeline for innovative companies. They help them ensure that their ideas will gain enough traction to succeed.

Airbnb was saved from the brink of failure when it started listening to its users. A year into its launch, the company’s team had problems getting people to book rooms on their platform. Revenue was almost nonexistent, and they were close to going bust. In a bid to figure out what was going on, the team decided to go into their hosts’ homes.

It turned out that their great idea was being held back by the silliest of things: hosts were posting low-quality images of rooms and customers weren’t confident in booking them because they looked sketchy. Airbnb’s hosts weren’t professional hoteliers, photographers, or marketers. They didn’t understand the importance of good-looking, well-lit images for attracting guests. Once the team posted better images on their platform, revenue improved immediately. Talking to users saved their innovative idea from failing because of bad photos.

A better way to listen to your customers

1. Understand your users’ limitations

• People are great at telling you where they want to go but not how to get there. Do not rely on them for ideas.

• Talk to them in the solution space and use the data you gather to inform your problem space.

2. Ask better questions and observe more

• Don’t look for product ideas; look for pain points.

• Ask your customers what they would like to do, not what they want. Inquire about the difficulties they experience when performing a task or achieving a result.

• Observe them using your product or doing similar tasks to identify pain points and potential opportunities.

3. Apply your findings selectively

• You don’t have to apply all the feedback you received—not every pain point is worth addressing.

• Use what you learned to inform your problem space and make changes only after analyzing whether they will truly improve your product.

• Don’t stifle your team’s creative direction by using customer feedback to set rigid parameters.

Listening to your users is the best way to create value for them

Listening to your customers does not mean allowing them to control your creative vision. It means using their input to inform your ideas and set a bar for your creative process. Ultimately, it’s about ensuring whether people want your ideas and if those ideas will be feasible from a business standpoint.

Design isn’t just creating beautiful things — it’s also about creating value. And the best way to bring value to your customers is by understanding them. Never lose sight of your users and what you are creating for them. If you are not thinking about them, who are you designing for?

Want to build better user-centered products? Torii Studio can help! Contact us and tell us about your idea.

Read more

UX isn’t just a trendy buzzword anymore. It’s the key to creating successful products in today’s market. And, as more brands understand the importance of good UX and invest more resources in it, competition is getting fiercer.

People have grown used to friction-free, intuitive experiences that have been tailor-made to make their lives easier. Anything short of life-changing will have a hard time competing out there.

At Torii, we’ve seen startups and established companies reap huge benefits after shifting their focus to UX. We believe that user-centered approaches are the right choice for any brand trying to make it in today’s ultra-competitive market.

The ROI of UX: Beyond the numbers

Good UX is good for business, and the numbers agree. According to a study by Forrester, every dollar invested in UX brings, on average, 100 in return. This amounts to an ROI of over 9,900%.

But, beyond these estimates, the benefits of an investment in UX will vary from one company to another. For some, it may mean an increase in conversions or even revenue. Others will reap the rewards of good UX in the form of reductions in time-to-market, reduced costs, or decreases in customer complaints.

And, while there are many immediate benefits to investing in UX, the long-term rewards are even more remarkable. Improved customer satisfaction, higher engagement, and loyalty to your brand can be difficult to measure and take longer to yield results. Still, they are instrumental to your bottom line and crucial for sustained growth.

Three key benefits of investing in UX

1. Save time and resources

The purpose of user experience research isn’t just to find out whether users like or dislike your product. A big part of refining your product is ensuring it does exactly what you want.

UX research helps product development teams identify and correct problems early on in the development process. It allows them the space to find the right balance between ease of use, functionality, and design. This cuts time and expenses by reducing the chance of problems arising later when they’re more difficult and expensive to fix.

An easier way to understand the ROI of UX is through the 1–10–100 rule. You can spend $1 on research and move on into the design phase with a more informed view of what you need; $10 to change an unsuccessful design; or $100 to make changes to a product already in the development phase.

2. Understand your users better

Good UX leads to happy, satisfied customers who value your brand and products. It improves your reputation and strengthens brand loyalty. This is why people are willing to pay a premium for Apple products or why they will gladly brave crowds and long lines for almond butter at Trader Joe’s.

But finding out what people want and how to meet their needs is not as easy as it seems. Companies often get this wrong or ignore it altogether. After all, a poor understanding of the market and target audience is one of the most common reasons for product and company failures.

UX research and prototyping provide valuable insights into how your customers see and use your product. They are a surefire way to find out what they want so you can tailor your products and experiences to meet those needs.

3. Accelerate innovation

While UX and design thinking are two different processes, they share a similar approach of defining problems, performing extensive research, and coming up with solutions through iteration and observation. Adopting either approach often means that you will be incorporating — and benefiting from — elements belonging to the other one.

User-centered approaches have helped companies like Nike, Spotify, Netflix, and Airbnb develop some of the most successful and innovative products on the market. They all use a combination of design thinking and UX research to tackle problems creatively and develop innovative solutions.

One of the reasons these companies emphasize UX research is that it’s a safe and low-risk way to test and develop ideas. User tests and prototypes are a great way to explore the feasibility of a product and get a better sense of how your users feel about it.

They reduce the risk of uncertainty by answering questions like: Do we have the resources and technology to develop this idea? Can it compete with similar products or services? What do we have to do or change to make it a success? And, more importantly: Are people interested in this?

The true ROI of UX: A competitive edge

As our lives become more entwined with technology, the quality of our experiences with that technology will continue to increase in importance. Consumers will keep evolving more discerning and favor products developed with their needs in mind. Brands that do not meet those expectations and create competitive user-centered products risk losses and eventual failure.

Prioritizing user experience has significant immediate and long-term benefits. Short term, the ROI of UX can mean more conversions, better numbers, or improved SEO. In the long run, the boost in customer satisfaction, reputation, brand awareness, and loyalty is what will ultimately ensure your brand’s future.

Want to offer your users a better product experience? Contact Torii Studio today and let us know how we can help.

Read more

Wego is one of Asia's most popular travel websites and the largest in the Middle East and North Africa. The platform is a mobile-focused service currently available in 59 countries and 22 languages.

The first step in the company’s journey to create its award-winning mobile app started with improving its interface and user experience. Their original app was plagued by poor UI and UX practices affecting sales and contributing to bad reviews. To fix this, Wego wanted to move into a progressive web app that provided its users with a native experience.

The challenge was to create an interface that was clean, cohesive, and intuitive. We worked with Wego’s design and development team to correct the app’s UI/UX issues through a series of iterations. The redesign of their app lead to significant improvements in Wego’s numbers:

• Ratings on Google Play increased from 3.2 to 4.1 stars

• Monthly user retention improved by 300%

• Uninstall rates dropped by 25%

• User registrations increased by 40%

• The engineering team’s product development was expedited by 300%

The Challenge

Outdated design and poor user experience made Wego’s mobile app difficult to navigate. The company wanted a human-centered interface to provide its users with a native experience. The challenge was to make Wego faster and more intuitive while helping their product development team streamline their production process.

The Process

To solve this problem, the team applied a design thinking approach. We started by investigating the problem and ideating solutions refined through multiple iterations with users. Below is a break-down of each step:

Step 1: Understanding / Empathizing

After reviewing the existing version of the app and conducting a detailed study, we found the following problems:

• UI was outdated and inconsistent

• UX was poor and navigation was hard

• UI/UX was not optimized for mobile devices

From a UI standpoint, an outdated visual layout and poor color palette choices affected contrast and legibility. This was especially noticeable with the app’s CTAs. Primary CTAs were encased in bright yellow buttons with white fonts, making them difficult to read. Secondary CTA buttons for “Search” and “Filters” also had legibility issues because of poor contrast. There were problems with brand identity too—Wego’s logo was absent from most sections.

The user research revealed another issue that Wego’s team had been unaware of. The app’s primary CTA’s had been set up to highlight the price of hotels and flights. This was done under the impression that price was the main factor influencing a user’s decision to tap on a flight or hotel. It turned out that price was not the only thing that mattered to users. The researchers found that users considered a combination of three elements — reviews, location, and price — when shopping for flights and/or hotels.

Step 2: Ideation

The team followed Google’s Material Design guidelines to optimize UI elements and interactions. This system provided us with a set of ground rules to correct Wego’s disorganized layouts, inadequate color palettes, and limited interactions.

On the design side, we revamped the app’s layout to correct alignment, balance out proportions, and improve the use of white space. This resulted in a more organized design and simplified navigation. Strong, high-contrast colors combined with better typography improved legibility issues across the application and made CTA’s and other design elements more visible to users.

Wego’s original app featured a very limited range of gestures and transitions. This slowed down navigation and affected user flow. We used Material Design interaction and motion principles to optimize the app for mobile users and ideate responsive and intuitive interactions.

Step 3: Creating a Source of Truth

We developed a UI component system to ensure that all the changes would make it through the development process. This source of truth contained a collection of design elements that had been tried and tested by both the design and development teams. Its function was to improve communication between the design and engineering teams, ensure cohesiveness, and speed up production.

Both designers and developers could draw components from this library and reuse them to create new designs and interactions. Reusing components would save them from having to create new ones from scratch every time something needed to be added or changed in the app.

Step 4: Prototyping and Research

To test the solutions, we created a series of fully-functional prototypes featuring all the upgrades that we intended to make on the app and used them in experiments with users. This approach allowed us to identify problems fast, iterate, and improve user experience.

Since we had already created a UI Component System, developing prototypes was easy and fast. Reusing the components from the library for iterations saved us time and allowed us to run more tests. During the iteration process, we refined the elements in the UI Component System to ensure that their code was clean and the engineering team could reuse them natively.

Collaboration was key during this step. We worked closely with the design, product development, and engineering teams. All sides were able to inform each other’s perspectives to work towards results that were useful and feasible.

Results

The new Wego app was faster and more intuitive. The introduction of Material Design principles and UI/UX best practices resulted in a clean, consistent design and a more fluid user experience. The implementation of the UI Component System ensured that the end-to-end design came out as planned and that Wego’s team could reuse the elements in it for further development

Conclusion

The new user-centered app helped Wego boost its growth in the mobile-first markets of Asia. Their development team was now better equipped to solve problems and keep building and enhancing the app thanks to the component library. The mobile-optimized interface provided the app’s users with a clean design and an experience that was more streamlined and intuitive.

Read more

As our digital world expands, the field of UX has evolved to fit an ever-growing number of needs. The industry now includes specialties such as UX designer, UX architect, and UX researcher. Companies that want to create better user-driven products now enlist a host of these specialists on their teams to ensure that every aspect of development is fine-tuned to perfection.

Torii Studio CEO and founder, Cristóbal Chao, was one of the first tech professionals to hold the title of UX engineer. He’s spent the past decade helping clients like Wego, Trello, and Google improve the user experience of their web and mobile applications. In that time, he’s collaborated in creating award-winning designs that have earned rave reviews from companies and users alike.

As part of their Beer and UX series, Neuron hosted Cristóbal to chat about his journey as a UX engineer. He went into detail about the job of a UX engineer, how this unique role contributes to the creation of better user-centered products, and some best practices to keep in mind when building a great user experience.

What is a UX engineer?

UX engineers (UXEs) are front-end developers with a comprehensive understanding of UX and design principles. Their role was born out of the need to bridge the gap that has traditionally existed between designers and developers. The primary function of a UX engineer is to translate design concepts into the language of developers.

What sets UX engineers apart from other front-end engineers is their special focus on the technical elements of a user’s experience. They integrate insights from UX and user research to make decisions on a product’s interactivity such as which types of gestures are the best for activating or accessing features.

By acting as a bridge between the design and development teams, UX engineers ensure a consistent and cohesive end-to-end experience and that users can interact effectively with products.

What does a UX engineer do in a product development team?

1. Prototype

UX engineers build prototypes using the same engineering framework as the final product. Building prototypes close to the end product generates better user feedback during testing and mitigates the risk of elements changing during the development process. This helps UXEs catch and fix bugs early in the product development process, test out the feasibility of a design from an engineering standpoint, and streamline the development process.

2. Test

Testing with prototypes allows UX engineers to better understand the right balance between how a product feels and how it works. The data obtained from these tests is used to inform design decisions and help refine the final product’s features, usability, and overall experience.

The goal of testing is to iterate and gauge how far the product is from what users want. Observing how users interact with prototypes is the quickest way to identify whether a product is solving a problem and identify areas of improvement. Each iteration becomes an opportunity for refining the product and closing in on a balance between ease of use, functionality, and design.

3. Empathize

The job of a UX engineer is not only to get more users; it’s also to figure out how to keep them by building trust into products. Positive product experiences result from a combination of good design, consistency, ease of use, value, and desirability.

UX engineers use the results and observations from prototyping and testing to empathize with users and ensure that a product’s value proposition is on par with their needs. They advocate for users both from a design and development standpoint to ensure trust is built into every part of the final product.

4. Collaborate

Successful UX results from effective collaboration between UXEs, design teams, and developers. All sides check and inform each other’s perspectives to work towards a solution that is both useful and usable. The role of a UX engineer in that team is to bridge the gap between what is possible and not possible with an experimentation mindset, technical know-how, and design sensibility.

Versatility is important: it’s not uncommon for UXEs to wear many hats, especially in startup settings. Their roles will vary depending on the company or product development project they are working in. Sometimes they will be doing more front-end work. In others, they may be working closer to the design team.

Why your product development team needs a UX engineer

UX engineers are an asset for any product development team seeking to improve communication between their design and development sides, ensure consistency and cohesiveness, and create better user-driven products. They contribute a unique user-first perspective for solving both design and engineering problems.

Although it’s still taking shape, UX engineering a field with countless opportunities for individuals wanting to pursue a career that allows them to combine their technical knowledge with their design skills.

Want to help your product development team build better digital products? Contact Torii Studio and we’ll help you make it happen.

Read more