I began the Corsair Connect mobile website process by making two lists: what is currently available on that site (a lot! vaguely named! several layers deep!) and what I would like to see on the website. I took as my inspiration both the Boston College mobile website and the Amazon mobile website. I chose to have a search bar as well as a log in and “favorites” functionality at the top of every page. If you log in, you’d be able to access not only information specific to your enrollment, but you’d also be able to create favorite shortcuts / bookmarks to sections of the site that you access frequently. Most importantly, though, is that you don’t need to log in to access the general areas of the site.
I liked Amazon’s combination of icons and a menu list. I created icons for three “quick links” that I thought would be most frequently accessed in each section. Then I created a longer list menu for other elements. This longer list would have accordian subnav. I also linked to the SMC main website if the user needs more information or broader functionality than is available on the mobile site.
Design-wise, I wanted to use the SMC colors and branding wherever possible. I wanted to keep the interface very clean, which is why I chose a white background. I also bumped up the sizes a few pixels from the recommended sizes, for those of us still with 20th-century-sized fingertips. I tried to emulate the same type of icons and button styles that you see in other smartphone design (inner shadows! gradient overlays! thin grey strokes!)
When choosing my items for the mobile website, I found Jamie’s list of “lookup/find”, “explore/play”, etc really helpful. I had the thought too late that including a link to the Corsair paper would have been smart! (We’ll pretend you scroll down the list to find it!)
This midterm project was fairly straightforward for me – the most difficult part for me was actually the design. It was a challenge to design for something I am close to, and I think (ironically) all the preparatory paperwork intimidated me a little bit in the design process (I kept thinking it should inform my design – which it did, structurally – but not so much the visual look and feel. I was overthinking it, in other words.) The design I ended up with is very different from my usual style with the big blocks of color, but I thought it was interesting, a little funky, and suited the content. The next challenge was that I fell in love with little bits and pieces of my initial design, so when I needed to make changes that was difficult, too. Luckily with all the design delays, the build was very simple. I didn’t try anything too bombastic, though I did tackle fontsquirrel and the @font-face property, which was new to me. At the last minute I incorporated the jquery slideshow, though I’m not convinced it’s serving the page well. I worry that it distracts from the written content below – every time the image changes, your eye can’t help but jump up at it. Overall, my confidence is a little shaky on this one – though the technical went well, I’m not confident that the design represents or supports the scope of what the final site will be.
1. A wireframe is a storyboard for the pages of a site, showing all the content that appears on a page and its hierarchy.
2. If there are no user tasks required on your site, you don’t need to define key user paths.
1. A sitemap is a visual representation of the content and organization of your entire site.
2. The two naming conventions are alphanumerical, a generic convention that just uses letters and numbers to specify each page, and an html naming convention, which provides the actual html (descriptive) filenames for each page of the site.
1. The three-views of structuring site content are Site-View, Page-View, and User-View. Site-view is an overall structural view of what the site will be, and helps connect all the content into a sort of blueprint for the entire site’s structure. Page-view helps organize the content of a single page (copy, navigation, graphics, etc) in a way that is logical and intuitive. User-View is how the pages relate to one another in the path that the user may follow while navigating or attempting to accomplish a specific task on the site.
2. A content audit is an evaluation of all the content – written, visual, or multimedia – on a current site before a redesign (or presented for a site before its initial design).
1. Overall goals for a website might be something like increased web traffic, fewer tech support calls, increased sales or name recognition, increased email subscriptions, etc.
2. A Project Plan consists of all the documents that define the project: budget, schedule, Communication Brief, technical documentation, user profiles, target audience, a user testing plan and any additional documents that help define the scope and goals of the project.
3. Good documentation practices for any project include creating a naming convention and adhering to it, keeping a binder of hard copies of signed documents that you can refer to in a pinch, and tracking your time consistently.
4. An Additional Charge Form is a way to track increases or changes to the scope of the project. They are amendments to the approved budget.
5. The two approaches to Scheduling are using an overview schedule that includes methodology (“IA” “Build” “Maintenance” etc) and a date-by-date itemization of specific tasks and due dates.
6. A Visual Designer creates the look and feel of the site by choosing graphics, colors, typefaces, etc. An Information Designer organizes the content and goals with an eye toward structure, intuition and usability.
7. A staging area is the center of all activity on the project. It’s an online place where both the client and the production team can post and review deliverables and project documentation.
8. The Kick-off Meeting includes a presentation of the Project plan, site goals (via the Communication Brief), discussion of schedule, content, next steps, and establishing a schedule for future meetings. Then there may or may not be ice cream.