This startup required wireframes and mockups to include in its presentation to potential investors. They are also building a demo site based on these designs. Much of the preliminary market research had already been conducted by the client. Through several meetings, we used this research to create two personas and a handful of user stories to help me design convincing mockups of a functioning website and web apps, including a dashboard, widgets, and a mobile game interface.
In order to comply with the NDA I was asked to sign prior to starting work, I’ve changed the branding, the color scheme, and the general nature of the site itself.
Wireframes
The client requested 15 different wireframes of the primary pages of the website and dashboard in various states, including mobile and logged in/logged out views. I’ve included a representative sample of these here.
Card stager with dashboard
Card stager filterable by category and sub-category. Cards can be dragged and dropped into the drop zone of the dashboard in the left sidebar.
User homepage with dashboard
User's homepage, logged in. The homepage focuses on the more casual aspects of the website, including posts made by other users. Features a dashboard in the left sidebar that organizes user's saved items from the "serious business" sections of the website.
Wireframe of Posts page, logged in
Posts made by all users appear on this page, with a tag filter system at the top of the page.
Mobile view of dashboard and card stager
Mobile view of dashboard and card stager
Detailed Mockups
During the wireframe stage, it was determined that the sticky bar at the footer of the site looked too much like advertising, so for the detailed mockups, we changed this to a flyout widget that would float at the right side of the viewport. We also added a new view: a checklist widget opened inside a modal window. No detailed mobile mockups were requested.
User homepage, logged in
The logged-in homepage features a dashboard in the left sidebar, a sticky widget floating at the right of the viewport, and featured users and advertisers panels.
Card stager and dashboard, logged in
The cards in the stager are purchased by advertisers. This is the primary revenue model for the site. Users who search for items to add to their dashboard are presented with these cards, which they can drag and drop to the dashboard, where the system will automatically add to an existing list, or create a new list in which to place the card.
Modal widget window
When users open the widget from the dashboard in the left sidebar, a modal window is invoked that displays the widget's contents. In this case, the widget is a checklist, and this mockup shows the list manager, where users can tab through the cards they've saved.
