Learn how Liferay redesigned its mobile app by improving collaboration
At Liferay, we have regular events across the world, including France, Germany, Brazil and, of course, North America. Each event needs a dedicated marketing site and mobile experience, with diverse requirements from our teams. To reduce the time it takes to create these sites, our marketing development team decided to completely redesign the process for creating these sites, as well as how the mobile app is delivered.
Ryan Schuhler, a software engineer at Liferay, shared about this redesign process at LSNA 2018. As one of the main engineers responsible for providing solutions for marketers at Liferay, Schuhler worked on designing a new process for delivering events site and mobile that would decrease development time through the creation of reusable web components.
Setting a Path Forward for Scalable Designs
The team’s first goal for the redesign was to give users what they needed. In this case, that meant ensuring that event attendees would be able to easily find session and speaker information, as well as other useful features like push notifications.
The second goal was to improve administration so that marketers could create and update events sites without going through the development team. This was critical. Liferay has a relatively small development team for its global marketers, and anything that saves them time results is a huge advantage for the company.
Streamlining the Conversation
To address this, the development team started by bringing the conversation around requirements, design mock-ups and refinements into one workflow. This freed them to develop the desktop and mobile experience at the same time without worrying that requirements would change later in the process. If you’ve been to a Liferay event, you know that the mobile app is the primary way we provide agenda information, event updates and partner offers, so having time to implement a great user experience was incredibly important.
The team started by auditing all of the recent events in order to understand the common requirements that marketers had for the websites and mobile app.
“When we started, our marketers were worried that this would limit their creativity,” said Schuhler. “In reality, by starting with their requirements, we were able to give them everything they needed to deliver the experiences they want.”
After identifying the key requirements, the team designed configurable components that could be reused across events and regions.
“We have three types of events,” explained Schuhler. “We knew they needed different styling, but the same components could be used because the functionality was the same. This allowed us to give a unique look and feel for each event type while still maintaining brand consistency in the buttons, layout and so on.”
Refining Administration
To improve the administration experience for marketers and give them more independence, the team created a new portlet for editing event content. For example, editing speaker and session info is easier with a content editing interface dedicated to organizing that content.
Everything is centralized, which means that marketers can now update content in one place and know that it will be updated on both the website and the mobile application. The development team achieved this with Xamarin, which allows you to generate a web and mobile experience with a single code base. The team also used Liferay Screens, a library of mobile app components, to speed up development, as well as an integration with Firebase for notifications and session ratings.
Time Saved
With the previous process of designing events sites, it took an average of 80 days to finish a ticket. This year, it took an average of 9 days to complete tickets for LSNA. This includes the full process, from defining requirements with the stakeholder to delivering the final design. This dramatically freed up the development team’s time to work on other critical projects.
The team also reduced resources needed to complete new sites. Today, it only takes about one-third of the dev resources to create event sites when compared to last year. Much of this saved time came from eliminating the process of gathering requirements for each event. Since the components are already designed based on marketers’ needs, developers no longer have to have multiple conversations with stakeholders to understand what they want.
These results speak for themselves. “We learned a lot, but we also know that there’s room to keep growing,” said Schuhler. By focusing on improving the collaboration between marketing and development, Liferay is able to deliver better experiences for its event attendees worldwide.