Olytico Social Wall
Olytico's Social Wall lets you curate and showcase content from Facebook, Twitter and Instagram in an aggregated, dynamic and engaging display.
The Client
Olytico has provided live social media monitoring and analysis services to a range of clients across Ireland since 2009 including corporate, branding, media and government organisations.
The Brief
Following the success of some bespoke work for a large client, Olytico wanted to explore the idea of developing a "social media wall" product. I was hired to bring this minimum viable product to life.
The Result
After six intesnse weeks, I delivered the design and front-end templates for the public-facing display and administration aspects of the product ready for back-end development.
Turning insights into action
Research is critical to every product design process, no matter how short the timeline. I carried out some competitior analysis, surveyed a range of Olytico's customers and carried out some face to face interviews with a subset that had expressed interest in the upcoming product.
After these insights were collected and compiled, I sat with the key stakeholders to discuss how to use this research to inform the product's core features and requirements. I used job stories to start putting shape on what we needed to design and build to meet the needs of the customer and the provider.
Once we had a comprehensive initial set of job stories, I organised them into a backlog that I reviewed and groomed with the team. With everyone aligned on the goals and priorities, we started work on making the MVP a reality.
Systems and workflows
The product had two distinct aspects. The admin suite needed to allow customers configure and manage content from social channels and adjust some of the visual appearance of the wall. The wall interface needed to be able to display content from multiple channels alongside on a variety of display sizes and contexts while allowing administrators to adjust some layout or style aspects to suit their brand and content needs.
Figuring out how to meet the requirements for displaying content on the wall was the core challenge so that's what I chose as the starting point for designing the product.
Looking at the contexts in which the wall was most likely to be used and the fact that the majority of strong image content would be from Instagram, I proposed a layout system to work on a target 16:9 ratio. Content within it would be proportionate to the size of the display while also being mindful that the context for display would almost always be large-format projection. The system would also give the administrator multiple layout options providing choice and flexibility depending on context, volume of content, etc.
I used some simple, low-fidelity wireframes to help communicate and discuss the concept with the stakeholders, including the development team to ensure the feasibility of the proposal.
The chosen default grid layout for the social wall
A version of the wall without usernames
How content with text and an image would be displayed in its focused state
Considering ways to facilitate additional branding on the wall
Adapting the process
While wireframes were sufficient for discussing the fundamental technical feasibility of the solution, they could not communicate the vision I had for the product. Recognising this shortcoming, I jumped ahead on my timeline to working on a high-fidelty set of design options for the wall. I used real content from existing clients to get a true sense of what the end result might look like.
These mockups with real content gave us what we needed to finalise how the wall should look and feel, what elements would be customised by the administrator and define rules for displaying various content types, lengths and shapes. It also allowed us to start thinking about and visualising the animation and motion we wanted to prototype later in the project.
The default state of the wall with selected content on a grid
Each square tile animates forward and expands to show the full piece of content
With the design and specificatons of this core element finalised, I moved to defining the various workflows that administrators would need including the content moderation and wall themeing processes. An initial draft of a workflow informed the first iteration of wireframes which I iterated on based on feedback until we had a set that was good to go to the next phase.
The next step was to create a look and feel for the administration area of the product and combine it with the wireframes resulting in a finalised set of interface designs for the product. I also designed the empty screen states and new login page for customers of one or both products.
First iteration wireframe for the Published posts screen
Final iteration of UI with styles for the same screen
For the next phase of the project, I built out a set of front-end templates for the administration area. During this time I frequently checked in with the in-house developers who were focusing on the back-end systems and API integrations. I also provide design support to the additional contract developer who was building out the complex wall display aspect.
Going from strength to strength
Since its launch, the product has gained more and more traction and is frequently seen centre-stage at conferences and events across Ireland and beyond including the 2018 Web Summit in Lisbon. Some customers have seen significant increases in social media engagement at events while others have noted increases in employee engagement where they have installed a Social Wall in their office canteen or reception.
Have you seen our @olytico social wall at Web Summit? 👀 Get featured on it using #WebSummit ✨ pic.twitter.com/eZYNrPRQy7
— Web Summit (@WebSummit) November 7, 2018
Really cool to see the @Olytico Social Wall on its biggest screen yet - showcasing the best reactions live at the @volvoroundireland in @wicklowsailingclub #VolvoRoundIreland #VRI2018 pic.twitter.com/w99zYfN1rA
— Stephen O'Leary (@stephenoleary) July 4, 2018
Very proud to see the @Olytico Social Wall displaying the best social media content at the @SEIreland #SEIAwards in @CEVMansionHouse tonight pic.twitter.com/s4pHu2l87W
— Stephen O'Leary (@stephenoleary) October 9, 2018
Want to know more?
Check out the product promo video or get in touch to learn more about the design process. If you think Olytico's Social Wall could be a great addition for your event or workplace, check out the details here.