Hi, my name is Kyle Brownlow, I am a web designer and information architect from North Vancouver, BC.
KBL Leather
Tools Used: Adobe PhotoShop CS3, HTML, CSS, PHP, SQL
WHAT I HAD TO DO: Create a website for my own leather goods company that features an online store which uses a database and CMS made from scratch. I wanted to pour as much of my own personality into the design of this site as I could. I wanted the website to express as much about me as each wallet I made.
HOW I DID IT: I knew I had to make sure that KBL Leather screamed of my own personality. I used plaid as the background, which I made from scratch using Photoshop - I wear a ton of plaid. I wanted to use a raw denim texture for the body of the site since hand made wallets and raw denim jeans go hand in hand. The navigation was styled like tags on jeans and a Polaroid treatment was used for all the photos - both of these elements were also created from scratch.
**not available online yet
Craigslist Re-Design
Tools Used: Usabilla.com, OmniGraffle Professional, Adobe PhotoShop CS3, Adobe Acrobat Pro
WHAT I HAD TO DO: Make craigslist more usable. Make craigslist visually appealing. Don’t change craigslist to much so that users won’t recognize it.
HOW I DID IT: The first thing I did was take screen shots of the actual pages of craigslist I intended to re-design. Then I put them up on Usabilla had had 14 people give me their opinions on craigslist current state. I took their suggestions along with some of my own ideas of what would work and I made wireframes. From the wireframes I was able to finesse my final design which I made in Photoshop. I then took the final design and tested it in the same way I tested the original craigslist screen shots. I put together a report to express my overall findings through the whole process.
Face Vector
Tools Used: Adobe Illustrator CS3, Adobe PhotoShop CS3
WHAT I HAD TO DO: Create a recognizable image of my own face using only black and white to identify details.
HOW I DID IT: I took an image I had of my face and processed it through PhotoShop to transfer it to greyscale and to pump up the contrast. By adjusting the image like that I was able to bring out light and dark areas and make the over all expression much more defined giving me the prefect lines to trace from. I hadn't had much experience with Illustrator previous to this, so I found it to be a great way to get to know the program.
**NOTE: this was used on the cover of the INTE Gradshow brochure that was sent out industry wide.
Richmond Vector
Tools Used: Adobe Illustrator CS3, Google Maps
WHAT I HAD TO DO: Create a large vector image of Richmond and the surrounding areas.
HOW I DID IT: First I went to the only place I knew I could find a large map online - Google! Then I took about 18 double monitor screen shots and pasted them all together. I took a ton of high resolution shots because that way I could get a ton of detail for the trace. After I had the map accurately pasted in Illustrator, I traced each area on a different layer - this way each area could easily be selected and colour adjusted depending on the purpose. This was another great pen tool exercise, but man was it tedious!
NOTE: A version of this was used in a Tourism Richmond advertisement.
APTN Heuristic Report
Tools Used: Microsoft Viso, Microsoft Excel
WHAT I HAD TO DO: Identify all current usability issues on the APTN Press website. Make a report outlining these issues so they may be presented to the client.
HOW I DID IT: I went through every single page of the APTN Press site and got familiar with the layout, the goals of the site, the content.. the usual stuff. Then I went back to the beginning - the log in - and I began to systematically identify each issue page by page, until I had gone through every page. Each issue had a ranking from 1 - 3. 1 beging cosmetic, 2 beging minor usability and 3 being a major issue. This way the client would be able to see more easily what the issue was. Along with each number came an explanation with a suggestion of how to fix it. In the final version of the document each issue was accompanied by an image for further clarity.
NOTE: This report was done while I was on my internship at (Cossette) Fjord. It was actually used by Fjord with only gramatical edits.
KBL Information Architecture
Tools Used: OmniGraffle Professional
WHAT I HAD TO DO: Plan all the pages and relationships for the online store for my leather companies website.
HOW I DID IT: Of course like every IA project I do this started as a sketched out concept in a notebook. From there I cracked open a new document in OmniGraffle and started the site map. Once I was satisfied with the structure of the website, I began to plan out each page. Again, this happen in a sketch book first. I planned out each original page in Omnigraffle so when I went into PhotoShop to start designing I would know the site would have a good foundation just like a house.
Competitive Analysis
Tools Used: Adobe PhotoShop CS3 (Should have used OmniGraffle)
WHAT I HAD TO DO: Go through 3 websites targeted at getting youth to vote in the USA. Identify what they are doing successfully and report on it.
HOW I DID IT: I took the time go to through all the major sections of all 3 websites. I then took notes of the important parts and why they were so functional. I then compiled my findings into a report with images to accompany my thoughts. When images are presented along site written thoughts the points become much more clear.
NOTE: This was for a fictional client "Voice Your Vote" which was supposed to be the canadian version of the popular US sites.
Persona
Tools Used: Adobe PhotoShop CS3 (could have used OmniGraffle Professional)
WHAT I HAD TO DO: Create both a voter and a non-voter persona for the fictional website "Voice Your Vote".
HOW I DID IT: First as a group we interviewed 20 youth between the ages of 18 - 22. Then we compiled the data to get a general view of voters to non-voters. From that data I was able to create 2 characters, both a voter and a non-voter with believable traits and actions to help us identify who specifically we were producing "Voice Your Vote" for.
NOTE: This was done in the first year of INTE at Capilano U. The class average was 40%, I received 100% for my project.
