Access invision prototype here
Context
Company
Ulule is a crowdfunding company operating in Europe and North America. It focuses on funding projects with a positive impact. Frequent projects funded on the platform include clothing or self-care brands, music or book releases and charity fundraising. These projects can be of many different sizes, raising from 1000 up to a million euros.
Ulule is often recommended by creators thanks to its coaching team, helping them succeed in funding their projects.
Project
The Ulule edition project was about redesigning one of the core aspects of our platform: our project creation tools and UI. While we had recently redesigned the project page and the way it appears to backers we needed to improve our administration UI to bring it up to date. This project would be a huge one since it centers around a very sensitive part of our platform. We worked on dozens of pages and key functions that all needed improvements to provide customers with a best in class crowdfunding campaign management tool.
Tools used for this project: Notion, Miro, Sketch, Invision
Research
Documenting our curent UI
From the beginning it was clear to us that our UI were outdated, but they were also poorly documented in old Sketch files. To begin, we had to collect every information and screenshot of the whole project management tool to be able to have a complete and up to date view of it.
This inventory allowed us to see the complexity of the project with many screens and functions that would need updates and modifications. We could have gone for a simple reskin of the UI, but we knew if we wanted to do a great job we needed to redesign components and change the way information and tools were spread out on the screens.
User research
After this screen inventory we went back to a user-centered approach. At first, we collected requests from users and internal teams to know what the biggest pain points and needs were. Several workshops allowed us to establish a list of priorities.
The second aspect was to work on where each tool should be; for example, whether the image management tool should be on the same page as the text one or also whether identification should be with banking information. We solved those questions with multiple workshops with our teams.
This reflexion around information hierarchy also made us understand that we had no other choice but to redesign our navigation menu to make it easier to use.
Our research also required user flows and personas to get a better understanding of how our creators were managing their projects on the platform.
Prototyping
Main UI
After having structured the different screens, we established a first list of pages and content:
- A project presentation that would be divided in 4 screens
- Project settings divided in 5 other screens
- A section dedicated to rewards for backers
Those categories would always have a main screen and advanced screens for power users in order to answer each type of project creator needs.
We also thought about the implementation of our other management tools such as preview and coaching chat, which we did not change in this iteration but adapted to the new design.
Early wireframes
Having built a strong list of screens and content, we could then easily start building our first wireframes based on our design system and on other existing pages.
Since we had a lot of text inputs and interactive components to place, it was very important to use wireframes as a way to quickly iterate.
Navigation
After having properly set up our wireframes we had to work on our new navigation menu. We tested many versions on a vertical and horizontal layout and ended up with a vertical one for its flexibility and power user feeling.
Refining our UI
After wireframes came proper UI design. We changed the structure and the placement of many components and content during this process in order to fit the mindset of our users as much as possible. This design phase was about global structure but also quality of each individual component. Some of those components such as the one for social networks and tags required a high level of interactivity.
Final UI
Main UI
The final UI was approved after many versions and iterations.
Its main element was a brand new navigation panel displayed on the left on the screen. This menu allows users to quickly move in between the settings screens.
The screens themselves all have a brand new layout and design that puts this UI in the forefront of our field. We also focused on ease of use with a lot of care put into adding tips and explanations to guide every project creator and minimize the need to go to our FAQ or coaching chat.
News and FAQ
As sub projects, the news and FAQ panels were an important subjects since we built a brand new tool featuring a new inbox and components to publish and edit those contents.
Interactions and mobile
The work of interaction and components design was a big part of this project. Each text input and component needed to have all of its states documented to allow for an efficient development.
And of course the mobile version was also designed to allow easier edits on mobile than on the current design.
User testing
After finishing our prototypes we went into a session of user tests that allowed us to refine our product even further. We had very good feedbacks but got insight on how to improve some wordings and components.
Follow UP
This project of redesigning our "project edition" tool was definitely a major one. It contained dozens of screens, lots of interactions and was adressed to the people bringing value to Ulule: project creators.
By working on a user centered approach and on a lot of iterations we were able to go from an outdated UI to a best in class project management tool that would confirm Ulule's position as the leading European crowdfunding platform.
This project is still being developed and some design also needs to be finished before full release but it will be a game changer and make the life of creators way easier.
Access invision prototype here