D/d is a collaboration tool designed for designers and developers. Using methods and values from key tools like InVision, Slack, email, this tool was put together driven with the intent on allowing the designers and developers to stay connected throughout the entire product process; from when the designer uploads designs to be seen or reviewed, to throughout the time when the developer is working on the actual product.
I conducted a series of interviews, and scoured the internet for information. I then analyzed the data to identify the problem, detail out the analysis of our target users, and come up with a list of requirements. The problem I faced with this idea was that with the use of different tools, different knowledge bases, and the different set of skills, there exist holes or gaps in the communication of a designer and a developer that in turn slow creation or production.
I sketched out a couple ideas that followed that data. The first idea sketched out combined all tools both a designer and developer uses. These tools included a text editor, a preview option for designs and dev builds, a chat system, and a comment system. Soon I realized that this might be too much and may cause more issues, so I took another approach.
This idea removes some of the direct tools the designer and developer uses and focuses more on collaboration. The 2 main modes are Design and Dev. The 4 sub modes allow users to take action. These 4 sub modes allow a user to comment, link design pages with dev pages, directly preview the design or dev pages, and even overlay design and dev pages to make sure details are covered.
To accurately capture both the design intent and interactions, I crafted a manual functioning paper prototype. This prototype was tested with an individual to validate the functionality of the prototype. The user selected was a novice in both design and development, and was selected purely based on validating the app functionality.
On a product team it is important to stay in a constant feedback loop to ensure design and development are in sync. With this feature, both designers and developers can communicate over not only the designs, but the current build that's in development. A key point about the comments is that they can be viewed from all modes except Link mode. This is to keep any related comments with the UI component it affects.
In this feature a user can view who is currently online via the green bar on the left, allowing the user to know who is online. Users can reply via the reply box below the latest comment. After studying other apps, I added this feature in because of its strong social collaborative nature.
This key feature allow designers and developers to see which designs are linked with which dev pages. This feature is central and unique to this product, in that it allows both parties to stay in the constant know as to which dev asset is related to what design asset and vice versa. Users can also see which file upload has an unread comment, and who is the owner of the upload. Team members can upload newly updated files here to keep in context what is the current product state, or what new changes have happened. Team members can also manipulate links if needed.
This page directly affects the Overlay feature, in that it auto-chooses linked screens.
When comparing design side-by-side with dev work, most details are gathered. However, the finer details are often missed, which often leads to rework by both parties. In this product, I created a feature utilizing the metaphor "tracing over a drawing". This feature allows a team member to overlay a designer's or a developers work with the opposite's, allowing for those finer detail comparison. This feature would help reduce the number of those finer details missed.
I conducted rapid usability tests with three different users. Overall the design performed well, especially for the developers. Through some of the tasks though, a few things did come as items to improve this product in the future. In the design, a green bar was used as indicators of people online, however it was discovered that using a circle indicator along with offline people will perform better due to its recongnizable nature.
It was also discovered that the Link tab proved not to be very useful to the participants, so I recommend removing this tab altogether. Rather I suggest, based on the data, that in the future the Overlay tab is updated to be not dependent on the Links tab and function fully as one of the main features of this app.
Thanks for checking out my work. Please feel free to drop me an email to get into contact with me and connect with me on social media.
