Background
Large-scale university websites are notoriously hard to navigate, and with the younger population of users it was apparent that the switch to a mobile first design was needed. I was hired by the Texas State Undergraduate Admissions office to redesign their website with a mobile first approach.
My Role
- Content Strategy
- UX Design
- UI Design
- Prototyping
- User Testing
The Challenge
The problems were clear. How do we simplify the navigation, shorten the pages, and make it easy for first time users to get the large amount of information they need to apply, and become prepared for university life?
The Texas State Undergraduate Admission office would offer a easy to use website that is organized in a way that is quick and easy to use. Large amounts of information will be seen only if necessary. The motto was "Simple and Clean."
The Approach
With this redesign there was a lot of information to go through. Nearly everything was outdated, and there was no clear source of what was still being used, and what wasn't. The main idea was to get rid of everything we didn't need so that we could really emphasize the things that we did. Every page needed to be easy to read and organized. There is a lot of information to go through, and while signing up for college can be stressful, we wanted to minimize that stress as much as possible. I worked with senior designer Roxanne Sides who gave creative input on my work.
Project Goals
- Simplify navigation for mobile first platform
- Provide a more intuitive experience for visitors to navigate
- Provide an easier process for content owners to manage
- Reinforce the brand message for the university
- Provide a modern interface for the primary target audience of 16 to 24 year old's
70+
User Tests
100+
Page Reduction
4
Clicks to Apply
Research
We looked into many different places for research on our users. Getting to know the problems and how the solutions translated to a mobile site requires information from many sources. Here's where we looked:
Stakeholder Interviews
Talked to every department about their specific needs and pain points.
Competitive Analysis
What is the competition doing and who's doing it the best out of everyone?
User Interviews
Sitting down and talking—the existing website about its shortcomings and success.
-
Call Logs
When people can’t find what they are looking for they call in to talk to someone. We learned a lot.
-
Google Analytics
What can we emphasize and where are the drops?
-
Nielson Research
This research was a gold mine. We looked at two different reports:
Teenagers on the web
University websites
Competitive Analysis
We looked at a lot of website for inspiration for UI elements, but for our direct competition it boiled down to Texas Tech and UTSA. We looked at many aspects of how they tackled their Undergraduate admissions website.
Google Analytics
This map helped to not only create the new navigation, but also showed where people were having trouble so we could investigate further.
PERSONAS
Texas State knows who its users are because they talk to them every day. The entire office is dedicated to helping new and previous students get what they need to sign up for college. The admissions office also knows who guides students through the admissions process.
The main users are:
- Admitted Student
- High School Student
- Transfer Student
The secondary users are:
- Parents
- High School Counselor
User Interviews & Testing
We chose to do user interviews and testing on the existing website and for Illinois.edu. The reason we chose Illinois is because it best embodied the mobile first approach we were going to take, and we wanted to see what the strengths and weaknesses were on an existing website.
Test Groups:
Student Workers
NSO Freshmen Attendees
NSO Transfer Attendees
Test Subjects:
1. 2015 Admission’s Website
2. Mobile First Platform: Illinois.edu
Process and desired outcomes
- Each user was asked a series of background questions in order to establish persona type.
- Primary question: When you are using the Texas State Undergraduate Admissions website what are you trying to get done?
- A follow up questions of “Why?” was asked at five key points in order to establish user’s experience goals, life goal and eventually end goal.
- User was then asked to guide the interviewer through how they would use the website.
- Anticipated outcome expectations: determine what is working or not working, how the user feels about the website, and how they are navigating.
Results
- Interviewing users gave a better understanding of the 2015 template.
- Observations of user patterns and flows were observed and documented to help with understanding the information architecture.
- Backgrounds, wants, needs, and goals about each user was used in refinement of personas.
Key Takeaways
Would like description of classes
Likes the icons and visuals of Areas of Study
Likes all the pictures and link on the pictures
Likes all of the videos
Likes the description of degrees
Scrolls through images before reading
Doesn’t like when PDF link is not labeled
Likes the section for student type
Watched “Be a bobcat” several times
Navigation and way finding are confusing
Like the images and modern feel
Found wording confusing
Used external search for phone numbers because they are hard to find
Doesn’t know what to expect as a transfer student
Information Architecture
Previous IA
The previous information architecture was lengthy, over-saturated and hard to navigate. Roxanne Sides and I went through many rounds of organizing the information with the research at our disposal.
Current IA
There were 3 types of pages we decided to design:
Brochure: Strong emphasis on visual design with use of high-end photography, illustrations/patterns and video as storytelling elements.
Informational: Strong emphasis on requirements, procedures or transactions.
Hybrid: Combination of both. For instance, the ‘Visit’ section. Transactional (sign up for an event) but still needs a design flare.
Sketches and Wireframes
Content types are what we called elements in the GATO cms that users could insert into the page. These are things like a video, icon and text, image, text and image and so on. This is what we were designing. Pre-made custom elements that when placed on a page make a website. Obviously, this has limitations, but for a user that does not know how to code, it's magical.
Fully Functioning Prototype
Click Away!
(Does not work in Safari. Click links below prototype if you are having issues.)
Testing and Iterations
At this stage we did 2 rounds of qualitative user testing with 5 users each. We had the fortune to have access to users by just walking out of the building. We wrote up an extensive script which you can view below. There are the results of the tests:
Round 1
- Users used on page navigation more than anything else.
- Likes that the priority dates are at the top of the pages.
- User thought the secondary on page navigation were titles and not links.
- User initially confused by main navigation until they used it on other pages besides the home page. Hamburger menu obsolete?
- Tabs were slightly unclear.
- Steps were very helpful.
Changes
- Redesign tabs with larger font.
- Rely more on on-page navigation.
- Remove secondary navigation.
Round 2
- The headers weren’t specific.
- User was able to find quite a few answers before they became admitted.
- It was straight forward. Not very much navigating to find what you’re looking for.
- User would change the way to find counselors.
- User liked that it seemed to be fewer links to click on.
- Concise menu options made navigating the site easy. It prioritizes things that would be most frequently sought after if user were a student trying to attend TXST.
Changes
- Header need to be more specific.
- Re-design way to find counselors.
Hifi Designs
Our initial test went well. From this point we honed what we had based on the initial ask: Design using the Gato CMS but focus more on the User Experience and organization of the site.
After several rounds of testing, both qualitative and quantitative, we had built a website that worked well in people's hands.
Fully Functioning Prototype
Click Away!
(Does not work in Safari. Click links below prototype if you are having issues.)
Sample User Pathways
Here are some sample user flows that we tested.
Discover
The first step in any college search is to find out if it's going to be the right place to spend the coming years. Not only can you learn a lot about Texas State and what it offers, but you can sign up for a campus tour.
Discover > Visit > Campus Tours > Tours
Apply
Signing up for college can be complicated, but our aim was to make it easy. Our aim was to provide a place that not only got you to the right place but was also a resource for everything you would need in the process.
Future Students > Freshman > Step 1 > Apply
New Student Orientation
For an admitted student the next steps are to come to New Student Orientation. Each event is dependent on which category you fall into as an upcoming student. The website needed a place for students to sign up for their specific date.
Admitted > New Student Orientation > Freshman Gold > Fall
The Big Test
The prototype was over 100 screens large. We were confident, and very curious about what people were going to think about the design.
The testing went even better than we expected. We had a few issues with users being confused by the "admissions" label on the navigation, so we just decided to get rid of it. This proved to be the best decision that we could make for the navigation. "Admissions" turned into "Future Students" and "Admitted Students".
This change went from something confusing to a workhorse for users. Now instead of straying away, users were going right for these two sections and coming back again and again. Aside from this we put more links to get users to campus tours and other small links on several pages. These few small changes made all the difference in the world, and it was all thanks to testing.
By the time the project was finished the marketing department decided to take our designs and make a new template for the Undergraduate Admissions website. Our initial scope was to use the existing CMS, but they decided it needed a visual upgrade. Check out the new site in the link below.
