Design Decisions
While working on the High-Fi prototype, I choose to split my sidebar mockup into the following sections:
  1. Dashboard - Landing page for the user
  2. Messages - Allows user to chat with team members
  3. Templates - Easy way for users to post videos across multiple platforms
  4. Analytics - Allows user to track platform specific analytics
  5. Reports - Allows users to track overall growth, performance and other non-video aspects
  6. Team - User can manage team members, allow team members to post on their behalf etc, without having to give them account permissions
  7. Videos - View all recently created videos and manage their individual analytics
The idea behind these 7 sections was that aside from just the analytics portions, the users should also be able to manage their team, post videos to all platforms at once and be able to customize their postings to suit each platform. I then decided to focus on the Analytics, Reports and Videos user flows to be made into an interactive prototype. While the rest of the sections where left as a static mockup
Although I am not going to fully explore some of these sections as they are out of scope, I wanted fully build the framework of the app to show users how the different sections work together to create a cohesive user experience.
External Libraries
I choose to make use of Material UI, Flex UI, Charts Library in Figma to help aid in the design of the interface. That said, I want to dive deeper into some of the design decisions made while designing some of the pages.
Design Theories
I decided to go with the main colors being white and blue with other colors being used to make other details pop. I followed design guidelines such as the 60, 30, 10 rule for coloring and kept my design as clean and minimal as possible.
Before creating each interaction I kept Norman's Action model in mind and asked if the user intentions would match the expected outcome. I also took note of Shneiderman's 8 Golden Rules in which rules, 1 (Strive for consistency), 7 (Keep users in control) and 8 (Reduce short-term memory load) where especially important in this app.
Since each page is very information dense, I try to reduce the short term-memory load by restricting the amount of information the user can see at any give time. By compiling the data into one chunk, the user will be able to view everything at one go.
Dashboard Design
covalent
The dashboard was the first page created and helped me to form the style that I would stick with for the rest of the pages. Initially I experimented with more of a flat looks where all the information was presented linearly instead of splitting it into containers. However, I felt that that design would be too cluttered and may lead to cognitive overload.
Hence, I decided to keep all my items in each page as containers. I felt that this would make the charts and graphs less cluttered and give the user a feeling for spaciousness. I also split the layout of the page vertically giving 70% space to the graphs and 30% space to the other information. That way, the user will easily be able to focus on the important information.
Analytics Design
covalent
The Analytics page is used to measure performance across platforms, this allows the user to have a high level overview of how their videos are performing. Most of the charts in this page are drawn with the charts library in Figma, with some cosmetics improvements by myself. The page was designed with an offset of graphs to reduce cognitive load. The graphs are also sized based on the importance and helps to present the data in a more formal manner.
All the chart data such as views, view growth and watch time are fields that the youtube, facebook and twitch analytics pages provided. So all these data fields are realistic and accurate in terms of what the user should be expected to see when viewing analytics. Due to this fact, I also decided that there would be no need to put helping ? buttons on the charts.
Report Design
covalent
The key difference between the report page and the analytics page is that they represent the different types of data. While the analytics page is for representing the video data, the report page is more for business data. This enables users to see how their videos are doing from a business perspective.
As with the analytics page, the charts are drawn with the charts library and represent real data that can be gotten from each platform. I also decided to split out some of the data such as growth, profits, time viewed and subscriber rates where users can switch between the tabs to view different data. I did this to help categorize the data so users won't feel too overwhelmed by the amount of data.
Video Design
covalent
Finally, we have the video page. This page can be used by creators to help manage their past videos, post new videos and view their current videos. The page shows which platforms users have posted to, the number of views each video got, the name and description of the videos in a list format. The list format was choose to allow of displaying of more details than a card format while being easier to sort through the date, views and other field.
Users can also view individual videos analytics from this page by clicking the three dots at the action area to open a small pop up menu.
© 2022 Ong Jun Xiong