top of page

Design Challenge

User Research

Process

Initial brainstorming
short_hand_notation-for stduent-looking
short-hand-notation-student-apply.jpg
Short-hand notations of the flows

Redesigning

multimedia.csueastbay.edu

Vision

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. It focuses not only on the aspects and prospects of  Interaction Design discipline but also helps users to run through the whole application process.

Design Challenge

The design challenge of this project was to develop and design a more user-centered experience for users to easily navigate within CSUEB’s Multimedia Graduate program website.

Team

Jinthana, Jing, Bansari, Jonathan

My Role

User research, Heuristic Evaluation, UX Design, Wireframing & Prototype

Screen Shot 2019-04-14 at 2.05.41 AM.png

User Profile

Who: 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.

 

What: Multimedia Master Program Website. It gives comprehensive information about the requirements and benefits of this Interactive Design Master Program.

 

When: 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.

 

Where: 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 major in blogs or educational websites. 


Why: 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 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

UX Deliverables

User Research

Screen Shot 2019-04-20 at 2.43.38 AM.png

The user research process was divided into four steps.

Screen Shot 2019-04-20 at 2.43.55 AM.png
  • 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 of different types of users of the website.

Screen Shot 2019-04-20 at 2.44.10 AM.png
  • The second step consisted of personas and user journey map creation according to the responses given by the users. I created the user journey map, personas according to the feedback of the various users.

Screen Shot 2019-04-21 at 6.40.14 PM.png
Screen Shot 2019-04-21 at 7.38.47 PM.png
Screen Shot 2019-04-21 at 8.19.25 PM_edi
Screen Shot 2019-04-21 at 7.40.03 PM.png
  • The third step was very important as it was specifically dedicated to google analytics analysis of the website using different constraints. I went through the analysis of Google Analytics to get information about the amount of different kind of users and the medium to be used to explore the website. Google analytics helped me to understand the reasons for a bounce rate and sudden dropoffs. 

Screen Shot 2019-04-21 at 8.25.06 PM_edi
Screen Shot 2019-04-21 at 8.22.25 PM.png
Screen Shot 2019-04-21 at 8.27.32 PM_edi
Screen Shot 2019-04-21 at 8.23.27 PM_edi

  • The last step included the Heuristic evaluation of the website according to an easy­ to ­use usability engineering method designed by Jakob Nielsen in 1994 to find usability problems in user interface designs.

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

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 individual analysis of each of the ten heuristics and tracked the adherence and violations of each.

 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

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.

Goals

Screen Shot 2019-04-21 at 8.29.56 PM_edi
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)
Screen Shot 2019-04-21 at 9.00.29 PM.png

Flow-charts

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

Task-flow

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 wireframes

Screen Shot 2019-04-21 at 11.57.03 PM_ed
Screen Shot 2019-04-21 at 11.57.21 PM.pn
Screen Shot 2019-04-21 at 11.57.34 PM.pn
Screen Shot 2019-04-21 at 11.57.47 PM.pn
Screen Shot 2019-04-22 at 12.17.07 AM.pn
Screen Shot 2019-04-22 at 12.12.57 AM.pn
Screen Shot 2019-04-22 at 12.13.09 AM.pn
Screen Shot 2019-04-22 at 12.13.35 AM.pn
Screen Shot 2019-04-22 at 12.13.21 AM.pn
(Low-fidelity wireframe)

To reduce the bounce rate and engage users to explore the website, we tried to minimize the text and used the maximum number of images which can be self-explanatory. 

The home page has a "Discover" button which can directly redirect users to the subcategories to know more about the university program. Moreover, the subcategories self explain their roles to the users with the images.

Hight-fidelity prototype

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

 User engagement to the website is a very important thing. Unnecessary scrolling on the page disturbs the user to find out the particular details. 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.

In this way, the user doesn't have to scroll the whole page to find out the details.

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 student can apply for the program with or without the documents in the first place. Then, he 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. They can apply before the deadline and upload documents later.

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

If the student is able to upload all the documents and submit the application then a "Submit with documents" button will be used. The notification will be given to the student on success.  

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

If the student wants to submit an application and upload documents later then he can select a "Submit and upload documents later" button. The next screen will notify the student to take next steps to complete the application. 

Screen Shot 2019-04-22 at 2.52.31 AM.png
Screen Shot 2019-04-22 at 2.52.41 AM.png

After successful submission of the pending documents, the student will get the notification of completion of the application process.

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

Previous Project

bottom of page