DOWNTICKET | product design
Downticket is an interactive progressive web app (PWA), empowering political engagement via an information platform to evaluate candidates and track their status through each election cycle. Downticket also processes campaign contributions for any active political candidate. Below you’ll see highlights from a few of the most important design initiatives I completed at Downticket.
Challenge:
I joined the team in November 2017 and the product was in beta with limited capabilities. Moving as quickly as possible, the PWA and website needed a complete visual refresh, rebranding, rearchitecting, new features and a fully functioning web experience by summer 2018.
My Roles:
Product Designer
UX Methodologies:
Information architecture: reconfigure navigation and page architecture
Interaction design: user flows, high fidelity wireframing, prototype design
User research: prototype testing, cognitive walkthroughs, customer interviews, screeners and surveys
Visual design: UI design, style guide, branding, all visual assets including marketing assets
Tools:
Sketch, InVision, Illustrator
Product Initiative 1: Rearchitect Site
Problem:
During product strategy meetings, the founders and I determined many new features and content to build. Given the beta’s existing menu navigation and architecture, I quickly realized the architecture would need to change before building new features. Because the beta product was still very small, the architecture could be flat. In order to grow into the strategized pages and features, we would new to change the bottom nav buttons and there was plenty of room to consolidate the existing features.
Solution:
Pivoted from a flat navigation system to a nested one and simplified the navigation buttons and content.
This was of great debate on the team. Product and Design had very different ways approaching the navigation system. Eventually we concluded the nested design was the better option for a number of reasons.
The nested architecture type which was the better organized and future-proof version given our business objectives.
By nesting content, I was able to simplify the bottom menu navigation to 2 and then 3 buttons instead of 5.
Again, organizing the pages into relative groups gave users the main features of the site up front. The now 2 areas of the site were deeper and less disjointed by having the content on one page rather than 5+.
I joined the Support and Opposition Lists to one page called, “Watchlist” which also replaced the “Election Center.” I changed some of the UX copy: from “Hot Races” (for choice of words) to “Hot 25” that could live under the Elections tab. I added secondary navigation buttons at the top to of the page to filter content, see the new Elections page. I Simplified the menu system to three links and removed the user profile because it is only relevant when contributing to a campaign.
IA BEFORE with Flat Nav:
IA After with Nested Nav:
Achieved Nested Navigation:
Proposed Flat Navigation:
Product Initiative 2: Rebranding
Problem:
The product needed a visual refresh. The product looked a bit dated but it also needed some typography help and establishing consistent guidelines for look and feel.
Solution:
Based on the founders desires and my own market and competitive research, three approaches to a new look and feel" were created. After discussing the pros and cons of each moodboard, the team agreed one that best exhibited the design direction. I then directed Orange Element, a design agency, to define a new logo, font and color palette options. This collaboration was great to expedite the visual design ideation while I focused on user flow and content strategy challenges.
One iteration revealed the final moodboard and visual direction for the products:
Moodboard created by M.G.
2018 Style Guide:
Product Initiative 3: UI Refresh
I conducted 10 interviews with users and nonusers to gauge their impressions of the beta product. This research identified visual design and user flow obstacles. One example being the candidate’s profile photo. In the beta product, the candidate’s photo fills the screen and doesn’t suggest information is scrollable or swipable. Each user stated one of two positions, “why is the photo so big?” or “I don’t care what the politician looks like, I care about what they do.”
I set out to implement the interview feedback along with new branding, the mood board and Material Design Guidelines into the new screens and layouts.
Before - Product in Beta:
Sketching layout solutions informed by user research & Material Design elements
High fidelity print & edit exercise - before handing off to a developer I print every screen to look for any elements to iterate.
After - UI & Visual design Refresh
Product Initiative 4: Web Experience
Problem:
New users who signed up via the website were immediately faced with a “please redirect to your mobile browser” messaging. Yikes. Creating a web experience became a priority after Downticket started started advertising with a YouTube channel. DT received feedback from users and unfavorable analytics with the surge of new traffic coming to the site.
Unfortunately because of the way the PWA was initially built and optimized for mobile-only, the dev could not apply existing code to newly designed screens.
Solution:
Build an MVP of Downticket as fast as possible. Leadership decided that for the quickest completion, the dev would create the experience and I would provide feedback. While the flows managed to stay the same, the UI looks very different from the mobile experience.
Current screens from the web experience:
Screens designed for the web experience if we had had more time:
LEARNINGS:
Startups have a different set of challenges than the bigger companies or agencies I’ve worked with. Company-wide we had 4 employees: 1 Developer, 1 Designer (me), 1 CEO and 1 part-time Product person.
Greatest lessons learned:
establish a positive and collaborative relationship with the Developer - they have product saving abilities, at least ours did.
how to self-motivate and work in a fully autonomous manner from my home office.
the importance of buy-in from founders of research and a design process, as well as how to deal when one or neither are achievable.
fail fast and often.
get sh*t done; ain’t nobody got time for perfection.