The first step in this phase is to make cards for Card Sorting for user research. I went through each page of the site and made notes of items on the website. These cards will be used to find out how users categorize the items naturally to understand how to organize the information architecture. I also keep notes of duplicated content or content that isn't organized properly.

I also found similar websites of research labs at other universities to see how they are organizing their work and their design. I found four other labs and made notes on what I liked and didn’t like.

Card Sorting

Below are digital sticky notes of each item that will be used in the card sort.

These items were then written on physical note cards to be able to run the research in person more easily with multiple people. The card sort ran with my mentor (who is the head of the project), the client, and me. We were able to work together to split the cards into sections. The data we gathered allowed us to determine the categories that will be in the navigation bar. The card sort piles are shown below.

We also further discussed who our user archetypes are. The main users are the research community, policy makers, and the general public/media. Knowing this allowed us to determine the order of the navigation bar. I was able to make this information architecture diagram with the data gathered from the card sort.

User Personas

I made these three user personas to help guide our decision making so we can connect with our target audience.

Low Fidelity Wireframes

After gathering more data on our target audience and what the people at Quello envisioned, I started doing some basic design work. I prefer starting all my designs in different shades of grey and with many boxes. I find this to be the fastest while still being able to show how much space a section is taking. I started with different concepts of the home page. I kept in mind that what I created might not work in Divi so I had to make adjustments later down the road. Different hero sections and different widget designs for the news and research is where I started. Collectively we all agreed on wanting a carousel with different information on each one so users can see what the center is doing currently. These are the couple designs I created. We ended up going with the full frame third one.

The early designs of the widgets of information kept a similar style to the original style on the site. We originally kept the design until we thought that getting rid of the long description made the widget less cluttered. We also added a read more button at the bottom. We also wanted the news and research widgets to match. Some research had a length abstract so having title and date only was an easy way to keep them the same.

The next task was creating a new navigation bar. The old one had many sections that weren’t organized. With the data we got from the card sort we were able to group sections together and order the navigation in a way that highlights research and policy. This was the old navigation.

These were the designs I created to start.

The next task was to design a new people page. The main issue was that there were too many pages for people and we wanted a way to be able to filter them. We looked into having the main page be a place to have all the categories of people then users could click on which one they wanted and it would take you to a new page. We didn’t end up doing that because there weren't dozens of people in each category. We decided on having all the people on one page then a filter system at the top. This would be the same for past people which is on a different page.

High Fidelity Wireframes

It was now time to make high fidelity prototypes. I started first by getting a color palette. Since MSU colors are green and white, I based the palette off of that. I was able to get the trademark spartan greens and used that instead of the blue that was being used.

My first three prototypes I played around with the different hero sections and the style of the navigation bar. I made one with Quello having its own distinct theme and the others are based off of the navigation bar that most MSU websites have. I also implemented the top two choices of news and research widgets into both.

After meeting with Quello, we decided to continue more iterations of the first prototype. While they were with MSU they wanted to stand out. Keeping the MSU green and keeping the name in the header was the perfect amount. The next iteration was playing with the different backgrounds in the sections of the page. The different backgrounds broke up the page well and didn’t make the site look so flat. Also seeing how the headers looked with different alignment. These were some of the designs I made to match our vision.

Our last prototype for the home page before integrating it into Divi on the live site was changing the mission statement section. The old one was three lengthy paragraphs that were easy to gloss over. Even when I was first looking at the site, I didn't read the whole thing. We decided to cut it down into one sentence then add three widgets below to highlight the research, policy, and news. I made two versions for the widgets, a horizontal and a vertical one. We decided on the horizontal one as it blends better with the other horizontal widgets on the site.

Working on the people page was simpler than the home page. We knew we wanted to put all the people together. There would be two pages, one for current and one for past. The main issue was how were we going to organize them. We decided on a filter bar at the top of the page. We didn’t know if this would be easy to put into divi, it wasn’t, but we wanted to filter the people. This is what I designed.

Integrating my designs into Divi was a process. This was my first time working in this program and I had to adjust how I organize information to how it is already organized in Divi. I used Claude AI a lot to help me learn Divi. I had to make some adjustments to make things easy in Divi. The main thing on the home page is having three widgets instead of four and using the carousel that Divi has instead of trying to code the one I designed. While I could code what I want or buy plug-ins, using what Divi has to offer without making it complicated would be the easiest way someone else could also update the site that wasn't me.

The people page we decided to use anchor points that will take you to the category of people when users click on it. There also is not a great way to add in a filter in Divi without rearranging the backend and finding a plug in that will do it.

We did something similar for organizing the news. We filtered the news by year and made a filter box that will change the year depending on what the user clicks.

The last thing was implementing the theme to the rest of the site. Changing the links, colors, and symbols to MSU green was the main task. Also matching headers on the page needed to be done. After more meetings with the team and final tweaks, the Quello Center has finished its remodel.

This was a great summer project for me. I gained more experience working with clients, user research, prototyping, and implementing designs. I am really happy with the way the site turned out. It is more organized and fits better with the MSU theme. I know that the team at Quello will be able to easily update the site when needed and users are able to get to know the real Quello Center.