TEAM Lab UCI-Web Design
Updated: Oct 27, 2020
While my main work for the University of California Irvine (UCI) is on the mental health app review site One Mind PsyberGuide, I technically work within the TEAM lab (through which I also research psychology).
The Technology and Mental Health (TEAM) lab is directed by Dr. Stephen Schueller, whose, "research involves intertwining mental health, mental health services, and technology." Unlike most sites, a lab's is meant to display associated research, members, and accolades. Therefore, Dr. Schueller enlisted me to improve the design and functionality of his.
The site home page began with a simple white paint texture background holding the three categories shown in Image 2 and the quote shown in Image 1 pasted over a black text box. The other pages looked similar. ~I~ replaced the site with a global blue background gradient, black highlights, and gold cover text to match the colors of it's school UCI. As well, I added a transparent head given that it looked techy and they study mental health.
The left and right side of Image 2 are above and below each other respectively on the page. I edited the image for condensation as I formatted the home page with the above contents in scrolling form (under the contents of image 1). The two top photos (keyboard and phone at gym) were given parallax effects (page scrolled while pictures remain static behind), while bottom left was not and bottom right was a gradient. The category text and emoticons came faded in from the side and the staff pictures faded into view as they were all were scrolled over.
The top left background image is a keyboard for obvious software related reasons. The top right is a device tracking the results of a workout as the TEAM lab works with health technology. Bottom left background holds the image and title text from the unrelated manuscript seeing the beautiful brain today, while the cover images are the head staff of The Team. The bottom right was simply the same hex value background gradient as the the global site. Cover images, text, and emoticons were provided.
The lab site consisted of many pages which held content and were formatted similar to Image 3 though all elongated. Therefore, this photo can serve as an example of the others. The top left held a path displaying page location. The text box itself had a semi transparent background allowing the gradient to seep through and was headed by a gold crescent leading into popping white text.
I as well improved interactivity, linkage, and content of the site.