Design Process
Before starting the design process, I had to identify who my app was going to be for. Below are the steps I took to gather the user requirements as well as my prototyping stage.
Primary User Group
  1. Social media users who are focused on video content
  2. Looking for a way to manage all their videos in one place
  3. Primarily use a laptop/ desktop for video production and editing
  4. Making money from producing videos
Persona
covalent
User Tasks
Then based on this user group and the persona, I came up with the following user tasks.
  1. I want to have a daily report with all my statistics across all social media platforms.
  2. I want to be able to view the videos posted to each platform in one place.
  3. I want to be able to see analytics data for each platform without having to go to each of them separately.
Lo-Fi Prototyping
From these user tasks, I determined that a web application with a dashboard style would suit this product the best and since most video creators have to interact with websites, it would be a complementary addition to their workflow.
I then listed out a few key screens and features that I wanted to include in my prototypes.
  1. Dashboard to view all information
  2. Teams panel to manage team members - Since nowadays video creators work with a large team of members
  3. Nice looking charts
  4. Beautiful to look at, and navigable reports
  5. List of videos
  6. Video analytics and management tools
I then hand drew simple wireframes to represent each user task to get a clearer image of what it was going to look like. After a few iterations, I ended up with the following storyboards:
Storyboard 1
covalent
Storyboard 2
covalent
After designing the Storyboards I devised a user flow that would fit with the design of the app.
User Flow 1 - Analytics
  1. User logs in with their account and is redirected to the dashboard.
  2. User can choose to view the videos they have posted or view the analytics data.
  3. User chooses to view the analytics data and see a page containing a few graphs and can choose the video platform they wish to see the data for.
User Flow 2 - Report
  1. User logs in with their account and is redirected to the dashboard.
  2. User goes to the Report page to view the business data for the day.
  3. User is able to clearly and easily pick out information they need.
  4. User can toggle between different reports and see the relevant data.
User Flow 3 - Videos
  1. User logs in with their account and is redirected to the dashboard.
  2. User goes to the Videos page to view the previously uploaded videos and scheduled videos
  3. User is able to clearly see the view data, the thumbnail, and the title of the video from the list.
  4. User can then view the analytics of each video in the list.
I then moved on to evaluate some of the past designs I created.
Design Findings
Some of the design decisions I weighed while working on the wireframe:
  1. Using a dashboard style vs using a traditional style webpage.
  2. The relevant tabs on the sidebar, should the side bar be collapsable
  3. Usage of graphs and if they add value to the user especially when some data can be represented as values instead of graphs.
In the end I choose to keep the dashboard style since it felt more functional especially when the user will want to be able to switch between different tabs conveniently. This also helps the user to be able to see the data in a more organized way.
Once these steps where done, I started to design the High-Fi version of the web application on Figma.
© 2022 Ong Jun Xiong