Trello Redesgin Study ✏️
A redesign to create an easier, cleaner experience with a new interface.
TOOLS
Invision, Figma
ROLE
Product Design
TYPE
UX Design
DURATION
Summer 2020 (1 Month)
Strong digital presence is key in our highly competitive climate and my story is about a journey I took as a designer to reimagine the interface of a leading project management tool — Trello.
Trello is dedicated to building a better tomorrow through innovative project management for high-level planning.
📚 Overview
Trello is a collaborative project management tool that allows you to organize projects in “boards”. With Trello, you can see what is currently being worked on, who’s working on which tasks and when something is in progress.
Trello reimagines the typical white board with sticky notes into boards with photos, attachments and other data sources to comment and collaborate with teammates. It has a spectrum of user patterns ranging from individual, small enterprises, and large companies.
🌱 The Process
I followed the five stages of the Design Thinking Process: Empathize, Define, Ideate, Prototype, and Test.
💡 Empathize
✏️ Why does it need a redesign?
After a careful analysis of the Trello interface, I drew the following conclusion of why it needed a redesign:
The interface looks outdated
There is no way to understand the process for users who don’t know about it
Reviews of Trello mentioned it unorganized and confusing interface
Poor use of color
✏️ Research: What is Trello?
Project management tool
Collaborative tool for teams
For large business, small businesses, and individuals
Trello aims to help business by giving them customizable layouts of the traditional “sticky notes on a white board”
Make it possible to work with “any time”
Their interface didn’t reflect this dynamic. Aesthetically, it lacked visual appeal and didn’t go justice to the brand. It amplified confusion rather than coherence and transparency.
Competitive Analysis + Comparison
✏️ Competitive Analysis
Monday.com
User activity monitor
To-do-list
Status tracking + reporting
Project templates
Multi-departmental projects
Campaign planning
15+ app integrations
Asana
Tagging
Realtime updates
Project planning + projections
Personalized profiles
Personalized management
Deadline tracking
160+ app integrations
Jira
Communication management
Customizable reporting
Development tracking
Timeline management
250+ app integrations
✏️ Common Patterns Observed
Task monitoring
Timeline management
Project planning
App integrations
To-do-list
✏️ Identifying Users + Audience
Individuals
Personal to-do list
Freelancers to organize work
Teams
Marketing teams
Small, medium and enterprise businesses
Startups with different purposes: Team Onboarding, Agile Development, Simple CRM, Office Management
🤔 Define
Use Cases for Individuals + Teams
✏️ Use Cases
I need to tag different tasks
I want to organize my boards and tasks efficiently
Teams can create a board for a specific project
I want to use a range of lists to organize key project areas
I want to break each project area down into more manageable parts, cards can be added
I want to invite internal and external stakeholders to the board to give everyone insight into the project overview and current status of tasks
✏️ Problem Statement
To redesign the interface of Trello that helps Individual and Businesses for a cleaner look. The objective is to certain Trello’s favored features but create a new interface that is intuitive and simple to use.
✏️ The Solution: an Interface Redesign!
To make it easy to understand company value + facilitate positive user experience
To create a modern + appealing visual style that showcases brand personality
✏️ Brand Values
Easy to use (Individual)
Intuitive
Customizable (Personalized service)
Support any type of business to grow (Business)
📝 Ideate
I asked How Might We questions to put together solutions to solve problems and ideate the ideal interface
How Might We’s | Brand Identity
How might we use strong visual features and visual hierarchy to distinguish sections
How might me show different sections of boards
How might we incorporate a more colorful presence
How might we develop a cleaner interface that reflects brand personality (personal value)
✏️ Solutions — Things to Have
Color tabs for organization
White interface
Clear labels on each board
A key for different label colors
Bottom Down section with social media icons, relevant links, and contact
✒️ Prototype
✏️ I started by sketching on sheets to get a nice flow of ideas. My papers wireframe looked like this:
✏️ I moved onto developing a mid-fidelity wireframe:
✏️ Visual Aspects
I referred to my Mid-Fidelity design to piece together important visual aspects.
Assets
Bubble-like buttons
Bookmark for color tag or disks
Boards
Colors
Primary colors
Grays, blacks
Fonts and weights
✏️ High Fidelity Design
I designed the final UI of the website on Figma in the following screens:
For the home pages, I wanted to reimagine Trello in a more modern and organized approach — instead of many boxes surrounding the top half of the screen, I focused on the boards as the primary elements. With just a bit more spacing, the cards are easier to follow and don’t feel overwhelming*.
They also include bookmarks as color tabs. I felt that this added a bit more personality and flare to Trello’s design since I felt that its previous dulled colors didn’t speak to its personality and mission as well.
*This was an issue I read about in reviews for a handful for users
The newly designed homepage with: bookmark color features, who’s working on what card, and the ability to create new boards and cards.
✏️ Success Analysis
What this redesign achieved:
Better Use of Primary Colors
Instead of using colors only for tagging, I assigned each board a dedicated color — allowing users to navigate between boards at ease. It also provides for a more mentally organized overview of each board.
Each of the bookmarks also corresponds to a specific tag — such as “in-progress”, “needs review”, or “approved”. Users can edit these tags at any point in time.
This makes the interface much more vibrant, friendly, and exciting. For a brand that yearns provides project management in a fun way, I felt that color was the perfect way to do so.
You can also see all the boards that exist, each with their own dedicated color for easy navigation and transparency.
The right toolbar includes user settings, recent activity on the board, and the ability to add members.
Enhanced Transparency for Easy Use
Users can also easily search up keywords they look for in cards, lists, and boards together. It gives users a preview of what the card is and its respective details (attachments, images, done items, and who is working on it). This makes the search and card process much more transparent for users looking to see who’s assigned to what, and how the card is progression (is it in progress? need review?) It’s all available in search!
The quick toggles between boards and calendars also allows users to quickly check between deadlines and ongoing projects. Under calendar, users can also view it as “Month” or “Week” view. With every color corresponding to its respective board, it’s organized, coherent, and transparent.
Updated search bar that displays individuals cards and boards and where the keyword appears
You can also toggle and see a board’s existing calendar as well as deadlines, project planning days, and you can toggle between month and week view!
A Modern Design that is Ergonomic
The new Trello interface offers a more modern take on the product — white space, primary color usage, and other elements.
With the landing page including a central mission and message, users can be more inclined to try out Trello and sign up as individuals or businesses.
There aren’t an overwhelming number of buttons both on the home screens and on the landing/sign up pages, making the the process of changing, editing, or clicking buttons intuitive, easy, and also ergonomic for the user. They don’t have to overextend continuously to get to where or what they want.
I went ahead and redesigned Trello’s landing page that includes immediate actions: signing up, taking a tour, looking into pricing, and a quick overview of what it features.
When clicking “login” it displays a new and clean login page
📚 Test
💡 Next Steps
Now, this isn’t the perfect approach nor the perfect design process. The design process is notably interactive, iterative and provides continuous feedback. If this were to be perfected, I would use cycles of feedback, conduct specific user-research studies, and continue to iterate through my designs.
Regardless, I enjoyed every part of researching modern aesthetics, diving into reviews from Trello to other competitors, seeing what users love the most, and above-all, being able to redesign a popular tool. I feel proud of the work I put in, the countless hours at my desk crafting this redesign and I genuinely feel happy with the end result! I can’t wait to continue conducting more of these case studies as I develop more apps and websites.
💓 Thanks for reading!
Thank you so much for reading — this was an attempt to refine my skill in redesigning a popular digital product and improve my understanding and importance of user research. This UX case study allowed me to showcase my design process and how I approach problems. I would love feedback and to hear your thoughts!
🚨 Key Takeaways
Spend time during the discovery process and put deep thinking on whether you are doing what’s right — designs can be pretty but they also need to be applicable, productive, and intuitive
Be able to validate assumptions before your work is completed
Organizing and structuring design principles is essential to the process — I will continue to work on ways to visualize the design principles in my process for a stronger study foundation
Don’t be afraid of redesigns! It begins with getting to know real users — with user research and testing being key. Gather as much data as you can and respectively categorize and analyze them to support your design thinking. Follow this cycle of design + feedback and continue to iterate!
Thanks again and feel free to check out my other projects!