As you have seen, the STA page looks different.

 

 

If you look at the old STA blog and the current blog, you’ll see many differences. The STA blog is used to showcase what the Student Technology Assistants were working through their time in the program. In the current STA blog, you’ll see a more organized navigation. The front page will show the STA banner of the current school year. The navigation separates the current STAs from the past STAs so students who are no longer in the program will be archived in the next school year.

 

My client and supervisor, Suloni Robertson  the STA blog to be redesigned, easy to maintain, and responsive. It was decided to move the platform of the website from Drupal to WordPress because of WordPress easy interface. I sketched out the layout and then began to create wireframes on Illustrator. I organized the boxes to show the amount of information and the kind of information that the page will contain. I wanted to get a rough look on what the website would look like.

 

Suloni wanted a page that will have the current STAs, past STAs page, a video testimonial page and a page to hold STA presentations when they present what they have done towards the end of the school year. I placed colored circles as labels to indicate which page had what kind of content.

The next step was to turn the lo-fi wireframes into an actual mockup. I wanted a clean and minimal look. This was important because people will read the content so I didn’t want a font that was hard to read. To ease readability, I slightly changed the color from black to a very dark grey, increased the line height to give the text breathing room and I chose a sans-serif font because… the old site had sans-serif text. I didn’t want to transition the site from sans-serif to serif. I wanted the blog to feel like a blog and not a textbook.

 

 

I wanted to address a couple of problems with the old STA site and create design solutions for them:

1. Unorganized navigation. The old site lacked any formal navigation so I wanted to create a navigation to make looking for content easier.
2. The website lacked a common style. What I mean is in some blog posts from the STAs, especially the older STAs (before 2009 school year), one post would have a bold title while the next post would not have bold title. There are places where the posts are written in a different color and size. I wanted a commonality between all posts. All posts would have a bold title, same font size, and equal spacing between images and centered align. This is easy to deal with in WordPress.
3. It wasn’t responsive. I knew the WordPress theme will be responsive, but I thought about how I would arrange the layout so when I create the CSS, the website would still look good on a phone or tablet.

The next challenge was to transfer data from the old site to the WordPress site. All posts and images needed to be transferred to WordPress. Information such as post date and the author also needed to be transferred. I chose to be responsible for writing a script that will transfer all that data. With the help of one of the developers, Stacy Vlasits to help me get the xml data from every post written in the old STA blog since the launch of the Drupal site. I decided to write the script in Java because I was taking an online MIT introduction to programming course during my free time. The course covered Java and I wanted to put my Java learning into use after a few weeks. I also used a Java XMLBuilder Library which made creating XML files much easier than doing it the raw Java way. I had to convert this giant XML file (26.3 MB) to a WordPress formatted XML. I used a sample WordPress XML file to use as a model so I can input the right data into the correct XML nodes. It took me the entire month of december, including the winter break, to create the script, import it to WordPress, categorize the STAs according to the school year (to help with archiving), and reassign posts that had incorrect authors or had no authors.

After importing every user, I wanted each STA to have their banner appear at the top of the page when they enter their page within the blog.

 

 

Stacy created a script that pretty much did that. I uploaded all of their banners in their profile page.  Instead of acting as a profile picture, the banner acts as a header image for each user.

The next and final challenge was to change the style of the site to match my mockup. I had never manipulated a WordPress theme before, I wanted to learn how to do that as it will help me know WordPress more.

 

 

Here is the front page that includes the STA banner of the current school year or 2015 – 2016 if you are reading this many school years later. The tricky part was to make the footer stay at the bottom. The original theme had the footer siting halfway to the bottom of the page.

 

 

Another tricky thing that I had to handle was the drop down. In the mockup, I wanted a multicolumn drop down.

I removed the idea of the image within the background because, it’s appearance was repetitive and unnecessary. The banner is on the homepage and when you click on the current STA link instead of hovering over it, the banner is there.

That was the entire process of me contributing to the redesign and coding the blog from November to early January. Here is the banner of the front page that I designed while designing the STA webpage.

For this self paced training, I created logos but I changed what I want to do with it. My goal was to create very modern, not very academic-looking logo of each department in the College of Liberal Arts. I am not done with them because there are a lot of departments but whenever I have time, I will create more.

For this project, I was assigned to design and eventually code the new STA Wiki page. The new wiki page will be in WordPress (it is currently in Drupal). The kind of design that I had in mind was to make it simple and minimal. I looked at websites like Medium, and minimalist blogs to understand their use of white space and typography.

I carefully selected the fonts because I want it to be easy to read. The simplicity also helps for maintaining the web page when more STA’s enter the program in the future. The homepage were to include the banner for the current STA’s and a small paragraph that summarizes the STA program. For the menu items, the Project Manager, Suloni Robertson wanted a navigation pop up screen to function and appear similar to the drop down menu in the college of liberal arts homepage: http://www.utexas.edu/cola/.

The left image shows the drop down menu without a testimonial from and a group image of the sta. The right image shows the drop down menu without the testimonial.

Here are the detailed images of the home page with the drop down menu. Out of all of the navigations, the current STA section is the only one without the drop down. Inside the navigation, there is a section for the past STA’s, testimonial, resources, and presentations. On the side, will include external links to the Video STA page and Audio STA page (the audio STA’s do not have their own web page so whether or not there will be a link for them is still uncertain).

Out of all of the navigations, the current STA section is the only one without the drop down. Inside the navigation, there is a section for the past STA’s, testimonial, resources, and presentations. On the side, will include external links to the Video STA page and Audio STA page (the audio STA’s do not have their own web page so whether or not there will be a link for them is still uncertain).

The next page shows what the listing of blog posts will look like. When you click on any of the links of the current STA page, it will navigate to their blog post. At the top will include their name and banner when ever they navigate around their content. The problem for the current wiki is it doesn’t truncate the posts and the entire post is presented. This explains the long scrolling when trying to reach to the bottom. Because this is WordPress, this is not a problem.

The individual blog post page. The leading or line height of the text is slightly increased (around 1.2 or 1.5 spacing). This allows for easy reading. If you notice, the color of all of the text is black. This is the same throughout the entire wiki. Pure black on pure white background makes reading small text especially in a blog harder to concentrate after awhile. For the images, the images are centered so it aligns with the banner on the top.

When you navigate to the past STA page, you’ll see a listing of the STA listed according to the most recent to the first set of STA (maybe the second set). For some of the years such as 2009 and 2010, some of STA blog pages were missing images. I have been working with Andre Leroux to find the images. We did the Wayback machine method from archive.org to retrieve some of the images but when the pages didn’t have any archive in the wayback machine, I had to go into the STA archive and dig through their folders. I managed to retrieve images this way for some of the students but some were hard to find because the students had their stuff scattered into multiple folders.

This is the knowledge page which can be found on the bottom near the area where you log in in the current wiki page. For the wiki redesign, I plan on making the list clearly defined and centered aligned. Also on the page of the current wiki, you’ll see a link called link links and you’ll see an interesting list of links curated by STAs of content that could be either inspirational or helpful to other STAs. On that page I made the styling consistent because if you notice on the current wiki, the link links are styled differently that sometimes doesn’t make sense.

The testimonial page is holds the video testimonials. The videos will be hosted on youtube. Right now the video testimonials are in three different locations (vimeo, youtube, and on a server). I wanted to choose vimeo because it has a nice interface and it is less ‘loud’ than youtube. But because Suloni wanted a playlist on the side bar of the video so when the video was playing you can click on the hamburger (that is what is called) on the top left and the playlist will slide out. I couldn’t find that option for vimeo without finding paid wordpress video playlist plugins. It made more sense to go for youtube.

This is the STA presentation page. At the end of the school year, there will be a large STA presentation. Suloni wanted page where the students can go and only present their work from that page. Instead of clicking directly to your blog pages, and scrolling around through stuff to find what you are presenting, the Presentation page will serve as a page to host only items that will be presented. The Audio and Video STAs will do the same on this page instead of navigating to an external page.

If you notice on the navigation, the STA presentations link is on a lighter gray with coming soon written next to it. This year will be the first year to have a separate presentation page since the past year’s didn’t have such a layout. But after this year, this page will be similar to the past STA section where it will be archived and arranged in a chronological order.

I plan on rearranging the page. I’m not very satisfied with the page because the white space still looks a bit off. Maybe i’ll arrange the layout when I begin coding the page.

For the global search page, each section has an icon and the category of the search result if the result belonged to a category. My job was to work on the icons. I wanted to redesign the icons in a way that is simple and flat. Of course these are web icons and there was no need to go detailed like computer desktop icons.

Each icon shows the design of the icon and their associated categories.

Detailed versions of the icons

For this assignment, I was responsible for creating a mockup for a teaser page for a new gallery opening in Jester. For the mockup, the Client, Cherise Smith wanted a clean look and feel and something similar to the WordPress Altitude Theme. In addition to the teaser page, a artist page was needed to show the works of one of the artists (Eto Otitigbe) that will be in the first exhibition. I followed the clean look that matched the teaser home page.

The artist page has a clean minimalist appearance with the white background. The font of the page (Open Sans) matches similarly to the font in the theme because it had good thin font weight for the navigation and regular font weight for the rest of the text and bold font weight for the title of the page in the top left corner.