Journey to the Redesign
My next series of projects led me to redesigning a non-profit website in my area called Bicycle Collective, but I needed to learn the basics before I could take on a task that large.
I began at the very beginning with weeks of playing with the elements of graphic design: Space, Lines, Typography and many more.
The nice thing about doing these types of sketches is that I got to learn Adobe Illustrator inside and out. There were 6 topics in total and at least 40 individual images per topic made for 240 images, that amount of practice is exhausting but also very rewarding. I would learn as many shortcuts as I could to output that volume of work and each assignment took less and less time as I got better at visualizing what I wanted to make.
After learning the visual aspects of design I needed to learn specific design principles. I enjoyed learning why certain things are design why they are, for example each row of a keyboard is offset from the one above and below it, this follows the principle of Fitt’s Law. If you set your fingers along the middle row each finger is able to press 5 buttons at a very small distance this allows for minimal movement for multiple functions.
With the basics behind me I could apply those to simple graphic design projects. I created two sets of icons, multiple personal logo ideas, and business cards. The cards were the most exciting because they had an aspect of restraint with a set grid like a website would have, but within that grid I was free to create anything I wanted.
Finally with practical and theoretical knowledge I was ready to redesign a site on mobile, tablet and desktop displays.
I started with sketches and wireframes to flush out my ideas and visualize on a basic level the layout of my redesign. Simple wireframes allowed me to focus on the form and function of the site before worrying about the visuals that come from a full surface comp. I decided to design the mobile experience first as that is likely the first encounter a user will have with the site. I also believe that designing mobile first makes the other two layouts easier because you already know the content to put on the site and in many cases only need to enlarge the images and create separate columns of text.
The difficulty in redesigning a website, especially one for a non-profit, is finding what kind of CTA (Call To Action) should be emphasized. The Bicycle Collective didn’t have a clear direction for the visitors of their site, they had a lot of unorganized information so I assumed that the information was more important than a classic CTA. Based on this I decided to reorganize the information in a way that flowed easier, they also had a great gallery of images that were all clumped together on one page so I wanted to highlight those throughout the entire experience to give the user a clearer idea of the mission and fun at the Bicycle Collective.
After I finalized my wireframes I could work on exact content, and a color scheme, and as their logo is a simple black and green it was easy to keep to that. Any emphasis I wanted would be in green allowing the user to glance at the page and know where they are and what top things should draw their attention. I enjoyed putting myself in the user’s shoes to go through a redesign to see what is critical and what can be pushed to the background.
To finish this project I created a prototype in InVision for the mobile view. Here is a simple walkthrough of the final project.
Brian Talbert is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to projects in the DGM 270R I & II Courses and representative of the skills learned.
