2. I’ve gathered samples from three of my projects at The Dolan Company that
represent my best work.
Deliverable: Responsive Website
Samples: Sitemap, CMS Requirements, Axure
Prototype/ Wireframes, UX/UI and Visual Design.
Deliverable: Native iPad app
Samples: Wireframes, UX/UI and Visual Design.
Deliverable: Native iPhone app
Samples: Functional specification and UX/UI Design.
Legislative Directory
News Reader iPad App
News Reader iPhone App Redesign
3. Politics in Minnesota (PIM) Legislative Directory
Politics in Minnesota (PIM)
Legislative Directory
This product was created
for lobbyists on the go. It
currently exists as a printed
book, the goal of this
project was to provide the
same content in an easy to
use responsive website. I
utilized user-centered
design and mobile first
approach.
Roles
I lead development by
playing several roles
including Information
Architect, Project Manager,
UX/UI Designer and Visual
Designer.
4. PIM – Visual Sitemap
Visual Sitemap
After reviewing the printed
book I created a visual
sitemap to define content
hierarchy and site
navigation. I organized the
content into logical pages
and defined a tab structure.
5. PIM – Admin Fields
Backend Admin Structure
I was responsible for defining
the backend admin
requirements. I specified
form names, field names and
field types for the admin
based on the sitemap.
These specifications were
used to build the backend
admin for data entry into the
database.
6. PIM – Admin Form
Backend Admin Form
This is the corresponding
admin form defined on
previous page.
7. PIM – Axure Wireframes
Desktop List View
I built click-through
prototypes in Axure to define
the user experience and user
flow on both desktop and
smart phone versions of the
responsive website.
This is the legislator list view
which includes various sorting
and filtering options making it
easy for the user to find who
they’re looking for.
Clicking on any of the top
level menu items (on left)
brings the user to a similar
page with sorting/filtering
options customized based on
the content.
Prototype can be viewed
online here:
http://share.axure.com/SESM
ZW/
8. PIM – Visual Design
Desktop List View
Visual design of the legislator
list view.
I created the visual design
mockups in Photoshop and
provided layered PSDs for
easy development.
9. PIM – Axure wireframes
Smart Phone List View
I utilized a mobile-first
approach to establish content
priorities and strategy. My
process began by creating
click-through low fidelity
prototypes of the mobile
version in Axure.
The legislator list view on
mobile has filtering options
and a tappable alphabet
along right making it easy to
get to any name. The menu is
collapsed in upper left.
Prototype can be viewed
online here:
http://share.axure.com/F5D8
3R/Home.html
10. PIM – Visual Design
Smart Phone List View
Visual design of smart phone
list view created in
Photoshop.
11. PIM – Axure Wireframes
Desktop Profile Page
Legislator profile page which
includes tabbed content and
direct links to other portions
of the directory.
Prototype can be viewed
online here:
http://share.axure.com/SESM
ZW/
12. PIM – Visual Design
Desktop Profile Page
Visual design of profile page.
In this version the contact
info is broken out into a box
for easy access and remains
in the same position on all
tabs.
13. PIM – Axure wireframes
Smart Phone Profile Page
Screenshot of the mobile
version of the legislator
profile page with content
broken into tabs.
Prototype can be viewed
online here:
http://share.axure.com/F5D8
3R/Home.html
14. PIM – Visual Design
Smart Phone Profile Page
Visual design of smart phone
profile page.
Note the contact info is
collapsed on the left and
expanded on the right. I
chose this solution because I
wanted the contact info to be
readily available without
eating up too much space.
The tab styling is also
condensed for smaller
screens.
Collapsed contact info Expanded contact info
15. News Reader iPad app
This native iPad app was
created for The Dolan
Company’s 30 + news
websites with a goal of
making them easy to access
and read on an iPad. The
design needed to be
skinnable and easy to
rollout to all 30 news
providers.
Roles
Information Architect,
Project Manager, UX/UI
Designer and Visual
Designer.
News Reader iPad App
News Reader iPad App
16. iPad app - Wireframes
Main Section Page
This wireframe indicates
layout of news content and
navigation through the app.
Tapping any headline or
excerpt opens the full article
view. Swiping to the right
moves to subsequent section
pages (dots along the bottom
indicate which section page
you’re currently viewing).
Along the bottom: a button to
open categories menu,
refresh, keyword search field
and settings menu button.
17. iPad app – Visual Design
Main Section Page
Visual design and layout of
news content.
The app consumes WordPress
feeds and updates content
dynamically.
18. iPad app - Wireframes
Full Article Page
This wireframe shows full
article view which includes
headline, photo, caption and
body copy.
Swiping to the right moves to
subsequent article pages
(dots along the bottom
indicate which article page
you’re currently viewing).
When you reach the last page
of the article swiping
progresses the view to first
page of subsequent article.
Along the top: a button to
add to favorites, adjust font
size and share the post.
19. iPad app – Visual Design
Full Article Page
Visual design and layout of
full article featuring large
news photo and options
along the top to adjust font
size, favorite and share the
post.
20. News Reader iPhone App
redesign
This native iPhone app was
created for The Dolan
Company’s 30 + news
websites with a goal of
making them easy to access
and read on an iPhone.
A redesign was necessary
because Apple rejected the
original design submitted.
I was tasked with making UI
and design improvements
to get the app accepted.
Roles
I lead development by as a
Project Manager,
conducted Heuristic
evaluation, and did UX/UI
Design and Visual Design.
News Reader iPhone App
21. iPhone app – Functional Specifications
iPhone App UI Improvements
I suggested several UI
improvements, for example
pull down to refresh as seen
in this sample from specs doc.
22. iPhone app – Functional Specifications
iPhone App UI Improvements
Another sample from the
specifications document
including several UI/UX
changes making the app more
intuitive and easier to use.
