I was the only designer on this product. This gave me the opportunity to work on all major user-facing properties which include the web app, browser extension, and iOS app. Typical to the small startup life, this role required wearing many hats—from collaborating with our CEO on defining product features and direction, thinking through user flows and identifying friction, creating high-fidelity mockups, working with our software engineers and building the front-end of our application, to fixing bugs and creating the occasional marketing ad.
Dashboard Redesign: Problem/Opportunity
I began working on the Papaly web app in late 2014, the same year the company was founded. Papaly was an existing website that had already acquired a small loyal following, but after getting more familiar with the site and talking with our CEO, we saw that the product didn't have a strong sense of consistency in the UI and interaction behavior: from the lack of a design system or pattern library, to misaligned UI elements, and a user experience that would allow for error-prone interactions.
Some of the user feedback the team had gathered previously was people not knowing how to import their bookmarks into our product and being confused about certain areas of the application such as the inbox (the row of links at the top of the application). We saw there was still an opportunity to make bookmark management even simpler and powerful.
Based on the user feedback, and the direction the company wanted to take the product in, we decided to begin working on a redesign. In order to base future design projects on a stronger foundation, the redesign would not only polish and update the visual design, but also help restructure the layout to provide a more enjoyable, and simpler user experience.
Dashboard Redesign: Goals
Apart from the visual refresh, there were a few key areas of the product experience we wanted to focus on:
Creating new bookmarks should be as frictionless as possible.
Managing, or moving bookmarks between boards and categories should be simple and intuitive.
Searching for bookmarks should be quick and easy.
Because Papaly is a bookmark manager, we felt these were key interactions to keep in mind because they would determine the initial success of the product. If any of these features presented a bad user experience, it would deter people from continuing to use our product and therefore we wouldn't be a good bookmark manager—defeating the entire premise of the product.
Wireframes: Iteration 1
For our first iteration of the wireframes, we decided to go with a bit of a liberal approach. Given the UI refresh we wanted to do, as well as some of the new features on our product backlog, these initial wireframes were mostly about exploring a new layout and finding out where some of these new features could exist.
The wireframes for this first iteration begin to show a new sidebar navigation that has additional pages for exploration to make Papaly a bit more fun and explorative. It also introduces a few new features such as board collaborators, board comments, and board stats. Ultimately, as a product in an early-stage startup, we wanted to increase engagement and daily active users. After discussing with the team, we felt these features would help increase those metrics for various reasons. However, because our primary project at the time was the redesign, we decided not to continue exploring in detail how some of these features could work. We decided to focus on some of the basics of our product before committing to new features.
Wireframes: Iteration 2, 3, 4
The following iterations of the wireframes begin to show some of the functionality of our core product experience such as adding and searching for bookmarks.
Adding bookmarks was kept to a simple 3-step inline process. We decided to go with this process because it removes a lot of the friction when it comes to adding bookmarks on our website. The inline process keeps the user in the same view while also giving them a contextual view of where they're adding the new bookmark.
For our search filter functionality, we went through a few iterations that show various ways of presenting the search results to users. The wireframes show various bookmark attributes such as URL, title, and their taxonomy to give users contextual information about the bookmarks they're viewing.
UI Design: Early iterations
Since the beginning of this project, we've continually gone through many iterations of the UI based on user behavior. Below are some of our first iterations of the visual design.
Overview of iterations
This is an overview of the high-level flows, visual direction, and interaction design we iterated on throughout the process.
This is what the current product looks like as of 2016. The current design is a culmination of various design iterations, discussions with our Product Manager, and the results of user behavior research.