Redesigning a Website
Last Spring I redesigned a website for a non-profit organization. Unlike my other article Working With a Team, I did not actually work with a client from the organization. This website redesign was simply meant as practice and was not done with a group. I went through a different process of redesigning the website than with my other project and I received feedback from my peers on multiple stages of the redesign. Overall it was a beneficial experience and it led to a greater understanding of the process of website design.
For my website redesign I chose the non-profit organization Assistance League of Salt Lake City. This organization runs a variety of programs that provide assistance to people in need within the community. The first step in the website redesign was to look at their current website and notate the main ideas. I created an idea map from these main ideas.
After I had created the idea map, I took an inventory of all of the website’s current pages and created a site map.
From this site map I determined which pages were the most important. I did not have enough time allotted to me for this project to do a total website redesign. I was tasked with redesigning five pages of the website. This meant designing a desktop, tablet, and mobile version of each page. I decided I would redesign the Home, About, Programs, Thrift Shop, and Membership pages. Now that I had determined the scope of the project, it was time to sketch some wireframes for each of the pages.
After I had sketched out all five of the pages, I created a digital version of each wireframe in a program called Sketch. I have found Sketch to be a wonderful tool for creating wireframes and surface comps. It also works quite well for making pattern libraries, or mood boards. I used Sketch for the majority of work on this project.
After the wireframes were created I made a working prototype with the Online program Invision. The program is quite simple and allows you to quickly make a prototype. Here is a screenshot from one of the mobile pages.
Now that the layout of the pages had been established, it was time to start thinking about the look and feel of the website. For this I created a mood board. The purpose of the mood board was to define the typography, colors, and other aspects of the site. Here is the first page of the mood board.
With the mood of the website in place I went to work creating some content for the redesigned website. This included examples of quotes, buttons, and icons.
After some fine-tuning of the content examples I organized everything into a pattern library. Here are the pages of the pattern library.
Now that I had all the ingredients in place I was able to easily turn my digital wireframes into surface comps. I knew which colors I wanted to use, what fonts I would use for each text element, and I had other elements such as icons and buttons ready to go. I modified the wireframes and created high fidelity surface comps for each page. An example of one such page is below.
Throughout the process of this website redesign there were many rounds of revisions. These revisions were based off of feedback from both my peers and my professor. During this project I learned a lot about the steps to redesigning a website. I was also able to practice using Sketch quite a bit. I now feel very comfortable using Sketch to assist with designing a website. This project provided another opportunity to learn a process of designing a website. I found that redesigning a website was more difficult without the feedback from a client with vested interest in the website. I feel like I could have produced a better website had I been able to get a better idea for the needs of the organization and their target audience. Overall this was a great learning experience.
Russell Andlauer is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to the Digital Composition II course and is representative of the skills learned.
