Poor practices consume startups because of foundations built of sand. It doesn’t have to be that way with a few considerations.
Debt consumes startups because of foundations built of sand.
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:
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.File Identifiers: They can uniquely identify files within or across systems, ensuring that even files with the same name can be differentiated.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 DashboardURL Example: https://example.com/dashboard
View Accounts
Page Title: AccountsURL Example: https://example.com/accounts
View Account
Page Title: Account: ACME CorporationURL Example: https://example.com/accounts/123e4567-e89b-12d3-a456-426614174000
Create Account
Page Title: Create AccountURL Example: https://example.com/accounts/new
Edit Account
Page Title: Edit Account: ACME CorporationURL Example: https://example.com/accounts/123e4567-e89b-12d3-a456-426614174000/edit
View Contacts
Section Name: ContactsURL Example: https://example.com/contacts
View Contact
Page Title: Contact: John DoeURL Example: https://example.com/contacts/123e4567-e89b-12d3-a456-426614174001
Create Contact
Page Title: Create New ContactURL Example: https://example.com/contacts/new
Edit Contact
Page Title: Edit Contact: John DoeURL Example: https://example.com/contacts/123e4567-e89b-12d3-a456-426614174001/edit
View Opportunities
Section Name: OpportunitiesURL Example: https://example.com/opportunities
View Opportunity
Page Title: Opportunity: Big DealURL Example: https://example.com/opportunities/123e4567-e89b-12d3-a456-426614174002
Create Opportunity
Page Title: Create New OpportunityURL Example: https://example.com/opportunities/new
Edit Opportunity
Page Title: Edit Opportunity: Big DealURL Example: https://example.com/opportunities/123e4567-e89b-12d3-a456-426614174002/edit
View Reports
Section Name: ReportsURL Example: https://example.com/reports
View Report
Page Title: Report: Quarterly SalesURL Example: https://example.com/reports/123e4567-e89b-12d3-a456-426614174003
View Settings
Page Title: SettingsURL Example: https://example.com/settings
View User Settings
Page Title: User Settings: Jane SmithURL Example: https://example.com/settings/users/123e4567-e89b-12d3-a456-426614174004
View System Settings
Page Title: System SettingsURL 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
The system shall allow the creation and updating of user roles.The system shall provide an interface to assign roles to users.The system shall display a list of available roles.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
The system shall provide an interface to assign specific permissions to each role.The system shall allow permissions to be modified as needed.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
The system shall restrict access to features based on the user’s assigned role.The system shall provide an error message when users try to access a restricted feature.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
The system shall provide a view of all users and their assigned roles.The system shall allow filtering by role and user.The system shall display a history of changes to role assignments and permissions.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-UIAnt Design: A design system for enterprise-level products offering a comprehensive set of high-quality components and a customizable theme.
GitHub: Ant DesignChakra UI: A simple, modular, and accessible component library that gives you the building blocks to build your React applications.
GitHub: Chakra UIBlueprint: Developed by Palantir, it’s optimized for building complex, data-dense web interfaces, focusing on performance and usability.
GitHub: BlueprintSemantic 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.
