RESEARCH

Understanding the users

Before making any design decisions, the first thing I did was learn as much as possible about our Backhub users. Specifically, I wanted to understand who these users are, what drives them to log in, what features they use the most, and what pain points they experience in the existing product. I conducted user interviews and observed user interactions with the current UI. I created a new dashboard in a data analytics tool, Dovetail, to capture feature usage data. Using this new knowledge, I mapped out user personas and their respective feature usage to inform the design process moving forward.

Common migration flows

As part of this migration, the current Backhub users would experience significant changes in their experience with the product - not only in the way they interact with the interface but also in the functionality of the product. I did external research to learn more about how to make this transition as intuitive and seamless as possible, consulting UX studies on user migration and looking at common patterns that other organizations have followed when migrating users from an acquired company to their own platform.

Using this research, I mapped out different migration strategies to talk through with the product and development teams to make sure we were all on the same page about the best approach to take.

Future considerations

From a product strategy point of view, this design had to make use of the current interface and design system while also considering future platforms within the ‘development’ vertical that the team may decide to begin backups for in the future (ex: Bitbucket, Gitlab, … etc.). I did research into what data from these platforms we would potentially need to backup (and display in the interface) if we supported them in the future - this ensures that the final design for Github will also be adaptable to similar products.

DESIGN

Initial Explorations & Wireframes

Two main solutions were initially explored for this project:

1) Imitate the existing Backhub experience, and rebuild it using the Rewind design system. This would make the transition for existing Backhub users seamless and intuitive, but it would not address the pain points of the existing solution. For example, the current solution displays backups in a list format, with lots of spacing between items. It also used a dropdown function to view information about each item. The amount of clicking and scrolling required by Backhub users in order to view all of their data was one of the main challenges identified during the research phase.

2) Follow the general ‘vault’ UI used to display backups for all other apps in Rewind, such as Shopify, Quickbooks, and others. This solution would be the easiest to develop and would provide a consistent user experience across the Rewind platform. However, the data visualization technique used for smaller, item-level backups for other apps (ex: a product in Shopify) was not feasible for Github, where each backup contained much more information (ex: a repository of code).

I wanted to develop a new solution that would solve these challenges by improving visibility and making it easier for users to quickly perform important actions. To achieve this I decided on a slider that would display the information about the selected repository, allow them to complete the appropriate actions, and move quickly between items using a new arrow navigation feature. This would reduce the amount of ‘clicks’ required by the user.

Improving the existing experience

See the difference below in the amount of scrolling & clicking required from the original app to the new solution.

TESTING & ITERATING

Testing the Interactive Prototype

I conducted usability tests to test my hypothesis and validate the solution. To do so, I tested an interactive prototype across 6 test participants, 5 of which were recruited from UserInterviews.com (pre-screened to determine if they are Github users with a need for backing up their repositories), and one of which was a current Backhub user.

I started by asking test participants about their roles at their company and what backup processes they already have in place, if any. I then asked them to interact with the clickable prototype and complete a series of tasks. I finished by asking follow-up questions about their experience using the prototype (what was confusing, what functionality were they expecting that was missing, … etc.).

During the test I used a collaborative and contextual approach to note-taking where me and my team members observing the tests could add sticky notes to screenshots of the prototype in Miro, highlighting pain points and areas of confusion.

Overall Findings

Results from the usability tests were generally validating. We found that 100% of the test participants were able to successfully complete all given tasks, and all responded positively reporting that the overall experience was simple and intuitive.

However, the test results also highlighted areas of the prototype to be iterated upon. For example, almost all of our test participants had trouble finding the Audit Log feature so we decided to move it to the main menu to improve visibility. We also found that the icons we chose to distinguish private from public repositories were not intuitive, so we changed them to text labels to make them more clear.

Final Design