My Role: Interaction Design, UX Research
Key Skills: UX Researcher, UX design, Visual Design
Project Team: UX Design, Visual Design
Duration: 6 Weeks
Tool: Figma, Asana, Adobe Creative Suite
Deliverable: Interactive Prototype, UI Redesign
Project Summary
Multimedia.csueastbay.edu is a website of the Multimedia Graduate Program at California State University, East Bay. It is a website that contains all the information and applications of this grad program; It introduces the course that this program offers and also includes the Admission Guidelines.
We hope to improve the website’s usability for people who are visiting this site through an iterative process of user research, ideations, prototyping, analysis, and revision.
The Problem
The multimedia program website traffic starts going low because of the uninformative website with cluttered pages. We realized that users became frustrated and leave the website because of misleading content, poor navigation, and layout.
Design Goals
The primary goals of redesigning the Multimedia website are to:
► Providing easy to navigate, informative, and efficient website based on users' needs.
► Increase the rate of the applicant and visitors (Website Traffic)
► Increase the rate of the applicant and visitors (Website Traffic)
Final Concept
Design Process
EXPLORE
We conducted heuristic evaluation, user interviews, user empathy, and user journey map on the existing website to discover user pain points and develop solutions.
Data Analytics to Track the Web Traffic
The process began by conducting data via Google Analytics to track the website traffic and to analyze in-depth detail about the visitors to the Multimedia website. The valuable and detailed information about the users helped us to find out the reasons for the bounce rate and sudden drop-offs It also helped us to shape the success strategy.
What We Discovered:
The site in the last six months (Aug 2018- Jan 2019)
The total number of users: 1635
New users: 1437 (78%)
Returning users: 236 (16.2%)
The total number of users: 1635
New users: 1437 (78%)
Returning users: 236 (16.2%)
► The main target audience is mostly 18-34 year olds, which are seeking for a career and pursuing a masters degree in multimedia.
► Majority of users visit the site on a desktop computer and Google Chrome is the primary browser people use to visit; Safari is the second
► United States appears to be the majority of users that visit the website. Second major countries appear to be India and China.
Heuristic Evaluation
We decided to evaluate the navigation system and the content of the website. The evaluation principles that we decided to focus on were Visibility, Control, Flexibility, Consistency, Error Prevention, and Aesthetic to identify usability problems in the user interface design of the Multimedia program website.
Heuristic Findings:
► There is no search bar for quick access to specific information. (Control)
► The forms on the system don't allow the user to save their progress. (Flexibility)
► The selected colors on the website don’t match the standard color code. (Match)
► Misleading assumptions of being clickable. (Visibility)
► The forms on the system don't allow the user to save their progress. (Flexibility)
► The selected colors on the website don’t match the standard color code. (Match)
► Misleading assumptions of being clickable. (Visibility)
► There is no consistency in the top menu, side navigation bar, and footer. (Consistency)
► The error page doesn’t speak in plain language, and it is not well designed. (Recover)
► Lack of information about courses and faculties. (Aesthetic)
► Broken links of former and current student projects. (Recognition)
User Research
User Interview
To get a better understanding of the website problems and users' pain point, we conducted user testing and interview to observe users' behavior and ask them questions regarding their actions while they are using the current Multimedia website to find their pain points.
Empathy Map
User expectations, thoughts, and feelings
We interviewed Jess Kaur (An undergraduate student who is interested in applying for the Multimedia graduate program) and asked her questions while she perused the site. We tried to ask questions to create a detailed empathy map about her actions and feelings, as well as the pain areas of the site that require to be corrected or mitigated.
Journey Map
Visualizing all touchpoints between a user and a product
To find out more about the website users and their motivations, we decided to interview and observe the candidate's feeling during the interview. We interviewed a graduate student in the multimedia program.
What We Observed During the User Interview:
► No feedback when users pressed the function keys
► Not enough information displayed on the screen
► Users were not able to reverse actions
► The help function is not visible
► Not enough information displayed on the screen
► Users were not able to reverse actions
► The help function is not visible
► The course description is too broad and confusing
► Lack of information about the department faculties
► Users had an issue to have access to alumni projects
► Lack of information about the department faculties
► Users had an issue to have access to alumni projects
DIFINE
Personas
Users' experience, behavior, and needs
Next, we created a Personas of the audience to refer back to when redesigning the website and to have a perspective of who we are going to design for.
The Problem
The multimedia program website traffic starts going low because of the uninformative website with cluttered pages. We realized that users became frustrated and leave the website because of misleading content, poor navigation, and layout.
Design Solutions
Based on ten heuristic evaluations and user interviews and other research, we believed the site would benefit from presenting a more flexible, consistent, and easier-to-navigate website.
What We Conducted:
► Applied consistency among all the terminologies throughout the website.
► Provided more control by adding a search option to the Navbar
► Replaced all the dead links on the website with the short summary
► Provided more information about the professors, and the alumni
► Educating users about the courses and the main focus of the program
► Provided more control by adding a search option to the Navbar
► Replaced all the dead links on the website with the short summary
► Provided more information about the professors, and the alumni
► Educating users about the courses and the main focus of the program
► Provided feedback to aware users of their next actions.
DEVELOP & DESIGN
Brainstorming the Ideas
Card Sorting
Card sorting
User Flow
low-Fi Wireframes
After brainstorming, we began putting together the wire-frames. The starker color scheme and less text make for a more visually appealing website. The menu & search bar makes navigation unobtrusive and more flexible.
High-Fi Wireframes
Iterations
Redesign the navigation system, the content, the page layout, and color scheme based on user's feedback.
Iterations Refinement
► Added related images to the website pages
► Added "Contact us" on apply page
► Changed the navbar to a more visible design
► Created a sticky menu
► Linked the logo back to the homepage
► Limited the number of items in the menu
► Added all the navigation pages to the footer as well
► Removed the 3D effects on the text for readability
► Fixed the error page language
► Added the notification page
► Added "Contact us" on apply page
► Changed the navbar to a more visible design
► Created a sticky menu
► Linked the logo back to the homepage
► Limited the number of items in the menu
► Added all the navigation pages to the footer as well
► Removed the 3D effects on the text for readability
► Fixed the error page language
► Added the notification page
Usability Testing
We did 2 user interviews and testing to find the previous website problems and 2 user testing in total to discover and revise the currently redesigned website's problems.
Based on users' Feedback we applied:
► More detailed information about the course
► Youtube video of the program on the home page
► The "FAQ" on the apply page
► The social media links on the footer
► The direct link to the university application
► Direct link to the program estimate cost and expenses
► Removed the uninformative text and broken links
► A summary of important information such as application, tuitions, and courses on the home page
► Youtube video of the program on the home page
► The "FAQ" on the apply page
► The social media links on the footer
► The direct link to the university application
► Direct link to the program estimate cost and expenses
► Removed the uninformative text and broken links
► A summary of important information such as application, tuitions, and courses on the home page
Final Prototype
We designed 6 main pages including the Home, the Apply page and its user flow, the Curriculum, the Faculty, the Student Projects, and the Events page.
Home, Curriculum, Faculty, Student Projects and Event Pages
Apply User Flow
The Result
The heuristic findings helped us to focus on the right problems and come up with the right design solutions to resolve the previous website problems and design a more usable website for the Multimedia program.
Outcomes & Lessons
► Participating in design review meetings saved us so much time by developing ideas through collaborative thinking and categorizing the design steps, priorities, and responsibilities of the team members.
► I learned how to analyze user behavior during the interviews to discover the main heuristic problems and guide the team through the right solutions to improving user concerns and pain points.
► As a UI designer, I realized that educational websites with a high load of content need to be more direct, consistent, and informative to avoid frustration and confusion. users can easily be overwhelmed by websites that have cluttered pages and are hard to navigate.
