Masterstudies
Platform for Higher Education Institutions

Website redesign ✦ UI/UX design, UX research, Branding, Localization ✦ 1+ years  ✦  UI/UX Designer + UX Researcher  ✦  B2C/B2B ✦  Responsive website
Website redesign ✦ UI/UX design, UX research, Branding, Localization ✦ 1+ years  ✦  UI/UX Designer + UX Researcher  ✦  B2C/B2B ✦  Responsive website
Website redesign ✦ UI/UX design, UX research, Branding, Localization ✦ 1+ years  ✦  UI/UX Designer + UX Researcher  ✦  B2C/B2B ✦  Responsive website
Website redesign ✦ UI/UX design, UX research, Branding, Localization ✦ 1+ years  ✦  UI/UX Designer + UX Researcher  ✦  B2C/B2B ✦  Responsive website
Website redesign ✦ UI/UX design, UX research, Branding, Localization ✦ 1+ years  ✦  UI/UX Designer + UX Researcher  ✦  B2C/B2B ✦  Responsive website

Masterstudies.com provides marketing and software automation for higher education institutions and a comprehensive database for students. During our collaboration, our goal was to create a uniform structure and design, increase the contact form conversion rate while improving user experience by eliminating friction in the user journey, and make it work in 44 languages.

1
Discovery

At the kick-off workshops, we developed presumptive personas and outlined the customer journey.

Additionally, we collected the team's suppositions about their enterprise, rivals, clients (i.e., universities), and users (i.e., students). We requested the team to articulate their vision, mission, and values, enabling us to align the new design with their principles.

Team

• 2 UI/UX Designers
• 1 UX Researchers

Techniques

• Kick-off workshop

2
Research & Wireframing

Our researcher started with discovery interviews and Google Analytics reports for the existing website. We’ve collected more than 1300 observations to uncover the main pain points and the areas for improvement.

The research findings have been used to iterate the wireframes during the design process, improve user experience on the website, and create the ultimate design solution. We started with sketching workshops ideating multiple solutions for every page type while leaving the customer flow intact with the plan of changing one thing at a time.

Our two designers divided their work by platform type: mobile and desktop. This way, both designers could work independently while keeping up with consistency.

Team

• 2 UI/UX Designers
• 1 UX Researcher

Techniques

• Usability testing and interviews
• Design Sprints

3
Designing
Solutions

Finding the right moment to ask for data
When entering a program page, users were not likely to fill out a form immediately without checking the details to see if it’s a match for them. We repositioned the form from the top right to the bottom of the page. By explaining the service better and moving the form to the bottom of the page we made the site feel more trustworthy.

Improved filtering and search capabilities
We crafted a unique filtering system instead of usual UI patterns. Starting with the high-level categories and nesting subcategories inside.

We applied progressive disclosure to make filtering easier by showing only the disciplines (categories) first without overcomplicating with the field of study (sub-category) section. At the same time, it is also possible to custom select from multiple categories which increases flexibility for users.

Universal content structure for the program pages
After several user interviews we identified the key information students are looking for when searching for a degree. Based on this we came up with a structure and made sure every university applies it to their degree program pages, the most important page types in the conversion funnel.

Localization - Supporting 44 languages without major UI modifications
From day one we anticipated this issue and planned the interface accordingly. In the UI phase, we also tested our designs in the most complicated languages (e.g. German, Arabic, and Japanese)

4
Outcome

At the end of the project, we exported the final designs to Zeplin, a handoff tool that simplifies collaboration with developers by providing all the specs and ready-to-implement CSS. These designs included all the screens for the features we had been working on, including different states and edge cases, as well as a mobile version and a dark mode. Our designer also crafted a UI kit with clear guidelines and rules that would help Zignaly keep design consistency when developing new features in the future.

Additionally, Zignaly received a research report summarizing all the findings that could help them shape their product strategy.

“We are thrilled by UX studio’s process. They helped us identify where students drop out and discover what makes users stay longer and get more engaged. The improved user flow and UI are incredible, no details are left to change.”

Stefan Helgesson
Keystone Academic Solutions
All right