Overview:
Liferay is a “digital experience software” that conforms to a company’s individual needs. It offers a Digital Experience Platform, DXP Cloud, Commerce, and Analytics Cloud. Their Resources page is catered to prospects, featuring whitepapers, research reports, and case studies of clients including Coach, Bosch, and University of London.
This was also my main project with Liferay throughout my 3-month internship with them.
Problem statement:
Based on the data gathered from Google Analytics and Hotjar, it was found that user retention was low. Many users navigated off the page after reaching the second or third row of resources.
ROLES & RESPONSIBILITIES:
For the duration of the project, I worked alongside the Marketing Team to gain insight on how to better communicate to prospects, and with the UX team to develop the design. Under the supervision of my UX manager, I was the lead designer of this project.
scOPE & cONSTRAINTS:
The project consisted of multiple parts. I had to recreate the Resources landing page, as well as the layout of the individual resource pages.
PROCESS:
I first reviewed the design brief. It was found that the two most common filters being used were by topic and resource type. There were multiple components that I needed to design:
1. Filter
2. Resource Library Landing Page
3. Category View (For Resources, Documents, and Videos)
4. Individual Resource View
5. Thank You (for Downloading) Page
6. Gated Content
7. Cards
1. Filter
2. Resource Library Landing Page
3. Category View (For Resources, Documents, and Videos)
4. Individual Resource View
5. Thank You (for Downloading) Page
6. Gated Content
7. Cards
1. Filter
Competitive Analysis
After meetings with the Marketing team and colleagues, I discovered a new angle to look at the redesign of the resources page, which was to also view it as an online shop. I was particularly fond of how Nike and Graze created their filter.
After meetings with the Marketing team and colleagues, I discovered a new angle to look at the redesign of the resources page, which was to also view it as an online shop. I was particularly fond of how Nike and Graze created their filter.
Wireframes: Version 1
After that, I started sketching the wireframes for the desktop version. The original design had drop down menus, where users were only able to view one industry or location filter at a time. After drawing inspiration from the filters from Nike and Graze, I wanted to give users more flexibility in choosing which articles they wanted to see. Instead of the one drop down, I gave them checkboxes.
After that, I started sketching the wireframes for the desktop version. The original design had drop down menus, where users were only able to view one industry or location filter at a time. After drawing inspiration from the filters from Nike and Graze, I wanted to give users more flexibility in choosing which articles they wanted to see. Instead of the one drop down, I gave them checkboxes.
User Testing
User testing on the low fidelity prototypes: https://invis.io/5YUSF9KJHS4
Once I felt like I was at a good stopping place, I did user testing, which mostly comprised of walkthroughs. I created a list of tasks that I wanted my users to complete, then did a walkthrough with them. I had to do this step twice, since I went back to the drawing board at some point.
User testing on the low fidelity prototypes: https://invis.io/5YUSF9KJHS4
Once I felt like I was at a good stopping place, I did user testing, which mostly comprised of walkthroughs. I created a list of tasks that I wanted my users to complete, then did a walkthrough with them. I had to do this step twice, since I went back to the drawing board at some point.
User Walkthroughs
I tested their reaction when the view changed from list (document) to grid. I found that majority preferred the grid view over the list.
I tested their reaction when the view changed from list (document) to grid. I found that majority preferred the grid view over the list.
Completed the walkthrough with 9 employees from the UI team, UX team, Development, and Marketing. This was the general flow of the walkthrough:
- Where would you go to find whitepapers on "Customer Experience?"
- Go ahead and select the first document
- From there, where would you go to find case studies?
- Go ahead and select the first document.
- From there, where would you go to find all of the resources on Education?
- Do you have any suggestions?
- Was there anything that was confusing?
- Where would you go to find whitepapers on "Customer Experience?"
- Go ahead and select the first document
- From there, where would you go to find case studies?
- Go ahead and select the first document.
- From there, where would you go to find all of the resources on Education?
- Do you have any suggestions?
- Was there anything that was confusing?
Completed AB testing between the grid and list view. Majority of users preferred the grid view.
High-Fidelity
After I felt confident in my low-fis, I started working on the high-fidelity wireframes for the home page, then on the individual resource pages. It was my first time learning how to use a base grid when designing, which helped to create a clean layout.
After I felt confident in my low-fis, I started working on the high-fidelity wireframes for the home page, then on the individual resource pages. It was my first time learning how to use a base grid when designing, which helped to create a clean layout.
Having been on a 12-person design team, I was able to develop my design and get really good feedback.
I did another round of user testing
Responsive Design
Once that was done, I worked on making it responsive.
Once that was done, I worked on making it responsive.
CHALLENGES:
- The scope kept changing
- Getting too excited about designing the user interface right away
- There were different types of "documents" including whitepapers, e-books, research reports, and product info. Each type had different content from one another, but the overall layout still needed to look unique compared to Case Studies and Videos.
- Case studies were also unique to each other. There were case studies with images, no images, and with video.
- Needing to answer "does a user care more about their industry or the type of material they're reading?"
- Getting too excited about designing the user interface right away
- There were different types of "documents" including whitepapers, e-books, research reports, and product info. Each type had different content from one another, but the overall layout still needed to look unique compared to Case Studies and Videos.
- Case studies were also unique to each other. There were case studies with images, no images, and with video.
- Needing to answer "does a user care more about their industry or the type of material they're reading?"
OUTCOMES & LESSONS:
The project ended up going smoothly. I was able to finish it by my deadline. There were awesome features that we added to keep users engaged, which included a “you might be interested in” and tags on the right side of the page that helped users find more related articles to the ones that they first landed on.
I learned how to use a base grid. Our team based it off of 8px
If I had to redo the process, I would have liked to have meetings with both of my stakeholders instead of meeting with them individually. That way, I can make sure that both of them were happy with the design decisions being made. It would have also saved me time from having to recount what I had to go over what I went over with the other person.
As far as my growth as a UX designer, it was my first project outside of school, so it was a great experience overall. I had to fight some imposter syndrome. I had to fight feeling intimidated. But I’m so proud of where the project ended up, and I’m grateful for it all.
I also loved working with such great people! Here's an article I wrote about my experience with them: https://liferay.design/articles/2018/81-days-of-liferay/