top of page

CSUEB Multimedia dept. website redesign

firstscreen_csuebmaredesign.png

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

   

          

Team: Jinthana Salcedo, UX Designer

           Jing Wang, Graphic Designer

           Jonathan Sjelin, User Research

Research Question

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?

Developer Woman - Colour-01.png

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

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

Process

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. 

users-01.png
users-01.png

Existing students of the program

users-01.png

The students who are looking for a program

(Types of Users for interviews)

users-01.png

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

Screen Shot 2019-04-21 at 7.38.47 PM.png
Screen Shot 2019-04-21 at 6.40.14 PM.png

(User Personas)

User Journey Map

Screen Shot 2019-04-21 at 8.19.25 PM_edi

(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

Screen Shot 2019-04-21 at 8.25.06 PM_edi
Screen Shot 2019-04-21 at 8.27.32 PM_edi
Screen Shot 2019-04-21 at 8.23.27 PM_edi

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

Screen Shot 2019-04-21 at 8.28.51 PM.png
Screen Shot 2019-04-21 at 8.28.51 PM.png

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

flow_for_student_apply_edited.jpg
ui change for second flow_edited.jpg
new doc 2019-04-08 14.06.30_1.jpg

(Initial Brainstorming)

Short-hand notations

short_hand_notation-for stduent-looking
short-hand-notation-student-apply.jpg

(Short-hand notations of the flows)

Flow-charts

Screen Shot 2019-04-21 at 9.00.29 PM.png
Screen Shot 2019-04-21 at 9.00.39 PM.png
(Lucid Flow charts)

Task-flows

Blank Diagram.png
(User Task Flow: To apply for the Multimedia Program)
Blank Diagram (1).png
(User Task Flow : To see the overview of Multimedia program)

Low-fidelity wireframe

Screen Shot 2020-06-15 at 3.12.50 AM.png
(Wireframes)

Prototype

High-fidelity Prototype

(High-fidelity Prototype)
Clickable Prototype
Design Decisions

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.

Screen Shot 2019-04-22 at 2.51.02 AM.png

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.

Screen Shot 2019-04-22 at 2.51.20 AM.png

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. 

Screen Shot 2019-04-22 at 2.52.12 AM.png
Screen Shot 2019-04-22 at 2.52.20 AM.png

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.

Screen Shot 2019-04-22 at 2.52.12 AM.png
Screen Shot 2019-04-22 at 2.52.31 AM.png
Screen Shot 2019-04-22 at 2.52.41 AM.png
Screen Shot 2019-04-22 at 2.52.47 AM.png
Future Scope

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.

bottom of page