ChannelMeter Redesign
A walkthrough of the complete ChannelMeter redesign, from frontend website to internal systems and social media branding.
|
ChannelMeter is a video analytics startup that was part of 500 Startups Batch 9.
Type: UI design internship Role: Research, competitive analysis, wireframes, visual design. I was responsible for the majority of the UI decisions, and worked with the engineering team to design within constraints and improve the user experience. Timeline: June – August 2014 *Note: Since summer 2014, ChannelMeter has gone through another redesign, so the screens shown in this walkthrough do not necessarily represent their current product. |
ChannelMeter is a startup working on making video analytics smarter, easier, and more effective. In the summer of 2014, it was a small company run by a team of less than 10, and they needed a complete redesign before their Demo Day at 500 Startups. As a UI design intern at ChannelMeter, I was responsible for the full redesign effort, including their website, internal systems, blog, social media, and pitch deck for the demo.
Since I was the only designer on the team, I was able to touch almost every part of the product and have my designs shipped to production everyday—it was a really special experience working so closely with the team and watching my designs come to life. The goal of the redesign was to give ChannelMeter a complete transformation in terms of branding, as well as to improve their user experience and flow for complex aspects of the product. I wanted to refresh their identity as a simpler, more effective analytics tool. To provide a better sense of my design process, below is a brief walkthrough of how I went about redesigning the homepage.
Since I was the only designer on the team, I was able to touch almost every part of the product and have my designs shipped to production everyday—it was a really special experience working so closely with the team and watching my designs come to life. The goal of the redesign was to give ChannelMeter a complete transformation in terms of branding, as well as to improve their user experience and flow for complex aspects of the product. I wanted to refresh their identity as a simpler, more effective analytics tool. To provide a better sense of my design process, below is a brief walkthrough of how I went about redesigning the homepage.
|
Before moving into any digital prototyping, I always sketch out some quick mockups with pen and paper. This was a great way to share my initial thoughts with the engineering team and also measure the feasibility of each design with our limited resources.
|
|
First run-through, just cleaning up the homepage. ChannelMeter wanted their redesign to be simpler and more crisp than their original site was.
|
|
I also experimented with several different ideas – one of them was adding a sidebar that would pop outwards when hovered over.
|
|
The final redesign of the homepage: If the user has a specific video or channel in mind, they can enter their query into the search bar and immediately see some of the key analytics behind the content.
However, for users who are simply browsing the site and do not have anything particular in mind, they can jump into one of the colorful squares around the search bar – these represent the icons of a variety of popular channels, from sports channels to fashion channels. |
And below are a few examples of other parts of the product that I worked on:
|
The original rankings page created a few points of confusion for users, including the difficulty of comparing neighboring channels and the ability to pick certain topics to view – such as the top 100 videos of all-time versus the current month. Another source of uncertainty arose because the top five channels listed had 0 views because they were YouTube collections, not content creators.
This is my redesign of the rankings page – because ChannelMeter is, at its core, an analytics company, I knew we needed to place a much bigger focus on the numbers. The original view did not afford users the ability to easily compare the stats behind two channels or videos, so I cut down the extraneous visual patterning and emphasized the fundamental data. We also decided to add a sidebar that would give our users more options for topics they wanted to browse at a glance. |
|
Redesigned view of ChannelMeter’s onboarding process. My goal here was to clean up the interface and add a visual cue through the three-step sidebar so the user knows that the process of connecting his or her YouTube account to ChannelMeter is going to be quick and simple.
|
|
ChannelMeter’s internal dashboard is the first look clients get when they log into their accounts. A big problem in the original dashboard was the navigation – there were no straightforward indicators of which level of data the user was viewing, and the hierarchy of information was unclear.
Because the internal systems were a bit more complex to redesign, I sat down with the engineering team and went through, point by point, which features we wanted to keep, which features to group together to simplify, and which to cut out to create a better final user experience. We often sketched out our ideas on whiteboards before creating anything in digital form. |
|
Final redesign of ChannelMeter’s internal dashboard – after talking with community managers and users during client meetings, I wanted to place a larger focus on the key stats that users most want to see when they first log in. Also included on the new dashboard are the most-viewed videos for the user’s channel, sorted by week, month, or all time, as well as a feed feature that gives an at-a-glance summary of the most recent and important channel updates and analytics.
|
|
We also added a few new features that users were looking for—for example, this channel details-by-day modal. In the world of YouTube, videos don’t just grow more popular over weeks or months; viral overnight sensations are commonplace. To give our clients more insights into how their videos were performing on a short-term basis, we decided to add a daily breakdown option that popped up whenever a specific date was clicked within the dashboard.
|
To complete the redesign effort, I also did some work for ChannelMeter’s blog and social media branding.
|
The blog redesign – I wanted to tie the branding back to the visual design of the new website. We also threw in a shout-out to San Francisco, where ChannelMeter is located.
|