Adsnative product redesign
Team Project: Cooperate with Xuening Sun, Dhawal Mujumdar and Teresa Yung.
Role: Product Designer
Year: 2016.1 - Now
Adsnative is a platform that allow people easily publishing their native advertisements. It used by companies like Disqus, Newsmax, Pocket. Due to a shift in product direction, my role coming into this new position is to redesign the UI and UX for the company’s main product.
I designed mockups for the dashboard, reports, console workflow in creating and editing new inventories and campaigns.
Adsnative’s product was originally designed for users who don’t know much about ad serving. The design scheme used was assuming a more self-serve model, which emphasized on simplicity and ease of use. However, due to a shift in company direction, we needed a more professional enterprise SaaS solution that emphasized on control, transparency and data insights instead. The current design became a poor solution for our new target audience, who are small business ad teams.
General Problems Included:
- The navigation, originally constitute of top nav and side nav, frequently caused user confusion and was being used inefficiently as it distracted users' attention.
- The side nav took up considerable screen real estate, which resulted in very limited content area for users who have lower resolution/window size.
- Many features were added without thinking through the whole structure, so the old structure was not fit the new function and contents, which causes confusion and frustration for the user to find what they want to see.
- An outdated brand page also served to be useless for engineers coding new pages, so many pages in the product were not consistent with each other. The website looked broken without standard design rules.
Our old report page looked like this:
1. Redesign the information architecture.
- Combined "Placement" and "Contents" into "Inventory", and added more pages in each section.
- Remove links and tabs that were rarely used (e.g. Network), while using more model windows to reduce the layers of product.
2. Clarify the navigation and strengthen the visual hierarchy
What led to using a side navigation?
I began to explore a variety of ways in which we could rethink the design of the navigation that would help us clarify the structure and simplify the experience. I researched navigation approaches used by competitors and other complex web products. Our product is still fasting growing and we are keep adding new pages and functions. A persistent sidebar can clearly show the changes and the relationship between the new functions and the old. It makes navigating easier. Throughout a lot of other exploration, it became clear that a side navigation bar would be the most effective approach for our product.
What are the pros of this approach?
Beautiful hierarchy, logical connection between views, directly guide users through the structure of the product. Sidebar simplifies navigation and removes need for dropdowns.
What are the downsides of this approach?
The side nav took up considerable screen real estate, which resulted in very limited content area for users who have lower resolution/window size. Currently we think of using a foldable solution to solve the problem for users using small resolution screen. I think when our product become more complete, we can try more options to rearrange the navigation system.
DASHBOARD & REPORTS
Dashboard & Reports Problems Include:
- The content space was not effectively used to show data, there was a lot of empty space, a more organizable way to show more data is urgently needed.
- Quantitative and qualitative feedbacks were received about requesting new filters for data we have.
- Reports page and control page were separated and it was really inefficient for users to see the report and have to switch to control page to change each campaign.
- The chart and table were separated and layout in a up-down way, which cause a lot of inconvenience for users to scroll up and down to see the exact data in table and the graph over the time.
The previous dashboard and reports had 4 main parts - Side Nav, Top Nav, Graph Chart and Data Table. The design had two stage: the first design was a transitional version that just redesign the visual style based on previous contents and structure, the final design was a completely layout redesign and added many new features and data filter. In reports, I added the control function and changed the way of showing chart and table from up-down to left-right.
1. Familiar with the product.
Understanding the product evolution history is very important for a designer who jump in a relatively mature product. I've cost several days to view all the previous design, focusing on color, font, layout, icons, contents, function and interaction flow. I talked with the founder and chief of the product to figure out how they made each design decision, why it looks like this now but not other options, what's the initial product goal and problem they are trying to solve. Only after knowing the whole product can I find the design problems to solve and improve.
2. Architected a simpler experience.
I evaluated the existing design and identified the key features and design style. The first step was to define the visual standard to improve user experience on existing design style. In order to let users have time to fit the new product, I only did some change on small details . My focus was on standardizing visual elements, using the space as effectively as possible and also leave some potential area to add new features for future use.
3. Evaluated the data and user feedback.
I worked with our Director of Client Engineering to gather usage statistics on how the dashboard was being used. This data revealed that significant confusion around the chart and table.
Qualitative user feedback gathered over the past year requesting the new filters for geography, device and partner.
4. Brainstormed and explored approaches.
I began to explore a variety of ways in which we could rethink the design of the dashboard that would help us show more contents effectively and simplify the experience. I researched dashboard approaches used by other complex web products, and also explored more innovative ways of approaching the navigation. Throughout this exploration, it became clear that a left nav - contents - right list would be the most effective approach for our product.
5. Design iteration and team feedback.
After sketching, designing mockups, and iterating and polishing for many times,
our final product dashboard looks like this:
Feedback: Throughout this process I received frequent feedback from our Engineering team, Product Management, and Marketing teams. I worked closely with VP of the product, front-end engineer marketing designer and our founder to evaluate the various approaches against our goals, which led to additional iterations.
Visual Design iteration: I also worked as a Visual Designer to polish the dashboard's visual treatment. I iterated on the visual elements including color, typography, spacing, switch, input box etc.
6. Created customization experience (Reports Only)
Analytics data revealed that the grand majority of users have different preference in viewing data report. Thus, in the first redesign, I designed 4 most frequently viewed dataset combination. However, we knew that we couldn’t always predict which dataset were most important for each user. So, I designed a customization system that allowed users to define which dataset were surfaced.
7. Creating the brand page and guidance.
I used the elements from the new dashboard to create new brand page. This will help our engineers building the product using the same standard.
- There was no enough explanation for users to understand each item's meaning while they were creating a new campaign or new placement.
- The poor structure confused users to use the product.
- Users need to scroll down a lot to finish all settings, this is inefficient and users might neglect some of the important settings.
- The old multi-select function only fit for individual users or small startups that had small amount of accounts. When the company continually growing, for some big clients that has over 50 accounts, it will be so inefficient to control the multi-select items.
These are our old campaign creation & editing interfaces:
- Added question mark next to the the majority items, which allowed users get fully explained of that item.
- Combined card design and tab to reconstruct the structure of the creation and editing page.
- Focused more attention on solving the problem of using multi-select function for big clients and how to adapt the style to all other multi-select items.
Below are some exploration when I designed the form:
I started with rethinking the structure, because we decided to use card design, what items can be organized together and put inside one card was one of my biggest challenges. For example, in old campaign creation page, we had 4 steps: choose campaign type, add creatives, basic settings and advanced settings. After research, we found that there was no obvious reason why some settings became "advanced". Users can't distinguish them and therefore they neglected some important settings. In the new design, we changed it to 3 steps: choose campaign type, add creatives, settings. Under settings, we created 4 new tabs to categorize all the items . We put "Campaign Name", "Advertiser Name" and "Brand" inside "Sponsorship" tab, put "Placement" , "Geo" and "Device" under "Targeting" tab, because they are all about targeting users. Put "Rate", "Impressions" and "Budget" under "Budget & Goal". Finally we put "Date", "Scheduling", "Priority" and etc into "Scheduling Policy". After this, the whole settings page became much clearer and easy to use.
Our final campaign creation & editing looks like this:
Like I mentioned above, multi-select function is something very important in new design. I did a lot of iteration on this, the design good for less than 10 users use will not fit 100 users, not to mention 1000+ users. And the multi-select style will be different when used for different item.
We received a lot of good comments from our first test customers, like DISQUS and Newsmax. It still not published to all users but it will be soon!
Although our changes were well received, the product is still far from perfect. You can rearrange the furniture to make a house flow better, but sometimes what you really need is to knock down some walls and fill the cracks in the foundation. Unfortunately for now, changes of that scope go beyond Adsnative's engineering bandwidth.