2. I’ve gathered samples from three of my projects at The Dolan Company thatrepresent my best work.Deliverable: Responsive WebsiteSamples: Sitemap, CMS Requirements, AxurePrototype/ Wireframes, UX/UI and Visual Design.Deliverable: Native iPad appSamples: Wireframes, UX/UI and Visual Design.Deliverable: Native iPhone appSamples: Functional specification and UX/UI Design.Legislative DirectoryNews Reader iPad AppNews Reader iPhone App Redesign
3. Politics in Minnesota (PIM) Legislative DirectoryPolitics in Minnesota (PIM)Legislative DirectoryThis product was createdfor lobbyists on the go. Itcurrently exists as a printedbook, the goal of thisproject was to provide thesame content in an easy touse responsive website. Iutilized user-centereddesign and mobile firstapproach.RolesI lead development byplaying several rolesincluding InformationArchitect, Project Manager,UX/UI Designer and VisualDesigner.
4. PIM – Visual SitemapVisual SitemapAfter reviewing the printedbook I created a visualsitemap to define contenthierarchy and sitenavigation. I organized thecontent into logical pagesand defined a tab structure.
5. PIM – Admin FieldsBackend Admin StructureI was responsible for definingthe backend adminrequirements. I specifiedform names, field names andfield types for the adminbased on the sitemap.These specifications wereused to build the backendadmin for data entry into thedatabase.
6. PIM – Admin FormBackend Admin FormThis is the correspondingadmin form defined onprevious page.
7. PIM – Axure WireframesDesktop List ViewI built click-throughprototypes in Axure to definethe user experience and userflow on both desktop andsmart phone versions of theresponsive website.This is the legislator list viewwhich includes various sortingand filtering options making iteasy for the user to find whothey’re looking for.Clicking on any of the toplevel menu items (on left)brings the user to a similarpage with sorting/filteringoptions customized based onthe content.Prototype can be viewedonline here:http://share.axure.com/SESMZW/
8. PIM – Visual DesignDesktop List ViewVisual design of the legislatorlist view.I created the visual designmockups in Photoshop andprovided layered PSDs foreasy development.
9. PIM – Axure wireframesSmart Phone List ViewI utilized a mobile-firstapproach to establish contentpriorities and strategy. Myprocess began by creatingclick-through low fidelityprototypes of the mobileversion in Axure.The legislator list view onmobile has filtering optionsand a tappable alphabetalong right making it easy toget to any name. The menu iscollapsed in upper left.Prototype can be viewedonline here:http://share.axure.com/F5D83R/Home.html
10. PIM – Visual DesignSmart Phone List ViewVisual design of smart phonelist view created inPhotoshop.
11. PIM – Axure WireframesDesktop Profile PageLegislator profile page whichincludes tabbed content anddirect links to other portionsof the directory.Prototype can be viewedonline here:http://share.axure.com/SESMZW/
12. PIM – Visual DesignDesktop Profile PageVisual design of profile page.In this version the contactinfo is broken out into a boxfor easy access and remainsin the same position on alltabs.
13. PIM – Axure wireframesSmart Phone Profile PageScreenshot of the mobileversion of the legislatorprofile page with contentbroken into tabs.Prototype can be viewedonline here:http://share.axure.com/F5D83R/Home.html
14. PIM – Visual DesignSmart Phone Profile PageVisual design of smart phoneprofile page.Note the contact info iscollapsed on the left andexpanded on the right. Ichose this solution because Iwanted the contact info to bereadily available withouteating up too much space.The tab styling is alsocondensed for smallerscreens.Collapsed contact info Expanded contact info
15. News Reader iPad appThis native iPad app wascreated for The DolanCompany’s 30 + newswebsites with a goal ofmaking them easy to accessand read on an iPad. Thedesign needed to beskinnable and easy torollout to all 30 newsproviders.RolesInformation Architect,Project Manager, UX/UIDesigner and VisualDesigner.News Reader iPad AppNews Reader iPad App
16. iPad app - WireframesMain Section PageThis wireframe indicateslayout of news content andnavigation through the app.Tapping any headline orexcerpt opens the full articleview. Swiping to the rightmoves to subsequent sectionpages (dots along the bottomindicate which section pageyou’re currently viewing).Along the bottom: a button toopen categories menu,refresh, keyword search fieldand settings menu button.
17. iPad app – Visual DesignMain Section PageVisual design and layout ofnews content.The app consumes WordPressfeeds and updates contentdynamically.
18. iPad app - WireframesFull Article PageThis wireframe shows fullarticle view which includesheadline, photo, caption andbody copy.Swiping to the right moves tosubsequent article pages(dots along the bottomindicate which article pageyou’re currently viewing).When you reach the last pageof the article swipingprogresses the view to firstpage of subsequent article.Along the top: a button toadd to favorites, adjust fontsize and share the post.
19. iPad app – Visual DesignFull Article PageVisual design and layout offull article featuring largenews photo and optionsalong the top to adjust fontsize, favorite and share thepost.
20. News Reader iPhone AppredesignThis native iPhone app wascreated for The DolanCompany’s 30 + newswebsites with a goal ofmaking them easy to accessand read on an iPhone.A redesign was necessarybecause Apple rejected theoriginal design submitted.I was tasked with making UIand design improvementsto get the app accepted.RolesI lead development by as aProject Manager,conducted Heuristicevaluation, and did UX/UIDesign and Visual Design.News Reader iPhone App
21. iPhone app – Functional SpecificationsiPhone App UI ImprovementsI suggested several UIimprovements, for examplepull down to refresh as seenin this sample from specs doc.
22. iPhone app – Functional SpecificationsiPhone App UI ImprovementsAnother sample from thespecifications documentincluding several UI/UXchanges making the app moreintuitive and easier to use.