Wireframes: Version 2
After spending some time away from the first version of wireframes for Help Scout, I came back and couldn't believe how complex I had made our little app. What's with the bar graph on the dashboard and the messy ticket screens?
Round two was all about simplifying, stripping away anything that wasn't a "must-have". I started with a blank slate, thinking through every bit functionality in these pages again. Here's a summary of the major changes that took place from round 1 to round 2:
1- Took the "customers" section out completely. We can build that out later if we ever need it. For now, customer information will only show up when you are viewing a ticket from them. We also took "Mailboxes" out of the navigation and link to mailboxes in the left sidebar.
2- We switched out "Settings" and "Help" from the two navigation areas in the header, thinking settings is much more important. Settings is where you edit mailbox information and configure a bunch of other options, so it belongs on the main navigation.
3- The tickets layout is far too complicated. We simplified it a great deal by moving all the ticket actions off of this screen. If you need to assign a ticket or change the status, just click on the ticket. Provided the screens load very quickly, it's a worthwhile trade-off considering all the free space we gain.
4- We ditched the idea to stack the tickets view and an individual ticket, a la Apple Mail (screenshot). It may work well for a desktop client, but I hate the scrollbars and there's still too much going on.
5- The "header" of each ticket was also a mess in the first round. It's been re-worked, with functionality being placed more intuitively throughout the page rather than bunched up on the top.
We're much closer after this round, but still need another go to finalize anything. The next set of wireframes is the final round before we open Photoshop and start having some fun.
This post is part of our B Combinator series. We're building a new web app with our own time and money, blogging about every detail from concept to launch along the way. Read our first post in the series to learn more about the project, or visit the B Combinator category page to see all of the articles up to this point.