DESIGN CHALLENGE
Redesign the home-screen and any other 2 pages of eLearning mobile website used by University of Texas at Dallas- University students as a medium of learning.

Stage 1:


  • To empathize with users i.e to understand their mentality and background.
  • The need to understand the domain knowledge and technological aspects of the product such as here, it is websites used by universities for learning aspects for students.
  • The need to understand, its pros and cons and to get an idea of how it is handled to make changes in the existing design. 

Pre-research:​

  • Conducted competitive analysis of various platforms used by different universities in US. Noted the pros and cons of features and compared it with e-learning platform.
  • Noted the features that were feasible to add in future designs.
 
  • Conducted  a pilot study where I asked a generalized user to interact with all aspects of the application it helps analyzing how students interact with the entire website. 

  • Findings Highlight:
  • The main screen of the page was clattered with unnecessary apps that were not used by majority of students.​
  • Homepage screen was clattered with unnecessary apps and most students only accessed courses and announcements while viewing the mobile view. 
  • User never interacted with the customization button or the add module button. When nudged she mentioned she never glanced at it. The design of the button at the top left corner, with similar colors of the background made it camouflage with the background.

User Research:

The pre-research helped finalize different research methods to implement.

Storyboarding

  1. The pilot study also helped recognizing that students avoided using elearning on mobile devices as the website was not mobile platform friendly. Pilot user mentioned she only used elearning on mobile when she cant access her laptop. Thus, I decided to create a journey map of a student’s working day on campus and noted different timings when he accessed elearning on mobile website.

Based on user interviews I was able to deduce a day in UTD where students connect to eLearning.
  • Most international students who commute via the 883 Comet Bus use this time to check up on their announcements or last minute submissions in the bus. 
  • During lunch time students have mobile phones accessible easily thus they use it simultaneously if they have any pending work or checking to do.
  • Students use elearning while walking around in the campus. For example if a student is walking from one class to other and he needs to check the room number of the next class he simply checks it on his phone via accessing elearning my courses tab.
  • Students who have on campus jobs they also use elearning on their jobs usually when the work is small and needs to be done swiftly.
  • In classes, students check on elearning on their phones and tablets or laptops.
  • At night usually elearning is used by students to submit assignments.
User Personas

  1. Me being a UTD student, based on my prior knowledge of different types of students I created user personas based on different user types of students which were a combination of different attributes. 

A) Male student: Grad, ITM Major, Local, TA job on-campus, Commutes via on car.
B) Female student: Undergrad, CS Major, International, no on-campus, Commutes via 883 bus.
​
User Types:
  • ​Primary users were students and secondary users were students with an on-campus job
  • Grad/Undergrad: Changes in elearning
  • Local/international: ​The style of using elearning is different
  • Commute to the campus: Public transport/personal vehicle 

User Interviews


  1. User interviews showed that students avoided email page to send emails as it did not resemble a standard email page, besides that on mobile screen the indentation varied from the website and hindered from students to send email via mobile.
  2. In all the conducted user interviews, including pilot user interview I found out nobody used the customization button or the add module button. ​

user1_remote_interview_audio.m4a
File Size: 6666 kb
File Type: m4a
Download File

New knowledge found from the first set of user interviews:


 a) ADD MODULES:
That was a critical component of the research as that showed most students are unaware that they can customize their elearning page according to their wish, they could change colors, fonts and add or remove modules according to their usage.
This helped me finalize the first page of redesigning: the add module page, as its design change would directly affect a design change of the home-screen as well. Second page finalized was email page.

b) HOMESCREEN:
The first set of user interviews showed me additional course list in 1 male student who was a TA and he had different courses as a student and ones he was a TA of. I found out that elearning homepage was different for different users. 


​Second set of user interviews:

Tasks

HOMESCREEN

Contextual Survey


  • The first set of user interviews showed me additional course list in 1 male student who was a TA and he had different courses as a student and ones he was a TA of.  I found out that elearning homepage was different for different users.
  • I needed to view all the other designs of elearning and how they varied.  for example. It varied for students who worked as a TA on campus from a regular student.
  • Thus, I conducted a contextual survey by sending a google form to various social media websites such as whatsapp, group me, facebook used by UTD students and asked them to feed their basic details along with their screenshot of their elearning website

We also gathered information that the elearning varies for the students who are Teaching Assistants or for some of them who work on campus for course related jobs. Thus to further understand the design of their versions of eLearning I conducted a contextual survey via google forms and sent it to friends who were teaching assistants. Also, I posted it on several UTD groups.
The link for the following is:
https://docs.google.com/forms/d/1vil2JK77ErApFgbZO4WJ1mN1f7kBKd_mNinK9HbMCdg/edit

The message for the following looked like this
The questions asked for contextual survey were via google forms:
Picture
OUTPUT:

ADD MODULE PAGE

1. Customize my elearning


I asked the user to access customization button, I asked them to change the color, fonts of their choice and add or remove modules of their choice from the homepage. When she changed the layout of the homescreen according to her wish of color combination and removed apps that made the layout look clattered she found using elearning on mobile much easier. After conducting the user study of whether you would use elearning before and after the layout changes about 75% of users changed their answer from no to yes

2. Cardsorting Exercise


  1. I conducted a moderated cardsorting exercise to check which modules are used by users from a range of most frequently- never use. This helped eliminating unwanted applications from the homescreen page and the add module page
  2. To make a more generalized design layout of a student irrespective of being a part-time student, working student, international etc. ​To design an application inside the layout which students considered as part of their own profile. Thus, I added the “My profile” card which acted as a hierarchical card where users added the modules which they wanted in their profile.​

Based on the pilot participants interview it was found that, users never noticed the customization option as the options included unnecessary, non-crucial modules. For finalizing on the essential and necessary modules a part of user interview was the cardsorting exercise. Where using the Optimalsort.com website I asked them to open a created project and sort the cards based on preferences.
(please refer the audio for further clarifications)

Follow the link to view the cardsorting survey:
https://3pn6x37x.optimalworkshop.com/optimalsort/n8051262-0

RESULTS OF CARDSORTING
Picture
Understanding the Problem

Based on user research conducted, highlighted some of the key pain points faced by students, their needs and goals to incorporate onto future designs.

Needs and Problems
​ Needs
​Pain points
Courses utilization
Not mobile friendly
To-do lists
Inconsistent and uncluttered homepage.
Announcements
 Information overloaded on the home-screen. Reduces focus from important CTAs
Use of appropriate modules based on part time jobs or other involvements as a student
"My elearning page" had no personal information of the student
​Adding or removing unnecessary modules from module page to avoid confusing the student users
Students unaware of customization page
Modern Look to the redesigned website
​Email page not being used frequently, not mobile friendly, confusing UI and it consisted unnecessary buttons

​Website Goals

Creating a mobile friendly UI.
​User friendly navigation.
Customized pages based on user needs.
Modern and clean look of the website.​

Step 2: 


To find different modern looks: which made those websites look more appealing. To add a modern appealing modern look  I decided to look for design inspirations on Dribble and Behance.  While looking for design inspirations on dribble I loved the idea of having a slide window.

I found a simpler way to prepare a design where elearning would not differentiate based on different jobs and thus have a common design layout for all.

I thought the idea of having a sliding window would add a more “my elearning” aspect to the page.

Exploring Solutions
Design Workshops
Mockups & Sketches:
Homescreen:
Design Decisions Taken:
Problems
Design Solutions
No specific student details section present
Sliding Panel: Added a sliding window to the mainscreen consisting student details section. This did not add any extra space on the homescreen and also improved the design aesthetics
Too many unnecessary apps on the main screen
1. Conducted survey to list the least used apps and removed them. Several similar apps were gathered and categorized into  organization, tools and to-do. 
2. These apps were removed from the homescreen and added in the sliding window.
3. ​To grab user's attention, to the most frequent used section: My courses, was highlighted as second and in the middle of the homescreen.
​
Page customization based on student preference and choices
1. Customization button was placed in the topmost right corner of the sliding window and highlighted by bright orange color.
2. Add module button allowed adding and subtracting the apps/sections the student needs on the mainscreen. It was highlighted as third most seniority ranking.
  • User interviews showed that students were unaware that they can customize their own screens.
  • It was found that the Customize button: used to change the color of the screen and add other accessories, and Add module button: used to add or subtract various modules on the homescreen,  were not visible to most students due to its location, size and the fact that its color blended with the color of the background.
Brand value
The website was designed in UTD Colors: Green, Orange, White
Website was not mobile friendly
Apps were designed and positioned in a way to make it more mobile friendly
Students confused due to two announcement sections: Main and subject related
Announcement section was combined and added at the top of the homescreen so that students will not miss any important announcements
Part-time students, working students and regular students all had the same view though had different uses for elearning
Modified the designs for individual students based on their type .
Email Page:
Design Decisions Taken:
Problems
Design Solutions
Increase the awareness and use of email page
Changed the design layout of email page to traditional email page that everyone As opposed to earlier design of email layout which was unique and different from original
While choosing names in an email it was a complicated process of selecting and transferring the name to send option one by one. It was especially confusing in mobile view and almost impossible to send an email through without one or two tries
Separated the list of names and classified them separately as students, teachers and teachers assistant to avoid confusion completely. It was also mentioned under each name if the person is student, teacher or teaching assistant so that it could be recognized and selected in one glance.
Sending separate group e-mails was not possible
Added a separate "groups" page which showed contacts and names of students in various groups
Add Module Page:
Design Decisions Taken:
Needs
Design Changes
The list of modules was never ending of 7-8 pages which was rarely touched by students
Grouped similar modules together and categorized that into a vertical column. After selecting each category a drop box with the list of modules was displayed which could be selected 
Most modules were not used and due to number of modules the necessary ones were also overlooked at.
Deleted rarely used modules and grouped mostly used modules into favorites category
FINAL DESIGN CHANGES
HI-Fidelity Prototypes and Wireframing:
ORIGINAL SCREEN
REDESIGNED HOMESCREEN
Picture
A NORMAL STUDENT'S POV
Picture
FROM TA, ON-CAMPUS JOBS POV
ORIGINAL EMAIL PAGE
REDESIGN OF EMAIL PAGE
ORIGINAL ADD MODULE PAGE
REDESIGN OF ADD MODULE PAGE

USABILITY TESTING:

Picture

Suggestions:

  • Add night mode.
  • Further reduce the number of modules and categorize on different school related areas


Usability Testing Reviews
The percentage time it saved students to submit assignments:
Percentage increase in the use of email page as an internal chatting portal:
The percentage rate of ease of submitting assignments was increased by:
Students were excited to have a sliding panel in the homescreen
Feedback from Judges (Senior User Designers) at Capital One:
  • User research encompassed a lot of different types of users/scenarios
  • Liked the triangulation of different research methods
  • Did a really good job of understanding your user and why a mobile platform would be the best way to address their needs
  • Liked that you were able to generate specific areas of improvement from the research
  • Enjoyed the storyboarding of your users typical day