Colony
UX and UI Overhaul of Blockchain’s App with React.js
About The Client
Colony is a platform designed to simplify the process of creating and managing Decentralized Autonomous Organizations (DAOs).
It provides a complete toolkit for DAOs, aiming to make them quick to set up, easy to manage, and free to create. Colony emphasizes simplicity, cost-effectiveness, and efficiency in DAO management, catering to both beginners and experienced users.
Challenge
Disjointed UI/UX Hindering Usability and Scalability
When Colony reached us, their web application built upon React.js required a visual refreshment to make it easier, user-friendly and attractive. Additionally, the current setup made adding new functionalities complicated and often led to a disjointed UI and UX, resulting in user confusion about how the application worked. Furthermore, since Colony is constantly growing and evolving, they wanted to ensure they have a solid foundation to support their further growth and provide full scalability.
In the last few years, we have seen a huge growth in web applications and many providers now face similar challenges. This is mainly because they focused on core functionalities during development and new product launches, without fully anticipating future growth, user feedback, or the need for new features. As a result, periodic overhauls of the UI/UX are necessary to ensure the application remains effective, efficient, and satisfying for users, while also being capable of accommodating growth and evolution.
Solution
Front-end Team Augmentation
Colony decided to outsource the front-end development to refresh their current application, mostly because they decided to focus their internal resources on backend development and blockchain integration, areas that are core to their platform's unique value proposition.
Recognising that front-end development was not aligned with their strategic priorities, they chose not to expand their internal skills in that area, but to optimize the resource allocation and focus on their strengths. They determined that outsourcing was the best option for them, as it would make the development process more time- and cost-efficient.
Given our previous cooperation and the fact that we already knew the project, Colony decided to use our React experience for their project. They provided us with the list of needs they had for implementing the new design:
accommodate new features better
adjust the app to the price they charge for using it
rebuild some components
make it easier and more attractive
make it more user-friendly
make the app more mobile-responsive
implement users' feedback they received
improve overall user flow and interactions to make it easier to access and ensure a simple process
Colony provided us with the designs, and we were able to start the development process.
Main Features
To meet the requirements we introduced many features, where the main ones were:
Dashboard
Previously, there was the main view, but the new dashboard provides information about the colony, funds, actions and more, giving the user an overview of the current state of his DAO and providing a good starting point for work.
Action Flow
Action flow is the heart of this platform so it required the most work. The whole panel of creating the action was standardised, and now the preview of the action during its duration and after the finalisation is unified.
“Members”, “Finances”, “Agreements” and “Extensions” Screens
These sections were available previously, but the new ones are much more user-friendly. Additionally, a broad filtration is available, allowing users to find the right DAO member without the hassle.
Business Implications of the decision
The overhaul addresses the complexities of integrating blockchain functionalities, ensuring a seamless user interface that simplifies interactions with decentralised technologies.
The redesign increases the platform's ability to support diverse DAO structures, making it more adaptable to different governance models and user needs.
By focusing on creating a unique visual and interactive experience, the project significantly differentiates Colony from its competitors, establishing a strong brand identity in the blockchain space.
The incorporation of specific user feedback related to blockchain and DAO operations into the UI/UX design highlights Colony's commitment to user-centric development.
The technical choices and design considerations take into account the fast-evolving nature of blockchain technology, ensuring that the platform remains forward-compatible and scalable.
Want to Rebuild Your Web App?
Tell us about your challenge, and let's get the ball rolling.
Project Management
We have managed the project with a flexible approach that evolved from Scrum to a hybrid Agile-Waterfall methodology, adjusting to the dynamic needs of the project and ensuring effective collaboration between separate teams, that need to work closely together.
In complex projects like DAOs, close collaboration between teams is crucial. We confirmed this during the project, realizing that each feature required thorough discussion for effective design and deployment. We decided to involve the product owner in daily meetings about 6 months ago to improve the project flow. This brings many benefits, as we can discuss new features and capabilities in person, avoiding lengthy email exchanges, which improves decision-making and development processes.
Our project management tools evolved during the project to better accommodate team collaboration. We started the development using Teamwork for Project Management and Slack for communication since we were working separately from the customer team (and these are the tools we use daily).
However, when we approached the beta version release and both teams were working very closely, we realised that we needed shared tools to communicate and track the progress effectively.
We decided to move the project management to GitHub. Colony’s internal team had been using it since the beginning of the project and was familiar with it. This greatly improved communication because both teams had access to the changing requirements and subsequent comments.
Also, we switched to Discord for everyday, quick communication. The entire Colony team is available there, ensuring any questions or issues can be promptly resolved.
We are always on the lookout for tools and solutions to improve the development process and remain flexible enough to change tools mid-project to enhance cooperation with the client.
How did we make project management frictionless?
By aligning our project management strategies with Colony's internal processes and utilizing GitHub for centralized communication and task management, we achieved a synchronized and efficient development process.
We continuously evolved our project management approach to meet the specific needs and requirements of the project, maintaining flexibility and responsiveness throughout the development cycle.
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
Great service, we work with a very friendly team that makes an effort to be a part of our team when working together.
Technical Details
React JS
Tailwind
Storybook
Why React.js for a Blockchain App?
We chose React.js for its proven compatibility with Colony's existing projects and its reputation as a leading technology for modern web development. React.js is one of the best frameworks for creating user-friendly interfaces. It offers streamlined integration for new features, and supports high scalability, making it a natural fit for the project's requirements.
And React.js is just great for blockchain apps:
React's Virtual DOM guarantees the UI is highly responsive and updates efficiently. And that’s crucial for reflecting real-time blockchain transaction data without reloading the page.
The component-based architecture allows for modular development and reusability, simplifying the integration of complex blockchain functionalities like wallet connections and smart contract interactions. Components can be developed, tested, and deployed independently, addressing the scalability concerns inherent in blockchain applications.
One-way data Binding improves stability and predictability in the application state management, necessary for handling transaction data and user authentication securely.
JSX syntax allows developers to write HTML structures in the same file as JavaScript code, making it easier to create dynamic and interactive UIs for blockchain applications, enhancing user experience and engagement.
Why Tailwind?
We suggested Tailwind CSS because we use it across many projects and we believe in its utility-first approach. It makes it an ideal choice for implementing custom designs with speed and efficiency.
Tailwind's focus on responsiveness and its scalable, customizable system aligns perfectly with the project's needs for a flexible, easy-to-maintain CSS framework. It enabled the rapid development of an attractive UI, ensuring consistency across different devices and browsers.
And it’s also the best choice for blockchain apps:
Tailwind's utility classes allow for quick UI iterations, essential in the constantly changing blockchain space
Offers the flexibility needed to create unique, brand-aligned designs without heavy reliance on custom CSS, which is important for establishing identity in the crowded crypto market. (Our customer was changing the design one more time during the project to separate their brand from the competitors even more)
Easy-to-implement responsive designs ensure that blockchain applications are accessible across all devices
Tailwind CSS leads to smaller, more efficient stylesheets by reusing utility classes, important for the performance of web-based blockchain applications
Why Storybook?
Storybook is a powerful tool for UI development in React.js and other frameworks because it allows developers to build and test UI components in isolation. And of course, it’s beneficial in blockchain applications, where components need to handle complex states and data structures.
Challenges during the project development
Adaptive Development in Dynamic Project Environments
When working on a large and complex project like the DAO app, it must be treated as a ‘living’ project, where not everything can be planned during the design phase, and some features are validated only after implementation (to check if they’re working in the best possible way). We had to introduce many changes and amendments during the project. Often, the concept of a feature had to be completely changed because the design brief didn’t work in the real environment.
It’s always challenging to work on similar projects, but we are prepared to suggest new solutions and adapt to scope changes. We maintain a changelog to document all changes, set priorities appropriately when new changes arise, and offer flexibility in broadening the scope during development.
Quality Assurance with real funds
Given the nature of blockchain technology, testing the app in a QA environment required a wallet with real funds (i.e. there recommended by MetaMask extension). We needed that to deeply test the platform, and some of the tasks, like signing the contracts or making changes within the platform involve the need for fee payment. To ensure that our tests reflect real user experiences, we tested only on real devices, using the same payment structure as end users.
Mobile Responsiveness on as many devices, as possible
Colony wanted to provide full responsiveness for as many users, as possible, without listing the devices and platforms. However, the implementation of the design to the mobile version was complex because of the number of tables or various user-interactive components within the app. We overcame this by cooperating closely with the designers to finally provide a smooth user experience across mobile and tablet devices.
Results
Since launching in a closed beta at the end of November, limited to a select group of users, the platform has been under continuous improvement, reflecting the dynamic nature of blockchain applications. This time has been crucial for gathering and integrating user feedback, with our team working closely with Colony to enhance the application. It ensures that by the time of the public launch, the application will have been refined to the highest possible standard, mirroring real-world insights to deliver an exceptional user experience.
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
The investment made for Pagepro's work was well worth it, and they were very accommodating to our billing preferences (...) We would recommend them highly and would like to continue working with them ourselves.
HAVE A PROJECT?
LET’S TALK ABOUT IT!
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
Tell us more about your project
Please provide detailed information about your challenge, and our tech team will promptly review your submission. Expect to hear from us within 24 hours with tailored next steps and insights based on your request.
Book a Meeting With Our CEO
Upon receiving your form, we typically recommend a briefing meeting with our CEO to explore the specifics of your project. Schedule your meeting now to kickstart a tailored approach.
Chris Lojniewski
CEO & CGO