Product Design for Dextra
Redefining art collaboration - Case Study
Redefining art collaboration - Case Study
Dextra is a platform for musicians, filmmakers, actors, models, photographers, writers, dancers, artists, designers, and people with ideas and skills, to collaborate with other creatives around the world and bring their ideas to life.
The Challenge
Dextra had created a community of over 30,000 creatives from around the world who could share their work and post and seek collaboration opportunities. The app had a basic feed and a simple search and chat functions to enable these tasks. The user looking for a collaborator had a simple flow - add a requirement, browse through the users who have applied, chat with them and take the project outside Dextra.
As the community grew, one thing that became apparent was the need for creating and managing entire projects inside the platform itself. The project had to be more descriptive than a single line of requirement it had then. This would be the first large scale change in how the platform functions and the core architecture for Dextra.
Along with this, we needed to create and update all the other supporting user flows that this new feature depends on.
My Role
I was brought in as the Product Designer for the mobile and the app for Dextra. My primary task was to explore, research and create user flows and later design wire frames and screens for these new features.
The main focus was on mobile with limited support on the web, until we could find appropriate resources to work on the web. In spite of that, all the designs and flows were created in a way to be applicable to both mobile and web as best as possible.
I was working along with the mobile developers and the product manager for this task and was later joined by a junior designer to help additional screens.
Execution
Part 1
Open Projects and Templates
After the initial brief about the project and the app, the first task I undertook was to create an application map and a user flow. As I was working on that, I started researching similar flows on other apps and services. I created a few flows that I tested and discussed internally with a few colleagues until I narrowed down to a decent flow.
Original flow and the proposed new flow
Additional Flows to support open projects
As I was worked on the user journey, I started doodling the flow and rough screen layouts. I started collecting questions and problems that I needed to solve. Some of these were directed at the Product Manager and the development team to understand their point of view, rationale and technology behind it. After some discussions with the invested parties, I came up with the following designs goals.
We needed to define Ongoing and Completed projects. We created a list of words that would best describe these two. Internally we referred to them with various names but as the design progressed we narrowed down to the nomenclature above.
Putting everything on paper
The next step was to understand and wireframe the add project flow. We want the users to add a project as one of their first tasks after onboarding. So the flow needed to be clear and precise as well as quick to understand and fill. Since it is a form, there were two ways to display that.
1. Get the form filled one field per screen
2. Show all information in a single screen in one go
2. Show all information in a single screen in one go
The first point was incompatible with the design goals I had set. The steps were not visible which would have been an easy fix but the Android app had some development constraints. It would have a hard time creating and managing separate screens due to the way it was written and a fix would cost a lot of development time.
Choosing between popup and dedicate screen
We decided to move ahead with the second approach, for now, to come back to it once we had the core form ready.
I started creating the rest of the screens based on the flow. Adding and adjusting the flow as required. Once I had the Ongoing project down, I started working on the finished projects. With these two flows ready we started testing them internally and collecting feedback.
Final open projects flow
While collecting feedback those flows, I focused my attention to the project view. The project can be viewed by 3 groups of users.
1. Owner
2. Collaborators
3. Dextra Community
The project view changes for each of these groups, mostly the action buttons. The major challenge here was to create a feed that looks interesting, informative and non-repetitive. Since every project would have different elements, we needed to test out dozens of edge cases before finalising on a design that would work best on most if not all types of user project. I also tested out different layouts and selected the ones that would be the best fit for our users and what we would want to have them focus on.
While it would seem that the user image should get the most real estate, we realised that users were focused on the opportunities and descriptions about the project which eventually took the higher priority.
Development constrains didn't allow us to move forward with single project per screen design as of now and other UX improvements were also halted but we were able to create designs based on those learning for future development cycles.
After some testing and feedback sessions, we closed on a couple of wireframes with the media at the bottom. I started creating designs based on these wireframes and different type of media cases. The final designs were then handed over to the development team.
Incremental Additions
Once the core of the project flow was ready, we started working on a new layer of simplicity to it. The project creation process had to be simpler like a 1-2-3 process. We had created templates but the flow form template to the project creation screen was too jarring. This is when we introduced the Start Screen.
Early template exploration
The simple design asks the 3 essential inputs. Once done, we would take them to the edit mode to add remove or fix any info before finally submitting the project.
The result was an easy way to create projects for new users and a more powerful layer where experienced users can make changes that they like.
Part 2
Open Search
After we had redesigned how the projects would work we needed a better search system that would enable the users to find people and projects. We needed to get this out quickly and effectively. After a quick search on different implementations of similar search functions we decided to tackle ours using a very familiar Facebook approach.
We also had two different verticals (People and Projects) to search from and we decided this design worked well as it is open for future additions like dexes as well as filters which we decided to park for a feature release.
Using the simple chip/tag design we were also able to get rid of tabs that were causing issues with filters and easy access to parallel search.
Part 3
Group Chat
One of the most requested features that we got was Group chat. Once the project is live and the team is recruited, a lot of our users had to move away from the platform to continue working on their projects. This was largely due to the face that Dextra currently only had a one to one chat.
We envisioned group chats as more than just a place of communication with advanced features like file sharing, live previews, polls etc. Also, we realised that a project can have multiple teams and for that, we wanted a place where teams can manage all their chats together.
This idea brought us towards our larger goal to create a lean collaborative platform with a focus on communication and task management.
Result
650+ new collaborative projects started.
No. of opportunities saw an increase of 61.7%
Active users on platform since OP launch 1600+
(Before and after 3 months of Open Projects launch)
Minor fixes and future concepts
Over the course of the year, I kept working on minor changes to make the app more usable. This ranged from minor UI changes like fixing an icon or copy to redesigning UX flows like how an applicant can be directly is added to a project. Along with this, as directed by our testing and feedback pipeline, we created better alert and information pop up so the user can understand and interact with the app better.
