Problem Overview
Georgia Tech’s new branding forced OIT Digital Solution Group to redesign its website in the short term for fall 2021 admission. For the upcoming term, they found this as an opportunity to modernize and optimize the user experience for fall 2022.
Project Goals
We wanted to understand students' constraints when navigating the BuzzCard website to create a better user experience.
My Roles
UX Research
UX Design
Tools
Google Analytics
Figma
Figjam
Contributions
During my 12-week internship, I developed the user research strategy for the team to understand more about the website's context and value for the client and the goals and constraints of the current users.
I analyzed the current website data using Google Analytics. Also, I led feedback and evaluation session with students and stakeholders.
I collaborated with the visual design and mockups of the website as well as checked the accessibility of the prototype before the launch.
Collaborators
Jake Luebeck (UX Design)
Jeff Kim (Web Developer)
David Lacy (Product Manager)
Timeline
May 2022 - August 2022
Phase 1: Research
During the initial research, we met with the OIT's client, the Buzzcard communication team, to understand their goals for the new redesign of the website. From that conversation we identified three top research questions:
1. What are the current users' behavior through the website?
2. What are the current pain points that student face when trying to use the website?
3. What are the top tasks that students want to accomplish when using the website?
Google Analytics
Objective: Understand audiences, top pages, and behavior flow trends to help us discover opportunities for the redesign
Rationale: Google Analytics allows us to see the users' data and show us how they navigate the website from the moment they land on the homepage.
Methods: Use Google Analytics from a year worth of data
Data analysis
We use the studio report functionality to export the data and also use Excel to select top page data of:
-Audience reports
-Pageview reports
-Behavior flow
Findings
From one year worth of data, we found that the majority of the users are new visitors to the page, and use a website view. Also, the top pages were home, photo upload page, students page, dining, and merchant locations. The behavior flow showed that the majority of users tend to land on the home page and go to photo upload. On average users spent about 6 minutes on photo-upload before leaving.
This helped us to understand the current user journey. In addition, it allowed us to begin the prototype development based on the web view and top pages.
Competitive Analysis
Objective: Identify common and different features in other prestigious universities' websites such as home page hero banners, navigation tabs, and photo upload pages.
Rationale: analyze the similar features on other student card websites and compare design pros and cons
Methods:
12 different American universities' student card websites
Data analysis
We used Figjam to analyze the 12 different universities list provided by the BuzzCard client. We focused on navigation bar tabs consistency, hero banner similarities, visual design, and the information architecture of call-to-action buttons.
Findings
User feedback session
Objectives: Identify students' goals when using the website and current pain points going through the top pages.
Rationale: A task-based think-aloud feedback session allows us to understand the behavioral cues and open feedback from the user
Methods
- Remote think-aloud feedback session
- Developed three tasks and asked for feedback at the end of the session:
1. Find the photo upload page
2. Find the information about how to use your buzzcard
3. Find how to add funds to your buzzcard account
Data Analysis
We conducted the feedback session with three current and two admitted Georgia Tech students through Teams. We analyze the notes in Figjam and categorized them into "I like", "I don't like", "I wish", "I wonder (ambiguous situations)"
Findings
The majority of our participants took about a 2-minute average to find the upload button. Based on the feedback the color contrast made the button not visible and the UX Writing was "Submit Now". Also, participants wished that on all three pages there was more highlighted content, there was a lot of information that they had to read, and they prefer to skim. They also wished that the call to action as uploading photos or adding funds would be at the top of the banner for quick use.
Phase 2: Research to Design Requirements
Based on the findings from the analytics, competitive analysis, and feedback session we identified three key findings.
Based on the user feedback there was an overwhelming amount of text that did not help the users find the action buttons. Also, from the analytics behavioral flow and average time on the page, we can see that people take a long time on the top three pages this might be because they take time to absorb the information on the page.
The information on the page is important for all users, but they want a better way to read it or visualize it. Also, the information architecture of the buttons and deadlines is not in the order they currently expect such as the banner. Based on the competitive analysis, the majority of universities follow that pattern, but Georgia Tech doesn't.
Another issue that came up in the feedback session is that there's an issue with the color contrast of buttons. The majority of users did not like that the button to upload and add funds to their account was hidden in the same color background.
Design Requirements
From the key research findings, we identify four design requirements for the website redesign
Phase 3: Design
User Persona
We used the findings to develop a user persona of an incoming Georgia Tech student to help with the design process and create empathy for the user.
Prototype
I collaborated with the design lead during the brainstorming and ideation process. We focused on the top pages for Buzzcard: Online Photo Submission, Add Funds to BuzzCard, and Campus Services. I tested the mid-fidelity concepts before moving to high-fidelity. See below for hi-fi prototypes
Online Photo Submission
BuzzCard eAccounts
Campus Services
Phase 4: Design Evaluation
We evaluated our initial mid-fidelity prototype with a concept feedback session and the next iteration of the prototype with a usability test
Concept feedback session
Objectives: Receive open feedback on prototype interactions and visual design with current students
Rationale: Concept feedback allows us to get their first thoughts while looking at the visual design and new interactions on the website
Methods
- Remote think-aloud feedback session
- Figma prototype
Data Analysis
We conducted the feedback session with four current Georgia Tech students through Teams. We asked them to think aloud through the redesign screens: home page, photo-upload, user your buzzcard, and add founds. We asked followed-up questions as they went through the prototype, and used Figjam to analyze the findings.
Findings
From the analysis, we identified four common design insights. Students expressed that they would like more relevant images on the website such as students using their BuzzCard. Some of the new design features were not intuitive. For example, squared shape buttons didn't look like buttons to them. Although students like the hover interactions, they would like to see more information before clicking on the buttons.
Design Iteration
We made a few changes based on the concept feedback and got it ready for usability test before the launch
Usability Test
Objectives: Evaluate if the prototype is useful and compared the insights with the initial feedback on the current website
Rationale: Usability tests help us uncover problems before sending them for development
Methods
- Remote think-aloud feedback session
- Figma prototype
- Same three tasks and asked structured followed-up questions at the end of each
1. Find the photo upload page
2. Find the information about how to use your buzzcard
3. Find how to add funds to your buzzcard account
Data Analysis
We conducted the usability test with four current Georgia Tech students through Teams. We analyzed the data using an atomic research model.
Findings
Participants had no issues completing the tasks and rated each screen as very useful.
They were confused about the wording on the adding fund page.
They did not identify the secondary nav tab on the Use BuzzCard page.
Design Recommendations
Our usability session also helped us develop recommendations for future iterations. UX Writing was a major usability issue. For example, the hero banner button “Obtain your Buzzcard” was not discoverable as the button below "Submit photo ID". Considering using the same wording since it refers to the same page.
Also, there was confusion with the wording of eAccounts in the navigation menu as well as adding funds or managing funds. Considering using the same wording as well since it refers to the same page.
Another accessibility screener for text size and color contrast before sending it to development, participants were not able to identify the second navigation bar in using your buzzcard page since the text size was small and the gold color didn't contrast well with the white background.
Another accessibility screener for text size and color contrast before sending it to development, participants were not able to identify the second navigation bar in using your buzzcard page since the text size was small and the gold color didn't contrast well with the white background.
Impact
1. Website development and launch: because of my research and recommendations, the OIT Digital Solutions group and their main client BuzzCard decided to proceed with development for fall 2022. The website was launched on September 2022. Link to the BuzzCard website.
2. Accomplished goal of reducing time and effort: the online photo submission page average time decreased by 4 minutes after a month of launching meaning that users are able to submit their photos in a quicker and easier way.
3. Built their first research repository: I left documentation of each process we took to do the initial redesign of the BuzzCard website which has helped OIT's upcoming UX team to continue iterating the work without reinventing the wheel.
Lessons Learned
1. Adapting to client needs: client and business needs were changing as fall 2022 was coming along. During the last evaluation, we were asked to mock up content about admission events as they wanted to have different options to promote them. This made me learn to have space to adapt my user findings to other design needs.
2. Cross-functional collaboration: I was never going to accomplish this project without the help of a team of designers, web developers, and PM. I learned to communicate my findings and their importance to them in a way that also fitted within the common goal and their roles.
3. Feedback is key: throughout my internship, I received weekly feedback from stakeholders, designers, developers, and managers. This helped me to understand different business perspectives and ideate on the research strategies and the prototype.
