BANSARI SHAH
CSUEB Multimedia dept. website redesign
Mockup Image Credits: www.anthonyboyd.graphics
multimedia.csueastbay.edu is a website for the Multimedia department of California State University, East Bay and it is accountable to give information about the Master's program in Multimedia Major.
This Redesign project was made with the aim of not only helping students find the aspects and prospects of Interaction Design discipline easily but also allow them to run through the whole application process easier.
Project duration: 2 months
Project Type: Group
My Role: (UX Designer & Visual Designer)
User Research
Ideation
Visual Design
Wireframing
Prototyping
Research Question
How might we develop and design a more
user-centered experience for users to easily
navigate within CSUEB’s Multimedia Graduate
program website?
Wow, too much information!
But where should I start?
User Profile
Who
What
When & Where
Why
-
Our target audience will be the people who generally completed their University Diploma, and interested in pursuing the Interaction Design.
-
People age from 18-50 whether having interaction design knowledge and or not.
-
People who have got experience in the computer industry, digital media, multimedia discipline, or Information designing.
-
Multimedia Master Program Website. It gives comprehensive information about the requirements and benefits of this Interaction Design Master Program.
-
Anytime can be accessed with the internet on any smart devices while looking for a master's program. Most likely as a result of seeing programs in interaction design.
-
This website is online. It can be visited by smart devices with the internet required.
-
It can be found in the list of schools or programs related to Interaction Design or Multimedia majors in blogs or educational websites.
-
The audience is curious about the Master Program in Interactive Design at Cal State East Bay University and is curious about the requirements or costs or even the course roadmap.
-
This website can be a great source to find out the future scope of the Multimedia or Interaction Design program.
Design Criteria
The main design principles we aim to focus on is the layout, contrast, color, and content. As a team, we decided that these were the main design principles that we wanted to focus on because these stood out to us the most of what could use improvements.
-
Easier Navigation: Create a more efficient layout where users will not be overwhelmed with information on a page. As a result, the bounce rate can be decreased and users will be more engaged within the site. Our focus is to develop a design where users can easily access certain information they are looking for.
-
Creating Contrast: Develop a design where information, images, and text are placed next to corresponding information. Nothing should clash with each other and information is placed with thought rather than placing information just to place them. Our focus for this principle is to make sure we develop a design element where everything is in the “right” place.
-
Make it meaningful: Design a website that uses specific colors to tell the story of what we are trying to communicate to users which is specifically the Multimedia Graduate Art Program. We want to focus on choosing what colors would work with each other while also using the right colors to tell our story.
-
Make it informative: Include content on the website with the purpose of giving the context of proper information instead of dead links so that users will get the awareness of what the program is offering, what is the upshot of the program, what previous students have done in the program.
Success Metrics
Increase:
-
Traffic - Prospective Students: The focus is to increase the number of students that apply to the Multimedia program or students who are interested and use the contact page to contact the art department for more information; making sure to gain an influx of new users as well as existing users.
Decrease:
-
Bounce Rate: The rate at which people or users leave the site after only visiting one page; we want to decrease the number of users who leave the Multimedia site after just visiting one page without viewing other pages. (We can reduce the bounce rate by keeping users more engaged by using more visuals, less text, proper categorization, and making the site more interactive.)
Deliverables
Objective: To increase website users.
KPI: Users Growth KPI.
Definition of the KPI:
-
To encourage users to visit the website and reduce the bounce rate
-
Achieving this target will allow the department to have more students for the Master’s program
-
Progress will be measured as an increase in the number of users and a decrease in bounce rate
-
By providing the required information, by engaging existing users to explore more website
-
A project supervisor is responsible for this metric
-
Users to visit the website will be increased from the total number of 154 and bounce rate will be decreased from 65.7% to 30%
-
Progress Will be reviewed on a weekly basis
Iteration Process
Discover
Define
Design
Prototype
User Interviews
User Personas
Empathy Map
Google Analytics
Heuristic Evaluation
Initial Brainstorming
Short-hand notations
Flow charts
Task Flows
Low-fidelity wireframes
High-fidelity
prototype
Discover
User Interviews
The first step was user interviews as different users were the key to find out the use of the website and the pain points of the website. As a member of a team, I did user interviews with different types of users of the website.
Existing students of the program
The students who are looking for a program
(Types of Users for interviews)
Parents who are looking for a program for their child
Define
We created User Personas, Empathy map, User Journey map to summarize the feedback and pain points of pet adoption from the user interviews.
User Personas
(User Personas)
User Journey Map
(User Journey maps)
Google Analytics
Google Analytics helped to get information about the number of different kinds of users and the medium to be used to explore the website. We also understood the reasons for a bounce rate and sudden dropoffs.
Who visited. the site in last six months (August 2018- January 2019)
The total number of users:1624
New users: 1587(82.8%)
Returning users: 389(17.2%)
Age
Maximum users: 25-34 years and 18-24 years
Maximum use of a device to visit the website: iPhone
Maximum visits:
homepage > admission page > apply page
Maximum drop-offs:
apply page > admission page > homepage
Heuristic Evaluation
Heuristic evaluation is an easy to use usability engineering method designed by Jakob Nielsen in 1994 to find usability problems in user interface designs.
All the members of the team finalized the scale of 1 to 4, where 1 is the most severe problem and 4 is the most satisfying finding.
With the help of this scale, we performed an individual analysis of each of the ten heuristics and tracked the adherence and violations of each.
After discovering the findings having 2 or less than 2 scales, we figured out the solutions from exiting sources which could be incorporated in our solution
Heuristics Used:
-
FEEDBACK: Visibility of system status
-
METAPHOR: Match between system and the real world
-
NAVIGATION: User control and freedom
-
CONSISTENCY: Consistency and standards
-
PREVENTION: Error prevention
-
MEMORY: Recognition rather than recall
-
EFFICIENCY: Flexibility and efficiency of use
-
DESIGN: Aesthetic and minimalist design
-
RECOVERY: Help users recognize, diagnose, and recover from errors
-
HELP: Help and documentation
Success Goals
-
Minimize the content on the pages to avoid scrolling and reduce the Bounce rate
-
Make application and document submission process easy and user friendly
Design
Keeping two purposes in focus first, we all came up with different solutions, and then we tried to incorporate maximum possible solutions in one using user notations, flow charts & task-flows.
Initial Brainstorming
(Initial Brainstorming)
Short-hand notations
(Short-hand notations of the flows)
Flow-charts
(Lucid Flow charts)
Task-flows
(User Task Flow: To apply for the Multimedia Program)
.png)
(User Task Flow : To see the overview of Multimedia program)
Low-fidelity wireframe
(Wireframes)
Prototype
High-fidelity Prototype
(High-fidelity Prototype)
Design Decisions for
Success Goals
To achieve our success goals, we took a few design decisions which help in solving the users' problems.
Goal 1:
Minimize the content on the pages to avoid scrolling and reduce the Bounce rate.
User engagement to the website is a very important thing. Unnecessary scrolling on the page disturbs the user to find out the particular details.
Homepage
So, we have listed the different categories on the page which can serve the respected content to the user once the user clicks on it.
Discover page
In this way, the user doesn't have to scroll the whole page to find out the details.
Categorization to reduce scrolling and bounce rate
Goal 2:
Make application and document submission
process easy and user friendly
The students who wanted to apply for the program faced difficulty while completing the university as well as department application with necessary documents. So, we suggested an approach in which the students can apply for the program with necessary documents.
The students can also apply without the required documents in the first place. Then, they can upload documents later. By doing this the students will not have to worry about preparing the documents to apply for the program before the deadline.
This way, the students can apply before the deadline and upload documents later.
Future Scope
-
Due to the time constraint, we focused on the two important goals while redesigning the website. For the future, we are aiming to focus on other important pain points to make the user experience better for website users.
-
For now, the main focus was on the desktop version. But the mobile version will be considered as a priority for further progress.
