CS3240 Interaction Design Individual Assignment: Design Exercise

Ordinary Twilight
11 min readApr 1, 2022

Design Task 5: Social Media

Hi-fi Prototype: Home Page

Social media, with its surge in popularity, has evolved to become a basic need for many today. For some, social media platforms could also be their main source of income. You are tasked to design a page that helps consolidate all social media accounts belonging to an individual, allowing them to track their growth on each platform. Any other features or screens are also welcome. You may also assume that there is no restriction on the medium to design for in this design task.

Figma Diagrams

Figma diagrams for research, wireframes and hi-fi prototype.

Understanding the problem

Even though user research and user testing were not explicitly required for this design exercise, I felt that some user research was beneficial for the design task I chose, considering how user-centric the social media experience is. Out of all the topics, social media was probably the platform I had the most experience in because I have used the native statistics for platforms like Instagram, Twitter and YouTube. However, my prior experience potentially blocked me from being able to see the needs of other users, hence the need for some user research. Taking advantage of my social media contacts, I managed to get a short feature wish list and a few distinct profiles of social media users.

Most users could be categorised into casual users, content creators and business owners. Casual users have the least use for social media growth monitoring as they only use social media to passively consume entertainment and share their lives with family and friends. If casual users check their social media statistics, it is most likely for fun.

Content creators span a diverse range of people, from artists to influencers, but in general, their goal remains the same: To reach as many people as possible with their content. To these users, metrics such as likes, shares and followers are helpful to gauge their account’s reception and growth. These metrics may be used as criteria for monetisation programmed, making it even more critical for those who wish to make a living using social media. Therefore, optimising growth strategies like using appropriate hashtags and posting during followers’ active hours would be helpful. Content creators would also be more interested in maintaining rapport with their followers and communities, meaning that analysing comments and post replies could be beneficial.

Lastly, business owners tend to use their social media pages purely for marketing purposes. While likes, shares and followers are still good for making sure that their marketing materials are seen, these users would be more interested in the number of users who are redirected to the business’ promoted links and contacts (usually to an online shop of sorts). Business owners are also more likely to pay money in order to advertise on social media platforms. Hence they would want to closely monitor the gains from their investment in the advertisement algorithms.

After distinguishing between the groups, I collated the responses from my casual survey to the findings below:

  1. Even if they were content creators, few of my contacts actively checked their social media engagement statistics, citing a lack of interest and stress from constantly monitoring the numbers. Most contacts were aware of the existence of native monitoring solutions but were unfamiliar with using them.
  2. Some of the contacts mentioned that they did not enjoy data analysis as they found large tables of numbers to be too intimidating and boring to read. Even those who wanted such data preferred charts and pictorial representations as they were more aesthetically pleasing and easier to understand. This makes sense considering how graphic charts would have less cognitive load compared to massive chunks of text or numbers.
  3. Since my contacts were very knowledgeable about their respective social media platforms, they gave some exciting suggestions for features to include in the monitoring tool, such as a virtual assistant to show you the most essential data and to provide tips that are uniquely tailored to one’s social media account and goals. Another interesting tip (which I was unfortunately unable to add to the prototype) was a social network map that showed your interactions with regular followers across platforms. This idea was particularly intriguing as it helped link data across platforms and potentially find new behaviour trends that could not have been seen in separate platform data. However, due to the complexity and privacy concerns, I decided not to fully adapt this idea into the prototype despite its potential for robust analysis.
  4. Other features which were raised included advertising guides, trends that one’s followers are interested in and advertisement monetisation analysis. While these features are not seen in the prototype, the nature of the prototype’s modular system means that it is possible to use these features in some form. However, the platform’s access might limit monetisation analysis to the social media platforms’ native data.

Additionally, I spent some time looking at the interfaces for native social media monitoring by Instagram, Twitter, YouTube, Twitch and even Medium. I tried to include elements from these interfaces into my prototype so that existing users would not be forced to relearn the entire system when encountering my design.

Instagram Creator Studio and Medium Analytics (image credits to Later.com and Medium)
Hootsuite Analytics, a social media management tool (GIF credits to Hootsuite Analytics)

As we can see, this task was deceptively complex due to the extremely broad scope of users involved. Therefore to cater to as many users as possible, I came up with the concept of Kazu Analytics, a modular social media statistics dashboard. The dashboard aggregates data from all of the user’s linked social media accounts. Still, it is up to the user to decide the order and layout of the dashboard such that the data they are the most interested in will always appear first. Of course, such a task risks a high cognitive load as the user has to think about the kind of data they require. Hence, an intelligent assistant is incorporated into the user’s site. Based on the user’s preferences, the assistant will prioritise specific statistics (both user-requested and inferred based on similar account types) and arrange them accordingly. The assistant also gives tips for the user to improve their account, although the user is always in control and can choose to change their preferences or dashboard layout. The platform I chose for my solution was a website/mobile app. Both sites have similar arrangements, although the mobile app would be more vertically-oriented owing to the different aspect ratios of phones. I chose this platform because most users of the platform would also access their social media accounts with the same device, so using the device itself should not present too much difficulty or inconvenience. Additionally, a desktop website allows for an easy transition to spreadsheet software if users choose to download their data for more intensive analysis.

Lo-fi Prototype: Interactive Wireframe

To maintain simplicity for the prototype, I chose to simulate the account of Jenny Smith, a fictional content creator who is focused on increasing her like and follower counts. Her configuration did not show much of the monetisation-related tools, but they are available if she finds them helpful in the future.

Check the detailed statistics for Jenny Smith’s Instagram account.

The first three pictures cover a simple user task: Check the detailed statistics for Jenny Smith’s Instagram account. The user home page is a dashboard detailing Jenny’s social media performance over the week, with summary charts and highlights for particularly significant events. The dashboard also shows a section where Jenny can check her performance by platform. The second picture shows the individual account performance page, with more charts and a Hall of Fame for Jenny’s best content. The social media network feature was downsized and included as a list of regular fans. Selecting a graph will enter the detailed statistics page consisting of a more extensive chart, raw data and the option to download the data. Overall the user flow is linear in nature and relatively simple to achieve, minimising the Gulf of Execution and the Gulf of Evaluation. However, the number of charts risks a high cognitive load due to overwhelming data. Hence, the dashboards can be edited to pack the data together less densely and avoid unnecessary sections.

Account insights for different needs.

Next, the virtual assistant’s deliverables are shown on the “account insights” page, which crunches the raw data into tips and tricks for account optimisation and projected growth if the advised strategies work successfully. Depending on Jenny’s requirements, the Insights page can be changed to include different sections for revenue or to expand the real estate of more essential modules. The dashboards save automatically, preventing users from accidentally losing all their changes. However, the user can also easily undo changes.

Finally, the wireframe also includes a mockup of the adapted display for mobile users, which uses more vertical scrolling and prominently displays the option to zoom into more complicated charts on smaller screens.

Mobile interface

Hi-fi Prototype

While the hi-fi prototype did not include frames for the mobile interface, I believe that the wireframes sufficiently expressed the general layout idea. I wanted to focus more on revamping the dashboard when making the hi-fi prototype. These are the most significant changes from the wireframing stage:

  1. Change in data presentation: As seen from the hi-fi prototype, the dashboard is clearly demarcated into modules, with each module featuring some form of data. For example, the Quick Digest module shows the last seven days of growth in simple flashcards, one for each user’s linked accounts. The digest period can be customised depending on how often the user checks their statistics. Considering the fast-paced nature of social media, most users would be more interested in recent growth due to new posts or strategies. As seen from the “Edit Dashboard” frame, the Quick Digest module and other modules can change size and orientation depending on users' needs. This frame also shows how modules can be swapped out from the current view, as seen in how the Kazu insights module was swapped for Weekly Growth Goals. This ensures that the user’s most needed data is easily accessible from the top of the screen, allowing for H-7 Flexibility and Efficiency of use. The clearly marked out undo button also maintains H-3 User Control and Freedom and H-5 Error Prevention. When editing the board, the user should click and drag the modules around, similar to editing one’s phone home screen and promoting H-6 Recognition rather than Recall. The final layout is always seen while editing, preserving the H-1 Visibility of System Status. Lastly, the Quick Digest module also has a help button, fulfilling H-10 Help and Documentation.
  2. Removal of the Insights page: I realised that the dashboard and insight pages being separated were a bit counterintuitive for users who just wanted everything available at a glance. Hence, I decided to incorporate the Kazu Insights page into the Main Dashboard, where they would appear as a dashboard module. Instead of a dedicated page, the Kazu Insights module advises on account improvement. The assistant also suggests weekly growth goals to gamify social media growth and promote consistent effort into growing the account. Additionally, the assistant can recommend optimal hashtags and post timings based on recent content, collating the data from the past week in the Quick Digest module.
Dashboard and Edit Dashboard

3. The next significant change is the new “Accounts” tab in the header where “Insights” was used. By allowing access to individual account data and the consolidated Dashboard through the header, the user is able to quickly navigate to their data from anywhere on the platform, increasing H-3 User Control and Freedom. Additionally, the hi-fi prototype deliberately uses a clean, minimal and icon-based design for many of the data indicators, satisfying H-8 Aesthetic and Minimalist Design, as well as H-2 Match between System and the Real World since the icons for social media platforms and mechanics such as likes, followers, retweets and subscribers, are easily recognised by social media users like Jenny Smith. Her profile has fewer linked accounts for the hi-fi prototype to reduce redundant parts in the prototype. The Accounts page is where the most detailed charts for each account’s attributes are stored, and once again, the display order can be changed, and the raw data can be downloaded. While the charts are less accessible than before, this should not be an issue as most users will not need the complete charts very frequently. Of course, if the user needs a full chart, they can easily add the corresponding module to the dashboard. While the placeholder charts in the hi-fi prototype use random data, they are meant to look similar to the native social media monitors’ charts to maintain familiarity for those who also check the native monitors and reduce the number of charts styles needed for new users to learn.

Accounts

4. Lastly, the hi-fi prototype introduces the Preferences page, accessible through the gear icon on the top right corner of the page. Other than basic information like the user’s name and password, the Preferences page also shows the user’s linked accounts, with options to “crown” accounts as their primary social media account for the Kazu Insights feature to pay more attention to, edit the profile’s data or unlink the data. At this point, I should clarify that Kazu Analytics assumes that the platform has third-party access to the social media apps’ data and hence requires its own platform account with external links to the social media accounts in order to get the growth data. The page also includes the “Optimise Kazu Insights” section, a series of questions like the ones pictured that help customise the virtual assistant based on the user’s needs and account specifications. These preferences are initially set when the user makes their account but can be changed at any time, allowing for H-7 Flexibility and Efficiency of Use, H-1 Visibility of System Status and H-5 Error Prevention.

Preferences

This modular social media dashboard prototype should have enough flexibility to adapt to most social media users’ needs thanks to its modular system, regardless of whether they are casual users, content creators or business owners. The virtual assistant helps to significantly streamline the data analysis process, providing helpful information and reducing the cognitive load on the user to have more bandwidth to complete other tasks.

--

--