process post so you people know i ain't slackin' foo! the goal is to come up with three variations of navigation, wire framing, and informational architecture that is unique but effective. i'd say we hit the nail on the head.
this wireframe depicts the way the recording device would work on the seed website. simple controls are used to start, stop, add tags, and publish your recording to your profile as well as the advice section of the site. what i was thinking could happen is the other users on the site could download the advice to their computer, or stream it straight to their smart phone (iphone for example) so they can hear the advice as they work in the garden. this saves you many trips to your computer and back outside. it is also a way for the content to be accessed to more than one platform (computer to phone).
wireframe for an 'amount calculator' for a smart phone. it allows you to predict how much of a material you will need for the space you have in your garden.
wireframe showing uploading images straight from your phone to your profile or uploading images through your camera to the website. it also shows up in the 'recent picture' section of the site automatically. you are encouraged to tag your images so others can narrow their search to more specific results.
this next device is a static camera you attach to your house and it takes a picture in the same spot at the same time every day. the image then is uploaded straight to the picture section in your web page that can be played out in a stop motion. you're able to see your progress day after day in a quick movie. the more you work, the more people are able to see your achievements.
many iphone applications for the 'on the go' gardener. the wireframes show how the transitions from one screen to the next. the arrows indicate what your finger is 'touching' on.
after drawing these wireframes and giving the information architecture of the site some serious thought, i started planning how the content and information should be displayed for the users' benefit. i thought about using the keyboard keys to retrieve navigation elements for the website. we use our keyboards so much, so why not integrate them into websites so we don't have to use the mouse click. you could move seamlessly from typing a comment on someone's page then straight to a different page on the website with a simple key command. it's something i use every day when using photoshop, illustrator, indesign, and after effects. it saves so much time and you will become used to it with muscle memory. i also drew the beginning stages of having content inform the design as well as a customizable page that allows the user to change column width and content on their profile page.
as i was just saying, the user should be able to have (almost) complete control of the content as well as how they interact with the website. it's going to be the wave of the future. i designed this infrastructure based on the idea that any column width and content box can be added, moved, sized and placed anywhere on the gardening website they want. some things should be kept constant, so the user knows they are still on the gardening site. some things to keep constant might be typefaces, icon system, and our seed logotype.
this sketch shows some different variations of different sections on the website.
here is what i designed based on those concepts. each white area is able to be scaled down or up, moved to areas of the page that are most important to the user. they would be able to create one, two or three column sections to hold the information.
what happens if a user wants to see advice about growing vegetables only? what's great about this is the idea that different elements from different parts of the site (like this tips/advice section) could be added straight to your portion of your profile. now, instead of navigating to the tips section, they can add the vegetable tab straight to their profile. it's constantly updating, so new information may seamlessly be streamed onto her profile, without having to go to the tip page. you are also able to move any section of the site up to the main nav bar, if you feel it most important. 
a view of a 'market' page where users are able to search for supplies/plants/flowers and buy them from the site.
wireframe for the iphone app. you drag the icon to the light colored area to activate it (as opposed to clicking it). this might be more natural for the user on the iphone, considering it's a touch screen device.
the white bar indicates the hit state
another website layout is wire framed here.
the main point to this structure is to have the content of the site be the design. the main page consists of large ribbons tabs. each ribbon is a section of the site. what you see on each ribbon is the newest information (constantly updated by other users) for that portion of the site. for example, on the tips 'ribbon', you're able to see the newest tips users like yourself are writing. they update in real time, which means when someone writes it, it appears on the main page. this allows the user to have an overview of what's happening in each section of the site, without clicking through each page. what happens if you want to read more from the tips page? when the user wants more information, they can click on the big ribbon (or the links in the ribbon) which slides you to the tips page. the other main navigation remains as condensed ribbon/tabs on the left side of the page. this allows the user to navigate section to section without having to go back to the main page. after determining these rules, i asked my partner laura to design it. this is what it looks like after she added the 'skin'.
effect of 'sliding' over from main page to the users profilepage.
the view of her profile page, with the navigation tabs on the left side of the screen (there will be titles on these tabs for updated versions).
and finally the tips and advice page.
it looks so great!
iphone app i designed for this structure.
white bar indicates hit state
last iphone design for concept three. laura designed everything about this version. can be seen in 1, 2 and 3.
view my partner laura's process on her blog!
1 comment:
yeeeeeaaaahhhh!!
Post a Comment