Social Media Lab
Project Type: Website re-design & Content creation
Tools: Sketch, Adobe Suite (illustrator, photoshop, indesign), Google Analytics
role: UX/UI Design, Illustration, Content creation, research, writing
Social Media Lab is a multi- and interdisciplinary research laboratory at Ted Rogers School of Management at Ryerson University. Established in 2010 and the first of its kind in North America, the lab studies how social media is changing the way people and organizations communicate, share information, conduct business and form communities online, and how these changes impact society. Their research seeks to advance the public’s understanding of the benefits and pitfalls of social media adoption.
As an innovator of social media tools and research, I sought to stray away from a traditionally “academic” looking website by incorporating modern design in the UI and fun, but informative imagery. Because the lab is associated with Ryerson University, certain branding guidelines had to be met, but I used that to our advantage by selecting a playful yet complementary colour scheme. The original website was extremely text-heavy and difficult to navigate. To rectify the UX issue, I created visual hierarchy by implementing colour and font-weight/size, breaking up sections to allow for intuitive call-to-actions, while maintaining a natural flow of content. The site now affords easy navigation, creating a pleasant user experience.
Research & Communications:
As the lab conducts research on a variety of topics related to social media, they produce numerous academic papers related to said research and the tools they develop. My background in journalism allows me to take dense research topics and distill them into bite-sized pieces, acting as article-style abstracts to promote the lab’s research content.
I am currently also acting as the Marketing Coordinator of the lab’s annual Social Media and Society conference. I arrange marketing materials to perform cohesively in promotional campaigns leading up to the event, as well as create content for the digital campaigns.
The original site lacked visual hierarchy, from colour to cues for separation, it was difficult to navigate and users were met with an overwhelming amount of information. There is no real colour scheme, making the imagery the only source of colour, causing clutter and confusion. The menu bar contains too many links and the chevron drop-downs exacerbate the business.
Customer surveys of the beachhead group—university professors—showed that 53% of that market were seeking to improve their knowledge of digital resources, but found most academic sites boring, difficult to navigate and providing “no real help.” I found that a recurring theme from these professors to be a lack of intuition when accessing these sites as they were used to antiquated technology and the sites they visited also lacked obvious signifiers of affordance.
Customer Journey Map
The customer journey map helped my visualize how our customer persona would ideally interact with our site. By mapping out the entire process from beginning to end, it allowed me to create empathetic design decisions and focus on mitigating their pain points and frustrations.
The header logo is an acronym of “Social Media Lab”, with the “M” design being a nod to network symbolism—the lab researches and studies social networks. As the original logo (which is included in the footer) does not fit the simplicity of the new UI, it was important to create a clean and modern logo that is necessary to act as an anchor in the header. The original site slider was begging to fit to frame, which the re-design accomplishes by splashing a full-width colourized, yet dynamic photo as the welcome header. The colourization allows for the reinforcement of the teal colour scheme, which is accented by a splash of mandarin. By increasing the visibility of the splash image, it erases the need for a site descriptor—the visuals should speak for itself. Instead of stacking recent posts, they are laid side by side to take advantage of horizontal real estate, which also affords better legibility as it reduces the character number per line. One of the lab’s main exports are their regular talks and yearly conferences, which made it apparent that the events needed highlighting. By understanding who the average site visitor is, combined with the lab’s objectives, I was able to extract important aspects to showcase on the homepage.