UX startup survival guide: build your application the right way

Poor practices consume startups because of foundations built of sand. It doesn’t have to be that way with a few considerations.

My career for the last decade has focused on design leadership in Series C startups. This often involves cleaning up inconsistent information architectures, roll-your-own design systems, data that has to be refactored, and a lack of localization.

The rework diverts resources, takes months to solve debt, and significantly slows business progress. It doesn’t have to be that way.

If you’re building your next startup, here are application considerations that will make managing your application easier and help it grow with the right foundation.

Use Anonymized Identifiers

UUIDs, which stand for Universally Unique Identifiers, are typically used in computing to assign a unique identity to entities so they are unique — hence the name. Here are some common use cases for UUIDs:

1. Instances: UUIDs can help identify instances, avoiding collisions and the need for a central issuing authority. They also won’t be identifiable to the outside world.
2. File Identifiers: They can uniquely identify files within or across systems, ensuring that even files with the same name can be differentiated.
3. User and Session Identifiers: In web development and network communications, UUIDs can serve as user identifiers, ensuring that each is distinct.

UUIDs are beneficial because they reduce the likelihood of duplicate identifiers in large systems and across different systems, which is crucial for maintaining uniqueness without needing a central database.

It also obfuscates user and instance data so it isn’t identifiable as Personally Identifable Information.

Create Clear Information Architecture Patterns

A clear information architecture is the backbone of any successful startup application. It’s the foundation for a seamless user experience you can build upon for years. A well-defined IA scales effortlessly, letting your application grow and incorporate new features without missing a beat.

From a development standpoint, a clear IA keeps your codebase coherent and simplifies the development process. It establishes a common language between developers and designers, which becomes crucial as your organization scales.

It serves as a blueprint for everyone involved, ensuring consistency across different sections of the application and fostering a shared understanding.

Guidance

A simple structure I have used for years is this:

• At the first level, use an identifier that is plural, like “/accounts”
• At the second level, use an add the UUID at the end, like “/accounts/[UUID]”
• If there is a hub-and-spoke page, like administration, use “/administration,” and then everything else drops a level down.

Now, the fun part: below is a prompt you can paste into Chat GPT to build your information architecture. All you have to do is cut and paste, and you can modify the prompt to fit your needs.

Prompt

“Creating an information architecture for a customer relationship management system that uses UUIDs to manage account and contact details can help organize and access efficiently. Each page should have a page title example, and use an example detail title where appropriate, a URL example should use example.com, and a UUID in the URL where appropriate. The section format should be the section name. For detail pages, the section detail page should be the section’s name with a detail identifier.”

Result

Dashboard

• Page Title: CRM Dashboard
• URL Example: https://example.com/dashboard

View Accounts

• Page Title: Accounts
• URL Example: https://example.com/accounts

View Account

• Page Title: Account: ACME Corporation
• URL Example: https://example.com/accounts/123e4567-e89b-12d3-a456-426614174000

Create Account

• Page Title: Create Account
• URL Example: https://example.com/accounts/new

Edit Account

• Page Title: Edit Account: ACME Corporation
• URL Example: https://example.com/accounts/123e4567-e89b-12d3-a456-426614174000/edit

View Contacts

• Section Name: Contacts
• URL Example: https://example.com/contacts

View Contact

• Page Title: Contact: John Doe
• URL Example: https://example.com/contacts/123e4567-e89b-12d3-a456-426614174001

Create Contact

• Page Title: Create New Contact
• URL Example: https://example.com/contacts/new

Edit Contact

• Page Title: Edit Contact: John Doe
• URL Example: https://example.com/contacts/123e4567-e89b-12d3-a456-426614174001/edit

View Opportunities

• Section Name: Opportunities
• URL Example: https://example.com/opportunities

View Opportunity

• Page Title: Opportunity: Big Deal
• URL Example: https://example.com/opportunities/123e4567-e89b-12d3-a456-426614174002

Create Opportunity

• Page Title: Create New Opportunity
• URL Example: https://example.com/opportunities/new

Edit Opportunity

• Page Title: Edit Opportunity: Big Deal
• URL Example: https://example.com/opportunities/123e4567-e89b-12d3-a456-426614174002/edit

View Reports

• Section Name: Reports
• URL Example: https://example.com/reports

View Report

• Page Title: Report: Quarterly Sales
• URL Example: https://example.com/reports/123e4567-e89b-12d3-a456-426614174003

View Settings

• Page Title: Settings
• URL Example: https://example.com/settings

View User Settings

• Page Title: User Settings: Jane Smith
• URL Example: https://example.com/settings/users/123e4567-e89b-12d3-a456-426614174004

View System Settings

• Page Title: System Settings
• URL Example: https://example.com/settings/system

Prioritize Access Control

Implementing a role-based access management system at the start of your application is akin to laying a solid foundation for a house. By defining roles and permissions from the outset, you ensure that each user has access only to the rooms, er, features they need.

Integrating this early on simplifies the engineering process of adding new features. You won’t have to retrofit security measures or worry about breaking existing functionality. Instead, you can confidently build and expand, knowing that your access control policies are robust and scalable.

It is a proactive measure that saves time, enhances security, and supports a smooth, scalable user experience that many enterprises demand.

I’ll help you get started with this prompt.

Prompt

“Write specifications for role-based access control to manage user roles and users with access to specific features in standard user story format and a verb-noun description for the title.”

Result

Create and Assign Roles

As a system administrator,
I want to create and assign roles to users,
so that I can control their access to specific features.

Acceptance Criteria

1. The system shall allow the creation and updating of user roles.
2. The system shall provide an interface to assign roles to users.
3. The system shall display a list of available roles.
4. The system shall ensure that each user can have one or more roles assigned.

Define Role Permissions

As a system administrator,
I want to define permissions for each role,
so that I can manage which features users with those roles can access.

Acceptance Criteria

1. The system shall provide an interface to assign specific permissions to each role.
2. The system shall allow permissions to be modified as needed.
3. The system shall ensure permissions are applied consistently across all users with the same role.

Manage User Access

As a system administrator,
I want to manage user access to specific features based on their roles,
so that users can only access features they are authorized to use.

Acceptance Criteria

1. The system shall restrict access to features based on the user’s assigned role.
2. The system shall provide an error message when users try to access a restricted feature.
3. The system shall log attempts to access restricted features.

View and Audit Role Assignments

As a system administrator,
I want to view and audit role assignments and permissions
so that I can ensure compliance and track changes.

Acceptance Criteria

1. The system shall provide a view of all users and their assigned roles.
2. The system shall allow filtering by role and user.
3. The system shall display a history of changes to role assignments and permissions.
4. The system shall export the role and permission audit log.

Use An Open Source Semantic Design System

Imagine building a UI that’s not just pretty but smart. A semantic design system ensures every component and element is named and structured based on its purpose, not just looks. This means that when a developer, designer, or stakeholder looks at your work, they understand instantly — there is no head-scratching involved.

A semantic design system is your secret weapon for a streamlined development process. It’s like giving your design and engineering team a clear roadmap to follow that will accelerate time to value.

Some good open-source React.js design systems to consider are:

• (Recommended) Material-UI (MUI): This is one of my favorites. Based on Google’s Material Design, it provides a robust set of components and themes, focusing on usability and aesthetics, but it’s super easy to customize
  GitHub: Material-UI
• Ant Design: A design system for enterprise-level products offering a comprehensive set of high-quality components and a customizable theme.
  GitHub: Ant Design
• Chakra UI: A simple, modular, and accessible component library that gives you the building blocks to build your React applications.
  GitHub: Chakra UI
• Blueprint: Developed by Palantir, it’s optimized for building complex, data-dense web interfaces, focusing on performance and usability.
  GitHub: Blueprint
• Semantic UI React: A React integration for Semantic UI, offering a set of UI components that use human-friendly HTML.
  GitHub: Semantic UI React

These design systems provide a wide range of components and styles but also adhere to best practices in usability, accessibility, and performance, making them excellent choices for building modern React applications.

Implement Localization

Implementing localization is crucial for expanding your product’s reach and improving user experience in a global market, and it really should be baked in at the very beginning.

To do it right, start with English as the first language, and then you can translate it later. Here’s a step-by-step guide:

• Selecting react-i18next simplifies the process of managing translations. Structure your project to support multiple languages containing key-value pairs representing the text in your application. A good information architecture will help you immensely, too.
• Integrate the localization library into your React app by setting up an i18n configuration file. This file will handle the library's initialization, define the available languages, and load the respective translation files. Next, wrap your root component with a provider component from the localization library, ensuring the entire application can access the translations.
• Use the library’s translation functions to replace static text in your components with dynamic keys referencing your translation files. This step ensures that text elements can be easily swapped out based on the selected language.
• Consider display values as part of the process. Localize other aspects of your app, such as date and time formats, currency, and any culturally specific content. Regularly test your application with native speakers to ensure the translations are accurate and culturally appropriate.

Need more guidance? Read this article to get a detailed code walkthrough: Localization in React: A Guide to Seamless Multilingual Applications — i18next Package

---

UX startup survival guide: build your application the right way was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.