IRWIN STREET FINANCIAL
1
CAL POLY VIEWBOOK
2
KATIE STUART DESIGN
3
CAL POLY MOBILE APP
4
CAL POLY ADMISSIONS
5
COOL RIDE
6
KATIE STUART PORTFOLIO katieas@gmail.com
510.207.0738
300 vernon st #1, oakland, ca, 94610
Header bar provides branding and navigation as well as visual impact Rotating image slider with caption box conveys the key practices of the financial company
1
2
Call out quote is a punchy one-liner which grabs the user’s attention
3
Additional buttons below link to tertiary content
4
1
2
3
4
IRWIN STREET FINANCIAL
Design and coded in the summer of 2012, the Irwin Street Financial site is a complete overhaul of the company’s existing web presence. The new site aims to convey the California mortgage company’s secure and serene image, as well as giving users an up to date online experience. This was a solo design and coding effort, while under contract by Gravy LLC.
Header allows users to easily navigate back to more typical web layout Cal Poly logo provides continuity with “Cal Poly” look and feel even though the overall design differs from the standard template Section headers provide navigation keys Supersized image can be manipulated by the user to reveal information about the school
1
2 1 2
3
4
4
3
CAL POLY VIEWBOOK http://admissions.calpoly.edu/viewbook/
The Cal Poly viewbook serves as the first online connection between prospective students and the university. As such, it has the unique constraint of needing to adhere to Cal Poly’s existing web standards while providing an exciting and interactive space which entices users to apply to the school.
Image slides apart to reveal additional information about the selected topic In line thumbnail video link provides easy access to a more immersive web experience Menu below video provides links containing in-depth information about a variety of subtopics Clicking another header will collapse the current section and open the selected section
1
2
3
1 4
2 3 4
CAL POLY VIEWBOOK http://admissions.calpoly.edu/viewbook/
Design and user analysis was done by me, and coding was completed by a team including myself and several other members of the primarily student-based Cal Poly web design staff.
A minimalist design stacks a small header containing my name and the site’s overall navigation menu The rest of the page is given over to an image of my studio workspace
1
1 2
2
KATIE STUART DESIGN
My personal website strives to showcase my range of interests, from 3D and digital design to furniture making and travel sketching. While the site maintains a playful vibe, it must also clearly convey my point of view as a designer.
Secondary pages use a similar menu structure for intuitive navigation Upon clicking a tertiary menu item, a menu box appears which contains thumbnail links A small matrix of visual links allows the casual user to still gain an overall understanding of my body of work
1
2
1
3
2 3
My personal website was designed and coded by me, with a little help from JQuery.
KATIE STUART DESIGN
Clicking a thumbnail will pull up a high resolution full size image
1
1
KATIE STUART DESIGN
Standard graphical cues allow users to easily identify navigation menus Cal Poly logo occupies main focal point of landing page, with a vibrant image of student life Upon pressing the menu button, users are provided with a pull out menu which contains both settings and app navigation App content is displayed on the right, and when the menu is collapsed, the content occupies the entire screen for optimal user absorption
1 1
3
2 4 3 4
2
5
5
CAL POLY MOBILE APP In the app store and google play, search “Cal Poly�
The Cal Poly mobile app was an effort by the university to allow students to use their mobile devices to navigate campus life. The app contains a variety of information, from campus dining selections to admissions requirements. I worked as part of a large team which created and implement app content.
Skip to content link for accessibility for screen readers
1
Cal Poly graphic links to Cal Poly Home Page
2
Main links menu allows users to understand site organization at a glance Image Gallery auto advances as well as allowing user navigation Current news is front and center on the admissions landing page, giving users immediate access to the most up to date admissions information Social Media links allow users to directly connect with Cal Poly via their preferred social media site Video thumbnail links allow users to get an idea of individual video content
1 2
3
3 4
5
6
7
7
4
5
6
CAL POLY ADMISSIONS WEBSITE http://admissions.calpoly.edu/
In 2011, Cal Poly released a new set of web standards which dictated an overhaul of the entire online system. In the admissions department, I conducted user analysis to determine how to best apply the template to admissions’s existing site.
In-browser video player appears when user selects a video thumbnail.
1
Video provides an immersive experience to prospective student users. Minimalist java video player allows users to easily navigate video without relying on outside hosting (such as youtube) Clicking away from the screen returns users to their original page
2
3
1
2 3
CAL POLY ADMISSIONS WEBSITE http://admissions.calpoly.edu/
I then worked along with a team of Cal Poly web developers to implement the necessary changes and get the new system up and running.
Clear bread crumbs allow users to easily return to a previous page
1
Graphically bold info boxes link user to commonly desired destinations
2
Quick links menu allows prospective user to easily navigate content heavy website
3
1
2
CAL POLY ADMISSIONS WEBSITE http://admissions.calpoly.edu/
3
Main header navigation provides users with both brand image and easy site navigation
1
Main graphic clearly and quickly convey’s company service
2
Options to get a quote and book a ride from the landing page gets knowledgeable users into a car quickly Social media buttons allow users to connect with Cool Ride on Facebook and Google+ Newsletter sign up provides users with weekly deals and updates on the Cool Ride program
1
3 4
2
5
6 3
5
COOL RIDE http://www.coolride.com/
4
6
Cool Ride wanted a complete overhaul of their existing website, streamlining use and highlighting their new more professional look. This work was completed while working as a contractor for Catalytic Design.