top of page
.png)
My Role
Sole UX Designer
Duration
November 2022 - January 2023
Design Software
Adobe XD
Overview
As the Communications Director of the Michigan State Chapter of the American Institute of Graphic Arts, I am constantly looking for ways to improve the overall experience of our design community. While in my position, club members and students interested in joining have expressed a need for a platform to access club information. In response, I created a dedicated website for Michigan State AIGA that includes useful information, inspiring resources and seamless navigation.
The Problem
Current members of Michigan State AIGA and students interested in joining need a platform to access important club information and a way to reach out with questions.
The Goal
Create a dedicated website for Michigan State AIGA that includes useful club information and a way for students to reach out. In order to meet this goal, I followed the design process shown below.
The Design Process
Empathize
Define
Ideate
Prototype
Test
Empathize
The first step I took was empathizing with users. My goal during the empathize phase was to learn more about users and gain insights on their needs, desires and problems. During the empathize phase, I conducted interviews, identified user pain points, created an aggregated empathy map, developed user personas, and made a user journey map. These research findings informed my decision-making in later design phases.
Interviews
-
In order to collect valuable feedback from my interviews, I first determined clear research goals:
-
I want to understand the current user experience of how students find important club information.
-
I want to identify clear pain points in the current MSU AIGA experience and how my website will effectively address them.
-
I want to learn about any improvements participants might make to the current MSU AIGA information set-up.
-
I want to uncover what specific information/features participants want included in the website and why.
-
Keeping the goals of my research in mind, I then wrote interview questions and gathered 5 participants that met the study’s desired characteristics. A few of these characteristics included participants who are in college and interested in joining a campus club/organization, at least two members of MSU AIGA, have access to the internet, and are between the ages of 18 and 65 with diverse backgrounds & abilities. Displayed on the right are interview highlights.
"Students interested in joining our club have no way to reach out with questions and concerns."
"It'd be great to feature images of the work we create and what our club is really about."
"It's definitely important for clubs to have established websites, it keeps current and new members engaged."
"I search for upcoming meetings and events on the MSU AIGA instagram, but they're usually not up to date."
"MSU AIGA needs a central location for a schedule, design resources, and membership information."
Pain Points
From feedback gathered in interviews, I identified three important pain points.
Access
Support
Time
Users are annoyed with the amount of time it takes to find important club information.
Users are unable to access current club information located on an app that requires an account.
Users are frustrated that they do not have anywhere to reach out and ask questions.
Aggregated Empathy Map
After identifying pain points, I categorized feedback into an aggregated empathy map. I used this method to synthesize themes seen throughout the interviews and create a shared understanding of users' needs to aid in decision making.
Personas
Based on the common themes and pain points found in my data, I created user personas. Andy and Lily's goals, motivations, and frustrations represent the needs of a majority of users.
User Journey Map
Building off of user personas, I made a journey map to highlight new pain points and identify improvement opportunities. Mapping the current user journey revealed how helpful it would be for users to have a dedicated website for MSU AIGA.
Define
In the define phase, I analyzed my research findings and determined the most important user needs, desires and problems to define a clear goal for the design of the website. During the define phase, I created a clear problem statement, hypothesis statement, and value propositions.
Problem Statement
Building on one of the personas created in the empathize phase, I made a problem statement that is focused on the users' needs, broad enough for creative freedom, and narrow enough to be solved by a practical design solution:
Problem statement: Andy is a freshman at Michigan State University who wants to join MSU AIGA but is unable to because he cannot access important club information.
Hypothesis Statement
Building on the problem statement, I made a corresponding hypothesis statement that states a specific action followed by my solution that meets the users' needs and addresses pain points:
Hypothesis Statement: If Andy had access to a dedicated website that included useful club information that addressed his questions, he'd be a member of MSU AIGA in no time.
Value Propositions
I created value propositions to highlight key features to include in the website design to address the users' needs. I described my website’s features and organized them into the four qualities of a great user experience: usable, equitable, enjoyable, and useful.
Ideate
In the ideation phase, I explored design solutions t0 the problems identified in the define phase. After exploring many solutions, I decided which to pursue for prototypes. During the ideation phase, I brainstormed with crazy eights, designed the information architecture of the website, and created low-fidelity wireframes & prototypes.
Crazy Eights
In order to get ideas flowing, I used the Crazy Eights design ideation exercise I learned from the Google UX Design Professional Certificate. This exercise was a great way to generate various unique design solutions.
Information Architecture
After generating ideas, I outlined the information architecture of my website. Doing so ensured the information presented on my website was clearly organized so users have an efficient and enjoyable experience.
Low-Fidelity Wireframes
After outlining the information architecture, I drew low fidelity wireframes and built them digitally using Adobe XD. Using grid paper helped me visualize the proportions of the design and how they can change depending on the screen size.
Low-Fidelity Prototypes
After making low-fidelity wireframes in Adobe XD, I then created low-fidelity prototypes.
Prototype & Test
In the prototyping and testing phases, I went through multiple tests and iterations in order to finalize my design. During these phases, I conducted the first usability study, iterated on my low-fidelity designs, transitioned into mockups and high-fidelity prototypes, conducted a second usability study, and iterated on mockups.
First Usability Study
After prototyping my low-fidelity wireframes, I planned my first usability study. I ensured 7 key elements were included in my research plan: the project background, research goals, research questions, KPI’s, methodology, participants, and a script. You can view my research plan here. I then conducted a moderated usability study with 5 participants. I recorded participants' click paths, notable observations, quotes, and rated their task completion. Below are results from one participant, you can view all 5 here.
Insights
-
Following the first usability study, I organized my data using an affinity diagram.
.jpg)
-
Based on common themes throughout the usability study, I found four actionable insights:
Users need the home navigation button to be made obvious in mockups.
Users need an improved responsive design for the E-Board page.
Users need the option to join the mailing list to be made more obvious.
Users need a more intuitive resources page.
Low-Fidelity Iterations
-
Based on the first insight, I created a button on the home page that directs users to joining the mailing list.
-
Based on the second insight, I improved the design of the E-Board page to ensure it is readable on all screen sizes.
-
Based on the third insight, I created a drop-down menu so the design and portfolio resources have separate pages.
-
Based on the fourth insight, I ensured the home button would be usable in mockups.
Before Iterations
After Iterations
Before Iterations
After Iterations
Before Iterations
After Iterations
Mockups
After refining my designs, I built mockups. I also created a style guide to maintain consistency throughout my website.
Style Guide
High-Fidelity Prototypes
Once I finished building mockups using Adobe XD, I created high-fidelity prototypes.
Second Usability Study
After prototyping my mockups, I conducted a second usability study to understand how users would interact with the final design and iterate on any areas that needed improvement. I updated my research plan by adding a system usability scale and a more thorough script to gather stronger data. You can view my updated research plan here. I then conducted the moderated usability study with 4 new participants. Below are results from one participant, you can view all 5 here.
System Usability Scale
Following the second usability study, I sent a modified system usability scale survey to all 10 participants from both sessions.
More Insights
After the second usability study, I found three actionable insights drawn from common themes:
Users need more information displayed on the home page.
Users need the MSU AIGA email and social media platforms to be more obvious.
Users need a way to quickly navigate to the top of the page.
High-Fidelity Iterations
-
Based on the first insight, I added the about page to the home page for a more engaging experience.
-
Based on the second insight, I created a section on the contact page just for MSU AIGA social media platforms.
-
Based on the third insight, I added a "Back to Top" button to the footer to ensure easy access to the navigation bar.
Before Iterations
After Iterations
Before Iterations
After Iterations
Before Iterations
After Iterations
The Final Design
After ensuring my website was usable, equitable, enjoyable, useful, and fulfilled the intended user experience, I decided it was finished. See the key features below or interact with the website using the button!
An engaging and informative home page with seamless and accessible navigation.
A convenient schedule page with a descriptive calendar and RSVP feature.
An effective E-Board page for members to share their experiences in MSU AIGA.
An inspiring design resources page created for all designers.
A useful portfolio resources page created to help all designers succeed in building a portfolio.
A quick and easy way for users to reach out to MSU AIGA and and sign up for emails.
Reflection
What I Learned
Creating the Michigan State AIGA website taught me the importance of recognizing my mistakes and addressing them so I can grow as a UX Designer. For this project, I can point to one major learning experience which surrounds the domain I chose to host my site, Wix. Wix is limited as far as a true responsive experience. You can resize content elements on a generic mobile display, but you can’t manually set breakpoints or control how your content is sized on different screens. This is due, in part, to the viewport settings in Wix’s themes. Basically, it has a mobile and a desktop version and it switches between them. While the mobile version seems to be fully responsive, the desktop version needs some improvement. Wix’s customer support page states: “we are becoming more and more responsive”, which indicates even they know they aren’t quite there yet. In the future, I plan on using Wordpress or another fully responsive domain host for this site and other projects. Wix was the most cost-effective solution I had available to me at the time.
Next Steps
-
Transfer MSU AIGA to a new website builder: Due to ICANN regulations, it is not possible to transfer a domain within 60 days of registration. Once I am able to transfer the MSU AIGA domain, I am going to recreate the website using a fully responsive website builder.
-
New Features: I plan on adding new and improved features to the website as MSU AIGA grows. The Michigan State AIGA website launched just in time for the spring semester, so I am looking forward to hearing new ideas from members to add to the website.
bottom of page