Wireframing a Web App

I’ve been sharing (here and here) my progress on a new app I’m currently designing and today I’d like to give you a closer look.  Below are some of the wireframes for the various screens that make up the app.  Each is followed by a brief description.

Any and all feedback is appreciated

The ‘Team’ page is the core piece of the app, which will likely serve as the home screen or dashboard.  This is where you can quickly see everyone on your team (a.k.a. your network of co-workers/collaborators/subcontractors/employees/etc.).  Organize and filter by tag (which might be used as “skills”, or other taxonomies of your choice).

Click into a single person and you get to the person detail page.  Everyone on your team has a ‘file’ containing everything you need to know about that person: Contact info, your notes about that person, related attachments (resumes, etc.), work history, their social media/blogging activity, etc.

This is the ‘Social Stream’ page, which helps you answer the question, “What’s everybody up to?”  This screen contains social media activity from your entire team, from across multiple networks.  Great for keeping in touch during periods when you’re not working with people.

The ‘Applicants’ section helps you organize and manage incoming job applications.  The app will automatically group applications by which ‘vacancy’ they’re associated with.  You also have the ability to create “Short Lists” of top applicants for each vacancy, or “Block list” any applicant you wish to hide from view (even if they try to apply again in the future).

This is an application form for one vacancy at your company.  This is a public page, which you can share and invite people to apply for the position.  The form questions are fully customizable and will integrate with the applications management section.  This is one of several channels where applications might come from.  Others will include embedded forms on your website and responses from 3rd party job boards.

Missing Wireframes

I have yet to wireframe the screens for ‘Projects’, ‘Reports’, and a few other related screens.  The above screens represent the core pieces of the app, which may very well change as we move forward with design and development.

Wireframing Tools

As I mentioned in last week’s Freelance Jam podcast, the tools I’m using to create wireframes are a combination of iMockups for iPad and Balsamiq mockups. iMockups can export files in Balsamiq format, making it easy to start an idea on the iPad and dig into the details when I’m back on the main computer.

Feedback?

Once again, I turn it over to you for your thoughts, questions, ideas, critiques (be cool), etc.  Don’t be shy, you’re among friends