Redesigning the Acorns iOS App
A UX Research Journey
I always wanted to take the time to do a redesign and see how much I can accomplish on my own, and when this was one of the options for the Design track for this challenge, I jumped at the opportunity. I have particularly enjoyed using some finance and investing apps, and was drawn to the Acorns app. For those of you unaware of what Acorns is, at its core it rounds up to the nearest dollar any payments you make with credit or debit cards linked to your account and invests it in a portfolio that best suits you. Think of it as a digital piggybank. Eventually, the result of this passive investing can have quite a positive effect on your bank account. However, having used the Acorns app on the iPhone, I knew that it wasn’t quite compliant with Apple’s design guidelines, which made it a good choice for a redesign!
User Research
When doing a challenge on UX research and redesign, a key component of what you do is… research! I decided to see what actual users had to say about Acorns. I asked the Acorns subreddit on the pros and cons of using it, especially asking about the iOS app. Unfortunately, most of those responding were more interested in sending me their referral links. Other responses focused on Acorns overall as a service and didn’t go into detail about the app.
Next, I started looking through the internet with the hope of finding some information about users. As Acorns is a relatively young company (they only launched the app in 2014) and with 4.5 million users, an extensive amount of user information is not available, though I was able to find that the average age is 32 with an income between $50,000 and $60,000 per year.¹
Furthermore, I was able to find user research for Acorns conducted at University of Michigan, where most of the respondents were college students. Though the sample size was small, and the amount of people who have never heard of Acorns was more than those who have heard of it and have used it, combined, it did bring up a key point: many of the respondents and interviewees had a limited knowledge of finance and investing and most of their knowledge came from their parents.² This is certainly in line with Acorns’ goal of “reach[ing] an ‘up-and-coming’ financial audience, who are less financially savvy.”¹
Based on this information, I came up with the following user persona to help me better understand who a potential user of the app could be.
Mapping out the App
In this stage of the research, I wanted to get a sense of the information that was presented in the app and how it was presented. I knew from using it before that I had a sense of repetition within the app, so I wanted to explore further by mapping out the views of the app. First, I took a look at the app itself to see what I had to work with.
As I mentioned before, it doesn’t exactly adhere to Apple’s HIG. So I decided to take a look at their website, just to get some ideas of how it looks and how it relates to the app.
Looks familiar, doesn’t it? It seems like Acorns translated the looks from the web to the iOS app. Given the limited difference on both platforms, I went ahead and mapped the views of the app to help me visualize everything on one page. To help achieve the map I used a website called Conceptboard. I created a color code for the type of information that is presented and then connected each element of the app where the elements repeated.
You might be scratching your head, wondering what on God’s green Earth you’re looking at. Allow me to explain. At the top level is the app, and underneath are the three views Past, Present, Future that are presented by the custom segmented control. I also include the hamburger menu/side shelf as a separate view. Below each main view are the components that make up the related view. In past there is basically a summary of transactions made to your account. These include Round-Ups and dividends. Within the Present view, you are presented with the most amount of information, comprising of multiple sections, with some sections that could be further broken down to individual elements. In Future, there is a graph showing the projected amount of money your portfolio can earn in x amount of time.
As you can see in the legend in the top left corner, there are different visual keys that quickly convey information about how each component or element is connected. Solid lines denote a connection within the parent view, while dashed lines indicate a connection in different views. Accompanying the lines are nodes. Solid nodes denote that the elements send the user to the same page or context, while nodes with no fill denote different contexts as the destination. Finally, the colors indicate different information that relates each component. I broke it down into 4 distinct categories: investing, portfolio & performance, knowledge, and other. “Other” could include products that Acorn is trying to cross-sell, but are not part of the core service. I also broke down the “Invest for your future” page in a similar fashion because there was more information under the hood.
Having completed my mapping, it became apparent that there were A LOT of elements that were being repeated, not only within one view but also with respect to subviews and other views. It seemed to me that the app was not utilizing its screen real estate efficiently, and risked losing useful information and main pages amid the clutter. In an interview, Acorns’ VP of Experience David Keegan said:
At Acorns, we try to build experiences that really convey a story to users. We think a lot about the psychology behind how people think about money, and the personal narratives everyone has about where they are in their finances now and where they want to be. And then we try to show them where they could go and convey a sense of potential and growth.³
This, I assume, was the reason for the Past, Present, and Future views. And though I agree with this line of thinking, in this case I believe it comes at a sacrifice, where the app’s Past and Future views are quite bare compared to Present and leave it to do all the heavy lifting. In trying to be faithful to the narrative of personal growth, and combining that with the insight from mapping out the main views of the app, I mapped out a flowchart of how I envisioned my redesigned version of Acorns (only focusing on the core service).
From my initial mapping, I thought that the categories served as good parent views in a flat hierarchy, which I reflect in the new mapping. Each element under the view is directly related to the purpose of the view. I also tried to portray the user’s narrative of personal growth in the hierarchy. First one invests, sees the changes in the portfolio, and grows by acquiring more information over time, along with money. Furthermore, that narrative is also present in the performance graph, all under one scope but accessible.
Redesign
Now comes the fun part, the redesign! Below you will find the four views of the redesigned app. I tried to be true to Acorns by using similar colors and gradients, to give that feeling of storytelling and growth³, but also present the user with the most important information they need to achieve their purpose of investing, earning, and growing.
Invest
The overview on the top greets the user with an up-to-date value of the account, so that the user doesn’t have to get lost within the app to look for this information. This is one of the features that the original app has that I quite enjoy and decided to carry over. Since the core service of Acorns is investing, especially through Round-Ups, I wanted it to be the first thing the user sees, as well as letting the user interact with it right from the start (if Round-Ups are not automatic).
Found Money was also another element that I consolidated into investing. The user could scroll through the companies and select them, or search for a specific one. I also decided to show a helpful article. Even though it could be considered as an educational aspect, I think it could be appropriate for quick and light reading.
The other methods of investing into your account, Recurring and One-Time, are presented at the bottom.
Portfolio
In this section, the user will be able to see the growth of their portfolio over time and what their portfolios are comprised of. Again, the overview returns to quickly inform the user of their portfolio profile. The concept of Past, Present, and Future makes a return here. The idea is that the segmented control will show the progress over time or potential growth in the future, changing the scaling of the y-axis . Below the graph, the user can choose how far back to show the line plot. For Present, the time range is fairly close to the current date. If the user selects Past, these options would change to 1 Year, 5 Years, and All Time, for example. Upon selecting Future, the graph would show the projected amount over the next 50 years. And, of course, the line plot would be interactive to the touch, showing the value at a certain time/position on the graph. Below the graph, the user has access to the account activity over the last 30 days.
Here the user can see the contents his or her portfolio, for example what kind of stocks and bonds. Below the pie chart, the user can expand the view to show in detail the exact ETFs, bonds, and stocks in the portfolio and the percentage that each one comprises.
Knowledge
In the Knowledge section, the user can read about topics related to Acorns, investing, and retirement, just to name a few. The cards would redirect the user to the full article and is later marked as “Read” with a checkmark. The user also has the option to view all the topics at once to avoid scrolling through the cards. Furthermore, at the bottom the user can find and access Frequently Asked Questions. This view would provide quick access to topics that would help improve the user’s knowledge of finance and investing.
Account
I think the account page and its function is self-explanatory. The users can view their Acorns investor certificate and see the progress of their account set up. This, in my opinion, is the appropriate place to cross-sell to the user Acorns’ other products (Later for retirement, Spend for checking account/debit card, and Protect for insuring your portfolio), hence the cards. Acorns also has a referral program, which one can access in the options under the cards. Other options are Statements & History (more in depth), Transfers for the account, and, finally, Settings and Help.
Thanks for taking the time to read the article and follow my process of redesigning the Acorns iOS app! I learned a lot during this challenge and hope to continue building off of it. Maybe in the future I will explore prototyping and animations within this redesign. I hope you learned something as well or have been inspired to try your own redesign.
References
[1]
[2]
[3]
