Pacific University Uses Adobe XD to Redesign its Website for a Mobile-First World
Illustration: Justin Cheong.
Applying to university can be an overwhelming experience for students. There’s a lot of information to take in — from navigating each school’s website, to understanding the admissions requirements, to worrying about the financials, and so on.
From a university’s perspective, there’s a lot of information to give — and many different types of users to serve — on a single platform. You’ve got current and prospective students at various levels, including undergraduate, graduate, and alumni, each looking for tailored information about specific studies. Academic websites like universities can contain massive amounts of information. Organizing it coherently and effectively is no easy task, especially once the websites veer towards legacy status.
When Alex Bell and her team were tasked with redesigning Pacific University’s website, the Portland designers had one thing in mind: make it easy for prospective students to use.
Arguably their most important users, Alex wanted the redesign to appeal to prospectives without detracting from the needs of other users, including students, university faculty and staff, and admissions and recruiting. The solution was a complete redesign and a new approach to information architecture that simplified their website and amplified their marketing efforts.
To bring the website’s aesthetic and functionality into the modern era, Alex and her team turned to Adobe XD.
Mobile mockups for the new Pacific U website.
Challenge: Entering the mobile-first era
“One of the problems with our old site is that it wasn’t built mobile first,” Alex said. Instead, the company that built it before had designed it with desktop in mind and then started making it responsive after the fact. When the decision was made to bring redesign in-house, building mobile-first was the obvious place to start.
The other primary goals were to modernize the aesthetic, make it more visually appealing, and improve the menu and navigation structure.
“The old site had so many menus because you’re serving so many different people. We really wanted to simplify that and just make a clear pathway for all of our users, but especially our prospective students,” Alex said. “Our prospective students could be coming to our website for the very first time, so the pathways for them have to be extremely straightforward.”
Dozens of menu items were reduced down to just five main options with academics and admissions taking priority. This is one of the features Alex is most proud of. “Especially on mobile, I feel like those came out so good. They’re so easy to read and they work so well,” she said.
This screenshot shows the old menu structure and the number of options presented to students. The new one is much simpler.
Alex’s background is in graphic design. As part of the marketing department, her work previously took on more traditional responsibilities such as developing brochures and designing digital assets. This was her first time venturing into Adobe XD, and the beginning of her new path in user experience design.
“The learning curve for me was really low because I was already working in Photoshop, Illustrator, and InDesign,” Alex said. “XD is my go-to now. I still have to do some stuff in Illustrator and Photoshop, but it all works so well together that it’s really easy to build an icon in Illustrator, for example, and then bring it into XD.”
As the design process unfolded over a period of many months, her department supported her in taking a UX class through one of the local colleges in Portland. “Even since doing our website redesign, I’ve done a kiosk design using XD for that too. I feel myself growing into UX design more and more, but it’s an organic growth.”
Collaboration and bridging the gap between design and development
Redesigning the Pacific University website was a massive undertaking. Alex worked on a team of four that included a developer, a web coordinator (who documented and collected all user and stakeholder feedback), and a communications manager who made sure the team was getting the proper buy-in and that all the school’s colleges were on board. This doesn’t include the hundreds of web editors working to update the site’s content.
The first version of the new website rolled out last summer, and it’s been continuous iteration since then, with the latest version going live this month. One of the things that the team has valued most using XD as their tool of choice is the ability to work collaboratively.
“Because we’re all on Creative Cloud, we could just make little tweaks and updates as we were going. We would have meetings where I would have it open on my computer and I’d have the three of them standing behind me and we’d be like, ‘OK, well what if it looked like this instead?’ Then I’d quickly dump a new layout on an artboard right in the meeting. It was that fast. We could just see it, make a decision, and go to the next thing,” Alex said.
The collaborative elements were not just felt internally. Working on a small team with one designer and one developer, a collaborative program like XD bridges the gap by allowing the team to quickly discuss what’s possible.
“Across campus it was really collaborative because [my colleagues] could go to a presentation with different stakeholders and walk them through our prototype. Because you could click through it, it felt so real to people and it was so much more understandable than just looking at a set of wireframes. It showed the interaction between each of the pages as opposed to just looking at static stuff,” Alex said.
This screenshot shows how searching for “nursing” pulls up a list of related programs, even though the school doesn’t offer nursing specifically.
The redesign was also about making the site more competitive, and this involved looking at user experience beyond the UI and throughout the user journey. In wanting to appeal more to prospective students, the team turned their attention to the academic search function.
“You can go to the academic search and put in nursing, for example. We don’t have a nursing degree specifically, but we have a lot of degrees related to nursing and a lot of pre-med degrees. You can put in something that we don’t necessarily have and it comes up with all these things that still could be a great fit for that prospective student, and then when you click into one of those, one of our majors or minors, we have related content fields that can show you the breadth of what we offer,” Alex said.
The team found that if students were looking for nursing on their competitors’ sites, they’re likely to look for it on Pacific’s site as well. The increased search functionality provides students with more insight into what is offered at Pacific U.
“That shows students, especially those who are interested in a liberal arts education, like yes, we have this one thing that you’re looking for, but we also have all these other things that are going to support you and help you be a really well-rounded student at our university. Even though we don’t have that specific thing, we have all these other things that can get you where you want to go careerwise.”
Biggest takeaway: UX design is an ongoing process
Since Alex comes from a more traditional background, her design process had to evolve. She’s used to making a brochure, for example, and then the brochure goes to print and that project is done. A website, she said, is more like a living, breathing thing.
“It’s always being updated, and we’re always working on what’s next and what feedback are we getting from our users that we need to address, what accessibility things do we need to be looking at. One of the biggest things I learned is it’s a continuous process,” she said.
Get Adobe XD for free
If you’re a student interested Adobe XD, you can use XD for free or get the whole Creative Cloud suite for over 60% off. For everything you need to know about getting started with Adobe XD, check out our handy guide, Back to School with Adobe XD, and if you’re just looking for some inspiration, check out these other examples of websites designed with Adobe XD.