Redesign
Context
In Fall 2018, I took a UI/UX course. I redesigned Brown University's Listserv site by first constructing a wireframed low-fidelity version, then creating a high-fidelity version, and finally constructing a responsive web demo using html/css and javascript -- with the goal of improving its design significantly.
​
Brown University’s Listserv is a website that allows student organizations to manage the students on their mailing list, and allows students to find “listservs” they may be interested in. It uses virtually no graphics, but is heavily menu based. The following is a screenshot of the homepage:
Usability Redesign
The following are five redesigned pages from the Brown Listserv site and a representation of the navigation flow:
The following is an evaluation of usability criteria for both the original and redesigned Brown Listservs:
Visual Redesign
The visual design choices made recent messages the primary focus of the page — this is because I have found that the reason to visit a page is primarily to view recent emails in a condensed environment. Additionally, navigation flow was simplified significantly; in order to reach the settings for a page, one simply presses the cog next to the team name (which utilizes affordances associated with cogs and settings).
The user can also jump to the homepage (taking advantage of a house symbol for affordances), other owned lists, their joined lists, or their account settings from this page, which is maintained functionality. In the original, the archive list is directly below latest messages, which has been removed, as the search function is easier to learn (and removes the need to remember dates). The background for the header is identical to the Courses@Brown page, to offer consistency between sites used by students, while the background for the main body is a gradient from white to silver, so as to be more visually aesthetic. Finally, each box has a slight drop shadow, so as to be more three dimensional.
Responsive Redesign
For 4k to tablet differences, all text on the screen will essentially always scale with the viewport, so as to maximize resizability and allow the user to move between device size easily. Additionally, the list logo and title become skinnier and smaller while maintaining proximity to other elements, while the header & home logo scale in proportion to the size of the window. The menu decreases in pixel spacing between the left and right sides, but at the same ratio; this allows the tablet user (who expects a larger viewport than a mobile user) to view more of the page at once while maintaining design.
For tablet to small phone screen sizes, all elements will shift into one column, in the order of [header, menus, search menu, title, logo, latest messages] from top to bottom. They will all be centered and have identical margins. The menu box will include a new “Home” label, as the home logo will be removed for simplicity. The reasoning for the changes is that, in order to simplify the overlay for a mobile user, it is easiest to consume as a single column, and better mirrors similar sites like Courses@Brown.
Below is the annotated redesign.
Conclusion / Takeaways
From doing this redesign, I gained deep respect for web developers who create clean, responsive sites. Making sure that each element scales properly and looks great on each device type takes a lot of thought and foresight.
​
From this project, I figured out:
​
1.) How to wireframe and develop lo-fi prototypes.
​
2.) How to convert a wireframe to a hi-fi design.
​
3.) How to create a responsive website using html/css and javascript.
​
4.) How to consider each element on a website and how they will scale up/down.
​
Additionally, I realized the importance of user testing for design validation. I can talk for hours about heuristics or psychological reasoning for why an overlay may be great, but what happens when an actual user is exposed to it? In fact, I later did a project on A/B Testing and User Testing -- click here to view it!
​
I would love to work on redesigns in the future to improve my skills and learn even more tricks and methods of creating a responsive site!