FiscalNote for iOS
I designed and launched FiscalNote's first mobile app. I led a team of two iOS engineers to launch the app from a sketch on a napkin to live on the Apple App Store in four months. In my role as the lead designer and product manager, I led the user research, developed personas, crafted user journey maps, task flow diagrams, and wireframes to develop a UX pattern library, prototyped the app and tested prototypes with end users, launched the company's first beta testing program, and designed the UI kit. I also worked closely with product marketing to prepare for the app's launch, which consequently received five star reviews from end users and caught the attention of the Apple Developer Relations team.
Developing personas
My colleague (a product manager) and I spent dozens of hours interviewing users in their offices around DC and in coffee shops near Capitol Hill to gather insights to inform our next quarter’s product roadmap. Our findings about their mobile usage gave us a better understanding of their needs and how we could launch a mobile product to meet their goals better while they were traveling for work.
To synthesize the insights we gathered through user research, I took quotes from our user interviews and grouped them by theme. Under each theme, I posed a “How might we…?” question and invited the entire company to participate in the ideation process with me. Here are a few quotes from our interview-based user research sprint:
“When I’m on the road, I won’t get to my computer until 10 pm, or 7 am. I’m highly reliant on phone, but sometimes cell phone coverage is a challenge. And if an app doesn’t generate quickly, I’ll default to email. “ -Andy, Partner at a Lobbying Firm
“Trying to keep up with everything, between flights, especially if a flight doesn’t have Wi-Fi is a pain. If I’m flying across the country – I’m not going to have a whole lot of time to make sure I’ve looked at all the bills for the day – we have the ability to log in and look at all our documents on the internal shared drive – but it’s a pain when I’m on the plane for some reason – I’m looking for my saved letters for an issue – I never write anything fresh unless I absolutely have to.” -Sean, Director of State Government Affairs at a Healthcare Trade Association
“I rely on travel apps on my phone, because if there’s a delay, it ruins my day” -Anne, Director of State Government Affairs at a Pharmaceuticals Company
“There’s a list of bills I check for a bill hearing – especially since I have to book travel to get to those places.” -Owen, Director of State Government Affairs at a Consumer Products Trade Association
Then, I asked, “How might we…empower users to keep up with their work while traveling?”
To guide the ideation, I developed four design personas who would likely to use the mobile product and led a lunchtime training session on personas, which was attended by 20-30 employees.
To guide the ideation, I developed four design personas who would likely to use the mobile product and led a lunchtime training session on personas, which was attended by 20-30 employees.
State Director Stacy is an example of one of the personas and is the primary persona for the features in our MVP requirements. Stacy, a State Government Affairs Director at a Private Company, spends her days meeting with state legislators. She logs into the web application daily and receives a daily digest email for newly introduced bills in the 10 states she covers, and email alerts every four hours for updates to bills she’s deemed relevant and wants to follow as they move through the legislative process. Her main goals are: quickly looking up a bill if it’s mentioned in a meeting with coalition members, managing updates for newly introduced legislation and changes to legislation she’s monitoring, and having an easy way to decide which bills to monitor.
Sketching out key task flows
I created site flow diagrams to map the basic functionality of the features of the Mobile MVP. The interaction design focused on the data users would need to see, what they would need to do with it, and how they navigated the app.
First wireframe for in-app onboarding
In this phase of the design process, we uncovered that one key design decision and feature change we would want to make is giving users the ability to view an in-app onboarding. In the early stage, one design concept of the onboarding was a series of tutorial screens like this:
In this phase of the design process, we uncovered that one key design decision and feature change we would want to make is giving users the ability to view an in-app onboarding. In the early stage, one design concept of the onboarding was a series of tutorial screens like this:
Final mockup for in-app onboarding
However, after after discussing as a team, we decided to adapt our approach. We wanted a more interactive experience in the initial onboarding, as a well as intuitive UI paired with microinteractions and microcopy to guide ongoing onboarding (for example, help copy in confirm delete actions to continuous train users on how to use the app). And after finding a library on Github for an interactive onboarding, we knew doing so in a short timeframe would be feasible. Between these screens, there would be animations of the actions of searching, clicking on a bill card, watching a bill, and more. The actions were performed on bills that were hardcoded in order to minimize the chance of edge cases (for example, the user misspelling a search term and seeing no search results). The onboarding design concept adapted to look more like this:
However, after after discussing as a team, we decided to adapt our approach. We wanted a more interactive experience in the initial onboarding, as a well as intuitive UI paired with microinteractions and microcopy to guide ongoing onboarding (for example, help copy in confirm delete actions to continuous train users on how to use the app). And after finding a library on Github for an interactive onboarding, we knew doing so in a short timeframe would be feasible. Between these screens, there would be animations of the actions of searching, clicking on a bill card, watching a bill, and more. The actions were performed on bills that were hardcoded in order to minimize the chance of edge cases (for example, the user misspelling a search term and seeing no search results). The onboarding design concept adapted to look more like this:
Final design
After we made changes based on user testing (more details here), it was time to submit to the App Store and get ready for launch. These are the screenshots of the design we submitted to the App Store:
After we made changes based on user testing (more details here), it was time to submit to the App Store and get ready for launch. These are the screenshots of the design we submitted to the App Store:
Testimonials
“I’ve only poked around a little bit on the mobile app, but it’s absolutely lovely to look at and (so far) very easy to use. Amazing work by your team!”
-Amy, Director of State Government Affairs at an Education Nonprofit (a current FiscalNote customer)
“I’ve only poked around a little bit on the mobile app, but it’s absolutely lovely to look at and (so far) very easy to use. Amazing work by your team!”
-Amy, Director of State Government Affairs at an Education Nonprofit (a current FiscalNote customer)
“I honestly think that the mobile app is going to end up being the key tool for my team…you guys are great!”
-Brendon, Government Relations Project Manager at a Healthcare Company (a current FiscalNote customer in the beta testing program)
-Brendon, Government Relations Project Manager at a Healthcare Company (a current FiscalNote customer in the beta testing program)
The new mobile app is slick!”
– Ross, Director of Policy, Advocacy, and Research at an Education Nonprofit (a current FiscalNote customer in the beta testing program).
– Ross, Director of Policy, Advocacy, and Research at an Education Nonprofit (a current FiscalNote customer in the beta testing program).
After tweeting “FiscalNote Mobile will be a game changer for state gov pros”, Ross then also wrote an email to his VP, “Thanks for signing us up with FiscalNote. They are great group to work with. The mobile app will be a particularly useful resource when traveling.”
“Wow. This update is so sleek! Big shoutout to the mobile team.”
– Tim Hwang, CEO at FiscalNote
– Tim Hwang, CEO at FiscalNote
“Mobile is so far ahead in terms of user experience…it shows, great work.”
-Vlad Eidelman, VP of Research/Data Science at FiscalNote
-Vlad Eidelman, VP of Research/Data Science at FiscalNote
“The mobile team rocks; and your designs rock! It is an incredibly good app.”
– Ajay Chadha, VP of Engineering at FiscalNote
– Ajay Chadha, VP of Engineering at FiscalNote
“Good lord, this build is awesome.”
– Nate Sullivan, Product Marketing Manager at FiscalNote
– Nate Sullivan, Product Marketing Manager at FiscalNote
