Progress on KB Trainings and some more

Hi, this past week/ a little bit of last last week when the storm was happening, I mostly continued work on the KB trainings. For the design systems research KB, I fleshed out a “visual audit” subtask that the STA will use to think through the process of identifying a theme for an existing UT department then eventually apply that to add assets to the theme. The instructions can be found below. This is a subtask because eventually, this training will fit into a larger series of KB where the STA will be making a brand for a mock business.

1. Gather visual materials
   1. Gather at least five components of relevant information and assets (such as logos, mission statements, etc.) by searching through the department website
   2. Also, feel free to search through events the department has held, promotional material, or related webpages
2. Organize visual materials
   1. Create a mood board of the gathered information on Photoshop or Indesign and create a PDF of the mood board
   2. Doesn’t have to be super fancy, just make sure all elements are nicely laid out and visible 
   3. Upload to a folder in Box and Basecamp
3. Assess
   1. Additionally, share the moodboard to Basecamp and write 1-3 sentences per component on what visual/emotional/psychological takeaways you have, making sure it is clear which component you are referring to
   2. Then, write 3-4 sentences on what you believe the overarching identity of the department is
4. Translate
   1. Now that you’ve identified a theme, add to the initial mood board 4-6 visual elements that you think visually represent the theme
   2. One of these components must be a color scheme
   3. Additionally, create a typeface system that you believe represents the theme
      1. One font for headings
      2. One font for body text

I also made this decision tree chart for the file exporting KB. I made this chart on Lucidchart, but initially I drafted it with pen and paper. I think this KB will actually be more of an informational one. If it is to be combined with Sheryl’s KB on creating a package for logo design, this training will be a good thing to read through before using that training because it explains why one might be using a certain file type. For example, I did not know why we were exporting to EPS and SVG in the logo package training, but I think learning all this info gave me a greater understanding of how those file types would be used in different scenarios.

Lastly, I wrapped up the last bits and pieces of the online studio course training, which is the last priority training I had left! Here are the corresponding Canvas assets and the Design Menu that includes all the individual assets as well as a recommendation for wardrobe.

That’s it for now! On a personal note, I shaved my head last Friday night, and if you are wondering why and what my thoughts on it are so far, I will be writing something I think. I can send it to you! Also, it’s some sort of holiday in Chinese culture today so here is traditional Happy Lunar New Year song that I like. It’s not the new year though, that already passed.

Ethics Project Website Request

Part 1

For this request I got to work with Thuy, a fellow STA. We were both tasked with coming up with two solutions for the client’s situation. They wanted to change the aesthetic and functionality of two of the pages from their Ethics Project Website.

First they wanted to make this blog page: https://liberalarts.utexas.edu/ethicsproject/blog/index.php look like this one: https://knightcenter.utexas.edu/blog/. To solve this issue I was in charge of designing the solution, but we agreed to use the News feature from the COLA web editor to change their blog. This is what I made: https://liberalarts.utexas.edu/sta-12/news/index.php.

Second, they wanted to make this resources page: https://liberalarts.utexas.edu/ethicsproject/case-studies/index.php look like this https://mediaengagement.org/vertical/media-ethics/. We talked about it and we came up with two solutions, this is the part that Thuy mainly worked on. The first solution we suggested was this one: https://liberalarts.utexas.edu/sta-11/flexbox-cards-example.php. We also suggested to use something like the following, in case they lacked the coding experience to carryout Thuy’s solution: https://liberalarts.utexas.edu/caaas/faculty/books.php.

Part 2

A while after we sent the email suggesting the previous solutions, the client contacted us back…

Regarding the Blog page, they said that they liked the aesthetic of our solution, however they did not want to sacrifice the News section to turn it into a blog. So they asked for something different that would still prevail the look and functionality of what we had previously suggested. Thuy and I talked about other ways to tackle this issue. After we figured it out, she came up with this solution: https://liberalarts.utexas.edu/sta-11/ethics-blog/index.php. This way, the blog posts are all written into different pages and not saturating a single one, but they are all conveniently collected and teased in a single page.

Now, regarding the Teaching Resources page, the client liked the Flexbox Cards solution, but they don’t have coding experience. So we all kind of came to the understanding that this was not the way to go. For the table solution we suggested they liked that it ddin’t involve much HTML coding, but they were concerned about the aesthetic of it because they did not like that our suggestion had a table with such small cells. As a solution we emphasized that the table is easily editable to whatever the desired size might be and we assured the client that, as long as the pictures were all cropped to the same size, the aesthetic would not be compromised. For such purpose I made the following page as an example of this solution in action: https://liberalarts.utexas.edu/sta-12/ethics-project-website-help.php.

We sent out a new email with both of these new additions to our recommended solutions and a detailed step by step guide explaining how to create their own version of our suggestions, concluding part 2 of this request. (If needed I will eventually add a part 3)…

College Sleep Assessment 😴

I’ve been working on a questionnaire for college students that will provide custom feedback on their sleep quality. I’m building it using Qualtrics‘ survey software which offers a considerable amount of customization. I’ve been able to import various Javascript libraries and a CSS framework that have made my work much less tedious.

One Javascript library I’m using is called Chart.js which makes use of HTML5 canvas for data visualization. It’s been very helpful since I’m planning to create a multitude of different charts.

For the CSS framework, I chose to use Bulma which focuses on responsiveness. I wanted to make sure this document would fit for all devices and their screen sizes. Also, it’s exclusively a CSS framework which is definitely convenient.

Here’s a preview of the document! (Please ignore the messed up text, that’s a work in progress.. 😅)

I’ve been tasked with implementing dynamic search options, which will prune itself as you select more attributes. This makes it impossible to select a collection of attributes that isn’t even present. Right now, the implementation allows certain checkboxes to be hidden given other ones being checked. Right now, it’s a simple connection between two groups of checkboxes, but in the future mostly likely I will be running a search every time a checkbox is clicked. Then, I compile all the possible results given the current attributes and the values of checkboxes that aren’t present will be removed.

Here it is in action: