Psychology Lab Template V2
Start: Mar 18th, 2023
To be Completed: N/A
Staff Guidance: Stacy
Client: All future psychology lab clients
Project Description: While there are requests from the psychology lab to update their current websites, the design team and the web dev want to develop a more efficient workflow to provide several templates for the clients to choose from. The goal of creating the template is to save time in developing “customized” websites for the lab clients. Therefore, the design should be neat to fit the common sections/contents for a research lab as well as easy to develop in WordPress. While I finished my first iteration as a designer in Figma and spent some time on WordPress, we found a long learning curve for designers to implement their designs. Therefore, we held the project for a while and decided to come back to the project during spring break. This week I worked closely with Stacy and learned the platform from him directly by seeing him implement my design in real time.
New Home Page:
By watching how Stacy coded my Figma in WordPress, there are clear weaknesses in the home page version I made before spring break: the lack of consideration of responsiveness and the exclusives on the home page pictures. For UIUX design, we are unsure about how and which devices our users use to open the page. At least, we need to ensure that the page can function well in both monitor view or mobile view. With the totally different dimensions of these devices, the placement of the blockers in my old design makes it hard to deal with the background overlay photos. Specifically, if the lab manager chooses to use the group photo, the mobile view might only have one or two people are gonna showcased on the page. For the second point, since we are building the templates, we have no control over the photo choice and focal point of the photos. If the important content is placed on the right, it might be ignored due to the overlay.
Meanwhile, I changed the header design to make the tabs more inclusive about the amount of texts allowed without balanced negative and positive space.
Old chosen design:
New Iteration:
Difficulty in implementation
Although the design is revised based on the feedback from Stacy, there are still dilemmas we met during the process. For the header, the platform doesn’t allow us to evenly distributed the sub-menu. Meanwhile, how the photo should perform while the browser is extremely wide?
https://labs.la.utexas.edu/mclab-new/
