With this project, I aimed to improve the University of Denver’s MyWeb student portal. Though the University currently uses other student websites for things like class material, I still had to revisit MyWeb recently to create an alumni email account. Its appearance and function brought to mind my use of it while I was a student, and how it could be improved. Luckily for me, my four years of use on this site just about covers the UX research otherwise necessary to redesign it.
Here are some screenshots of the current website as it appears now:
There is redundancy in the tab headers and Main Menu, and there is little hierarchy of information beyond the tabs, which can be confusing as it does not carve out a clear path when looking for a destination on the site.
Its design is minimal, which is often something to strive for. The design here, however, is minimal in some of the wrong places: the function of aspects like the header and footer dividers could be easily attained simply using white space and text grouping, and the use of colors and gradients in the title bar and tabs are distracting when the rest of the page is white.
The first step in redesigning this website was to redesign the structure of the information it would be displaying, in order to create clear and logical paths to aid in navigation. Taking a look at the old site map, here are all of the aspects the site is looking to display:
From which I created this structure:
This offered a clearer idea of what I could display at each point in the navigation process, and what I could afford to nest within a parent category.
This is a student portal, and as such, all who logon to the site are students and administrators. Speaking from four years of experience using this website, I can also say that students do not log on looking to spend an afternoon on the website. The overwhelming majority of the time, MyWeb is only accessed when a student wants to view or change academic, contact, or personal information, or to fill out or check the status of pending forms/applications.
This all means the website’s form should truly follow function. This is not an advertisement for the university (DU.edu takes care of that quite nicely). My design kept the original manila-folder metaphor for information storage, because it is a simple, familiar design element with an academic feel. Overall, I sought to make a more efficient version of a similar concept.
Desktop
Concept image background: http://mooxidesign.com/best-free-psd-mockup-templates/
The only new functionality concept in this design is the introduction of notifications whenever a section has been updated or an announcement is made. This would complement the natural admin updates by notifying the student as to the nature of the update and point them in its direction; a very easily-programmed change. The logic behind having a notification system is largely due to what the users’ intentions are when logging on to the website, and because most of the time they are seeking out a specific area to view status or get information, this can provide a call-to-action to get them started as soon as they log in.
Mockups:
Wireframes:
Mobile
Concept image background: http://www.graphicsfuel.com/2014/09/iphone-6-vector-psd-mockups
The current MyWeb site has no mobile-optimized layout nor app, so I designed one which takes the place of the microscopic mobile view currently in place:
Mockups:
Wireframes:
Watch
Though a service like MyWeb would most likely be accessed on mobile or desktop rather than smart watch, I felt designing for a watch interface could be an interesting exercise in concise design. It was challenging; there is simply no way to just scale down from the mobile display, because not only are you afforded very little screen real estate, but the interface must also reflect a different set of interactions. Smart watch devices like the Apple Watch and their apps are meant to be used quickly, and must be glanceable. Trial and error helped me to understand that one of the bottom lines with designing for such a device is to split information across multiple screens. This must be done carefully though, as navigating through too many screens will result in a greater cognitive load on the user and navigation may become convoluted. I found one mechanism for balance here to be presenting only the absolute core information of each section; too many lines of text are too hard to read, and too many clickable elements are too hard to click.
Early wireframing quickly revealed problems:
Early on, I had trouble trying to stick with the University’s brand and color as I had with the desktop and mobile displays. I ended up with a display with elements which didn’t pop, making glanceability even tougher, and it was not consistent with smart watch design frameworks, most notably, those for the Apple Watch. Some more research on watch interface apps and frameworks revealed some common themes, one of which being a black background which helps to both push the clickable elements forward, and to seamlessly blend the screen with the rest of the watch. This was often complemented by high contrast clickable elements. I abandoned the previously-used crimson shade for a red which, along with the use of depth, appears to float above the screen. This became a design theme for this display, something I think helps to blend the aforementioned screen-device boundary.
brian franceschi 