Project: Travel Behavior & Demand Center

Project brief: The project’s brief was to design and develop a new logo and website for the TBD Center at The University of Texas at Austin, focusing on travel behavior and demand, alongside creating a new logo that encapsulates the center’s identity and mission. My goal was to provide a modern, user-friendly website that effectively communicated the center’s research, projects, and findings, along with a logo that was both compact and reflective of the center’s focus on movement and dynamism, as per the client’s preference for incorporating an arrow element similar to that in the CTR logo.

The Process: The process began with a collaborative effort between the design and development teams. My role primarily revolved around curating the website’s design and style, ensuring it aligned with the newly developed logo and the center’s branding requirements. This involved close coordination with the web development team, which focused on the technical aspects, including backend functionalities and ensuring the website’s performance and accessibility.

 

The Logo: My design process for the logo involved initial research and sketching, discussing different iterations, and making adjustments based on feedback. This iterative process, which included client consultations and refinements, resulted in a logo that was both representative of the TBD Center’s identity and visually aligned with the website’s overall design. The final logo was selected after several rounds of revisions, ensuring it met the client’s vision of being strong, compact, and dynamic, with the inclusion of an arrow within the letters to symbolize movement.

The Outcome: The outcome was a visually cohesive and functional website that not only met but exceeded the client’s expectations. The website, showcased at https://tbd.ctr.utexas.edu, effectively serves as a platform for the TBD Center to highlight its work and engage with its audience. The project was a testament to the power of collaborative teamwork and the importance of a client-centered design approach.

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:

Figma

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/

GSD Course Promo Flyers

Start: Mar 6st, 2024

To be Completed: Mar 8st, 2024

Staff Guidance: De’sha

Client:  UT German Studies Department

Project Description: Germanic Studies has requested the course posters (one portrait for print, one landscape for display) for the class German for Graduate Students in Other Departments. The class is designed to teach graduate students from other departments how to read German for their own research purposes.

Process

Since the focus of the class is to teach graduate students how to read German for their own research purposes, including German characters and syntax, I made two versions based on two directions: One is the chart that includes the basic vowel as the introduction of Germany; the other idea is to include different pieces of historical pieces that might be the first-hand resource that students might consider for their research. However, the vowel chart is sprayed on the manual and makes it less professional. Then second one is a good vibe but is limited to specific information.

Final

For the final version, I decided to change my keyword in search to “German Library” instead of “German Studies” or “Germany”. The scope of the library could convey the sense of researching and studies with broader horizons and possibilities.

 

STA Presentation

Start: Mar 7st, 2024

To be Completed: Mar 7st 2024

Staff Guidance: De’sha

Client:  Internal LAITS Project

Project Description: Edit Save the Day to match the aesthetic of the presentation poster. Make STA goofy greenscreen cut-out with photos as the add-on element for the presentation poster

Save the Day

Save the Day is the graphic that LAITS sends out STA presentation invitations on social media. Shiya made compelling graphics on the base of wristbands.

In order to make a consistent visual identity, we decided to replace the black background with the elements from the presentation poster. One example Mike gave me was the photo of Polaroid scattered on the table and suggested the overlay of photos. To make the images more vector-based, I chose five different polaroid frame styles and overlaid the STA representative colors to replace the photo inside, emphasizing the text on the wristbands. For the decoration elements, I reused the clips on the presentation poster.

Final Design

STA cutouts

The most significant challenge in the task is to adjust the skin tone under different shadows into the natural one as well as reduce the reflection of green on the light color. I’m able to use the channel filter and eye drop tools to make them works.

GSD Course Promo Flyers – UGS 302

Start: March 18, 2024

To be Completed by: March 19, 2024

Staff Guidance: De’sha

Client: Germanic Studies

Description: The germanic studies requested for a batch of course posters using the given template. The client looked for one, concise, and simple flyer that contained an image relevant to the course UGS 302 Reel Horror: The Holocaust in Hollywood Film and Beyond. They also requested a screen add and provide the template for it.

 

For this course, no images were provided so I searched in Pixabay, Unsplash, and Pexels. In the end I found one in Unsplash and used it for the creation of the flyer and screen add, while adding the necessary information.

GSD Course Promo Flyers – GER 322E

Start: March 18, 2024

To be Completed by: March 19, 2024

Staff Guidance: De’sha

Client: Germanic Studies

Description: The germanic studies requested for a batch of course posters using the given templated. The client looked for one, concise, and simple flyer that contained an image relevant to the course GER 322E CONV/COMP Society, Digital Cultures and Literatures. They also requested a screen add and provide the template for it.

 

Along with the information provided for the course, some image assets were provided as well, but I opted to look for new images in Pixabay, Unsplash, and Pexel. I found a couple, but decided on two images.

 

Using Illustrator I combined both images as if they were blending together and created the flyer and screen ad for GER 322E.

 

GSD Course Promo Flyers – GER 397P

Start: March 18, 2024

To be Completed by: March 19, 2024

Staff Guidance: De’sha

Client: Germanic Studies

Description: The germanic studies requested for a batch of course posters using the given templated. The client wanted one, concise, and simple flyer that contained an image relevant to the course GER 397P  Replication in Applied Linguistics, some assets were provided. They also requested a screen add and provide the template for it.

 

Using the given templates, I started creating the first iteration of flyers with the given information and images. However, one problem I ran into was that the information was too long and left little to no space which lead the decrease in the title’s font size.

 

For the final iteration, I cut out some text and kept the most descriptive part that still gave ample information about the course and created the flyer and screen ad.