UX Design Leadership and Art Direction
Simplifi by Quicken
Quicken came to Allovus Studios before launching a new personal finance solution – Simplifi. They were looking for a combination of UX best practices and design leadership.
I was hired as the UX Lead for the project. I was in charge of increasing the usability, mentoring designers on their team, redesigning one of the apps features, and art directing a new look and feel.
Because we ended up ahead of schedule I also rearchitected and designed a secondary feature – interactive charts, that could be use across both desktop and mobile.
Roles
UX Lead
Tools & Methods
Sketch
Secondary Research
UX Evaluation
Process Transformation
Paper Prototyping
Sketching
Wireframing
UI Design
Money management targeted toward Millenials.
The target demographic was millennials who were doing well enough, but who had trouble saving up for a big goal such as buying a house. The app needed to be responsively designed, so that user’s could keep up to date with their daily, weekly, and monthly spending to reach their goals. The app also included basic features to be competitive in the market such as “view reoccurring bills”. After launch, there would be detailed interactive charts to monitor and compare spending to support all the different ways that people manage and track their money.
To kick off this project, I studied Quicken’s research from the past 2 years. I read through market data, their desired target’s wants and needs, and past usability tests (not shown here).
Then I went through and did an end to end UX evaluation focusing primarily on the mobile app.
Along with Aimee (Account Manager) and Steve (Director of UX) at Allovus, I met with Kristen (Director of Product Management) and Kelly (Senior Product Manager) at Quicken to start the project. We gathered their primary concerns and needs they had before the launch of the app. Their two internal designers had been working fast on features over the past two years, and did not have strong UX leadership to support a thorough UX process.
They had originally used scrum practices such as stand ups, but had lost them in the rush to finish the project. We offered to help reintroduce these elements and transform their UX process by teaching their designers best practices and adding design reviews. Quicken had also recently hired a Sr. UX Researcher with dedicate time for the Simplifi project. I was there to lead the art direction of a new UI look and feel and to unblock Quicken’s designers from difficult interaction design.
The PM, Kelly, sent me the past 2 year of research that they had done both internally and externally with other firms. I read through all of the slide decks they had shared, and was able to get a good understanding of the past hurdles and where they wanted to be in the market.
I put together a 70+ page powerpoint deck (under NDA) that encompassed both the questions overlaid onto the research, potential guiding principles, and a UX evaluation. The UX evaluation was of their current pre-launched app and included anything from usability issues to inconsistent patterns. Then I worked internally with Allovus to narrow down the slide deck into categories – one of them being “low hanging fruit” that their developers could work on immediately.
I presented the deck to Quicken who received it with enthusiasm. It was a great start to an interesting project.
Updating the Style Guide
While working on these other areas, I also Art Directed the new style guide. To start the new style guide, I worked with the product owners (Kelly and Kristen) to understand what they wanted the look and feel of their new app to be like. This is the best way I’ve found to put together a new brand – see a variety of examples and talk through them in detail.
They sent me many screenshots of apps they had seen, both financial and non financial. They wanted a gender neutral brand that was playful and fresh yet trusted. They also needed a color palette that could work next to each other on charts. I relayed this information to Steve who created many versions color combination that they could choose from.
I presented 5 different options to Kelly and Kristen and gathered their reactions and feedback. They realized in this iteration that they were leaning towards color more similar to their recent palette be their marketing team had started to put together a landing page for the app.
We went through another few rounds of iterations with the last round looking at the order of colors. Because of one of the charts on the home page, they needed to select 5 colors to be of more importance. They also needed to finalize their secondary color to use through the app.
For this last round, I stuck the colors into InVision so that they could easily collaborate on the final decision. This decision needed to be sent to many people – their marketing team, the designers I was working with on a day to day basis and the Product Owners I had been working with from the beginning.
For the typography portion of the style guide, we used what they were already working with Roboto, but simplified the amount of sizes and weights that would be used across the app. I worked with another designer at Allovus to put together a PDF style guide to hand off to their designers and marketing team.
We also worked on UI elements across the app. For example, I looked at how buttons were being used and put together a chart which simplified the amount of styles of buttons used, and showed when to use which buttons.
Once the style guide was complete, one of their designers, Linda started implementing it across all of their current designs. I would do design reviews with her to help keep the consistency of the brand on all pages. Ashim, the other designer, was working on wireframes of a few features and implemented the UI after he was done.
I used the style guide and applied it to parts of their web dashboard as an example. Then handed it off to Linda to finish the remaining cards. I also used the style guide on the two features I worked on throughout the 4 months to show how it could be applied to my wires.
At the same time as I was managing the new look of the app, I was mentoring Quicken’s designers. When meeting with them, I presented a sketch of a new process to get their buy in.
They gave me their feedback on how it could work when either of them were leading a feature, and we all agreed to the process.
For most of my career, my IC work has been on the “front” side of a product. I’ve spent most of my time researching user and business needs, putting together sketches and wireframes, running usability tests or partnering with researchers, and then handing my wires off to a visual designer to build a full UI prototype.
I can infused the visual design with the UX strategy by art directing a UI designer, but continue to put my primary focus toward the next feature or goal. This creates for a holistic user experience, but also allows many people on a design/research team to be able to own their work.
#1. The first feature I worked on was a redesign of a feature that Simplifi had called “Watchlists.”
This feature was a differentiator for Simplifi. It was a way for users to track a specific merchant, category, or tag. The customization that users had was where the real power came into play. They could create custom tags such as “haircuts” instead of relying on preset categories that were automatically assigned.
User’s could also set their target for their watchlist so they could keep track of it over time. A watchlist card could be placed on their dashboard for quick reference.
Problem:
The problem with the watchlist feature was that it wasn’t intuitive. It was both hard to set up and also difficult to understand and compare their spending overtime once a user had set it up.
Goal:
To decrease the cognitive overload of the watchlist feature by turning the one page set up into an easy and intuitive flow. Increase understanding of set up watchlists by turning them into a visual chart.
With the original research in mind, I set out to redesign and test the new watchlist. I started with asking Kelly and Kristen questions about the feature to get a better understanding of how categories and tags were different. I also asked them about the word “payee” vs. “merchant.” Because Quicken used payee in their software, they decided to stick with payee for the launch even though they were open to changing it later.
I sketched out a flow that would help a user set up their watchlist step by step. I reviewed it with Kelly and Kristen. To get this feature out by launch we cut the ability to add both categories, tags, and payees to a watchlist. Instead the user would only be able to choose one type with multiple selections.
For example, a user could choose category and then select “travel” and “food.” They would then see all of the transactions with those categories. In the future, I wanted users to have the flexibility of selecting the category travel and the tag “Vegas Trip.” This created some extra complexities (and vs. or logic showing up in the UI) that we didn’t have time to address, but I later addressed it in the charting feature I redesigned.
I simplified my sketches and then reviewed it with Linda and Ashim. Then I set out to create a wireframe that I could hand off to the user researcher for testing.
After some simplification I put together a wireframe for testing. I left “merchant” in the options to test users reactions against the previous test with the word “payee.”
User testing script
- Scenario: You want to set up a way to keep track of your expenses. You want to track travel and your food expenses.
- Task 1: First, you want to set up a watchlist for travel. You don’t have a target budget in mind, but you want to keep track of your tagged trips to Austin, Costa Rica, and Vegas.
- Once you’ve set that up, you can pick an icon. For this watchlist you can choose the plane next to the world.
- Talk out loud about the chart you see for the watchlist that you set up for travel. Is there anything that you wouldn’t expect? Is there anything missing?
- Task 2: Now you want to set up your watchlist for food. You want to track the categories grocery, restaurants, and snacks, but not bars. Your target for this watchlist should be $500 a month. The icon you want to choose is a drink icon.
- You’ve changed your mind about the drink icon, and decide that you need a more general food icon. Change the food watchlist to a knife and fork icon instead.
- Now look at your food watchlist. Are you projected to spend more or less than your target?
Goals
1. See if the user understands the difference between a category, merchant, tag.
2. Focus on the “have a target/do not have a target” area, should we redesign?
3. Chart on Watchlist. Is it easy to understand? Helpful? Do users have to click into the detail page to get info?
Wires to UI
The user test came back with minimal updates. I was also able to show less confusion with the word “merchant” than “payee” but the team wasn’t ready to make that change from Quicken’s main software.
I used the style guide we had started putting together and applied it to the front page of the watchlist screen.
As I was applying the colors to the wireframe, I realized that it would be better to put a “key” below the graph. That way the graph could show any range of numbers and the design wouldn’t have to flip the “average” and “target” numbers above or below the graph.
This consistency would also make it easier for developers to implement and save Quicken money.
#2. The second feature I worked on, that would be developed after the launched, was “insights.”
Problem:
The main problem that user’s were having with this feature came from how each person managed their finance in different ways. The insights were reports where a user could see their spending by category, payee (merchant), and tag, but there was no was to drill down into category, payee, or tag at the same time.
Goal:
I wanted to create a chart that could allow people multiple views and max flexibility when it came to looking at their finances and digging into the details.
At first, I started by exploring different types of charts that could be useful to understand one’s finances. I used two different books from my visualization information course I took at the University of Washington to sketch out ideas.
The Visual Display of Quantitative Information
by Edward Tufte
Now You See it: Simple Visualization Techniques
for Quantitative Analysis by Stephen Few
Then I really started sketching…
I thought about the information architecture of all the different types of charts based on user’s goals and reshuffled them, so that they could be more useful for users.
Whiteboarding UI Flow
Then I used a whiteboard to go through a full flow in one section to see if the new architecture would would work.
I chose the spending tab, since that was the main concern for users and the most complex when it came to transactions and graphs.
I showed this to Kelly and Kristen, opening up the conversation that it was possible to have different types of filters and different charts all in one interactive UI.
After getting buy-in to design a more flexible system, I needed to think about the layout of the page. I took some more paper sketches into Photoshop to play with the layout of the page.
Detailed Wireframes
With this new layout in mind and the three types of charts figured to work in every section, I jumped into wireframing.
As the contract Allovus and Quicken had put together was coming to an end, I wasn’t able to be part of the user testing for this chart.
I still wanted to be able to leave them with the right look and feel for these wireframes, so I mocked up a single page that could be replicated across all of my wireframes.
The last thing I did was to mock up the different charts and sections in full UI on mobile. Testing would still also be needed for this section, but at least the designs could be worked on in tandem by developers if the timeline required it.
Finally, I created the mobile design for these charts and applied the UI styles.
There you have it.
App Launch
Simplifi launched a few weeks after I completed the project with Quicken. They received great reviews including one specifically pointing out features, like “watchlist” that I had worked on.
With the team at Allovus, we had been able to successfully give Simplifi a consistent look and feel that reflected the vision they had from the beginning – fresh and trustworthy that millennials from any gender could relate to.
Reflection
This project has been one of the most delightful I’ve ever worked on. There wasn’t a “huge block” in the story line, and things ran co-currently easily. I think this is due to a lot of things I learned by working with the Allovus team.
They coached me along the way to help set up very clear expectations. I was also given the benefit of mentorship as I owned a process change with the team, which is known to be hard. This support helped me bounce ideas off of someone internally at Allovus and gave me more confidence when presenting to Quicken, because my ideas had been vetted.
We also had the advantage of a collaborative client who trusted my expertise in the field of UX. They knew their product well but were open to new ways of designing features. I’m personally impressed by everyone involved on the project, especially since it was a remote project from Seattle (where the Allovus team was located) to San Francisco (where Quicken was located).
I hope to emulate parts of this project in future teams.
P.S. To see the “bonus” feature I helped work on for this project and a paper prototype I put together to describe animation options quickly, see below.
#3. The “bonus” feature I worked on was redesigning the flow of the spending plan.
Spending Plan Feature
As I was art directing the project, we needed a section of the app with many different types of page styles. I sketched out different types of templates that could be used throughout the app and then put together a video to show the way that micro interactions could happen between pages. The designer working on the visual design for me at Allovus took those elements and used this flow to show the style guide in context.
Paper Prototyping Animations
This is a quick and easy way I’ve found to communicate animations to stakeholders and also developers. For this project, animations did not fit into the scope before launch, but I wanted to think about the future experience. My goal was to make all of the financial content easier to digest by using transition between parts of the app.
Other Projects
That wraps this project up, but you can check out my other work below. In the Microsoft project I talk about letting go of control. In the Retrofit project, you can see same real world testing with users and some great metrics. In the Washington Wine Redesign you can see how I rearchitected a site while having the hurdles of not being able to work with users directly.
