PORTFOLIO

UATP Web Redesign

January 2017


The Utah Assistive Technology Program (UATP) is an organization based at Utah State University. Their mission is to help people with disabilities receive assistance technology, allowing them to live an independent life.

My Role

A former co-worker of mine who works with UATP has approached me on a couple occasions to help UATP upgrade their look in the past. This time, I was asked to simply design a new webpage that would have a more modern feel than the old site. While I worked for her, I was simply a graphic designer. Over the course of a year, I had merged into the web development field, focusing on the front end design and development. I had also been studying user experience design and decided that I would give her more than just a good look, but also a design that would leave the user with a better experience than before.

portfolio filler

Analysis

I had only glanced at the website briefly before I found what I felt to be a major flaw in the initial design. It was not a mobile first website. When viewed on a phone, the text was unreadably small, the pictures were cramped, and the decoration was overlapping the text. Second to the mobile responsive aspect, the navigation needed some organization. There were links that were not needed such as the “Staff Login” which was only used by the web developer. Lastly, I have to talk about aesthetics. The design looks like it was created in the early 2000s despite the website going live late 2012 or 2013.

portfolio filler

Mobile First

Using Sketch, I designed the website to fit the vanilla Twitter Bootstrap template. Although the CSS will still need some changing, this alone would make a huge improvement to the website. After all, part of UATP is using iPads and mobile devices for assistive technology. They should be able to view their own material through mobile. With Bootstrap, the navigation will be able to collapse into the hamburger menu on a phone. This is a huge improvement from a cut off side navigation from the old website. Every section in the design is pixel perfect in relation to the 12 column grid system, allowing for rearrangement of content.

portfolio filler

Design

At the request of UATP, I gladly left out the logo. It is outdated, unappealing, and hard to work with. What is more important than the graphic, is knowing what UATP stands for. I made the full name the biggest element when the home page is loaded. Then below the full name is the tagline for UATP which introduces new users to what the website is all about. The navigation is on the top bar as is standard for many websites. There is no need to be creative with this section, due to the combined reasoning between Don Norman and Steve Krug on standardization. It works, and UATP needs a website that works. One thing that I have been impressed that UATP does is keep all of the social media up to date. I felt like it would be a disservice to not put the social media links front and center, as well as on the footer of every page.

Next, the content was pretty clear and concise. I didn’t see a need to cut out any content on the front page. There are helpful buttons linking to another page if they want to read the content. Some web pages don't update news, and leave what are called “Digital Cobwebs” so I don’t normally like to include these on a homepage. However, UATP has been pretty consistent with updating news, events and social media, so I felt comfortable including a section on that. To finish up, I found in my initial analysis that there are 3 main reasons to contact UATP, so I clearly defined each section with icons/text that will link the user to the correct page in the website. This change made it move visible for the user to find information. It also cut out an unnecessary list items in the navigation.

portfolio filler

Conclusion

Because UATP works with assistive technologies, they had my initial design run through an accessibility checker, which fed back some slight color changes. Then the homepage went in for review to the ones who call the shots. Although I let them know that I was capable of building the website, I am busy working and going to school, so all I could do was a boilerplate and quick prototype for their web developer to use.

Overall, I feel like the project went very well, however I would have liked to be able to meet more people and get input from those who have used the website before. I would have liked to learn more about the accessibility culture and learn what they would expect from the UATP website. I would have also liked to talk directly to the web developer to know their skill level, and see if there was anything I could have done to make their job easier. In the end, I made my hand off, and waited to see if there was anything else they needed from me. Both UATP and myself were satisfied with my contribution.