My Home Screen Redesign

Here’s my proposed redesign of the Home screen. I never found the current home screen useful (no offense to the Envel team🥺) so I brainstormed a bit. Please know I am saying all of this with hopes to improve Envel out of love. I apologize in advance if I sound arrogant lol. Regardless, please let me know what you guys think!

I know some people are asking for the Envelopes screen to be set as the Home screen but I don’t think that’s the ideal move. I’m assuming users are suggesting this because the Envelopes screen is the best screen to see your account totals. When it came to Simple’s mobile UI (and other banks), the Home screen was usually a combination of: account totals at the top, followed by all transactions underneath. But since Envel has more features than your average bank, specifically Envelopes, it makes more sense for Envel to have things separated into more screens to prevent things from getting cluttered for the user. Having said that, I also think a little redundancy can be useful in some instances. When I think of a Home screen for most apps, I tend to think of it as a “Dashboard” where I can open the app and get a quick glance at 2 things: important information and anything thats new/modified. Despite users being excited about moving money between Envelopes (and they should be, it’s an awesome feature), I’m pretty confident that when it comes to “total app opens”, users are going to be mostly trying to check in on 2 things: “do I have enough money to pay for X” and “when the heck is more money coming in?” Another way of putting it is: “before I buy this thing, can I afford to buy it right now?” and “when is more money going to land in my account so I can also buy this other thing?” The core of the Envelopes screen is about managing money (transfers between envelopes, etc). Users shouldn’t have to click on the Envelopes tab just to check on these basic numbers, they should be right there when you open the app. But the Home screen can also be a great place to display other kinds of information to give us that “dashboard vibe”.

SECTION 1

My biggest frustration with Simple and other banks was having to remember how to “read” my different account balance numbers. “What do they mean again? Safe to spend? Pending? Goals? Protected Goals? Total? TOTAL Total?” Sorry but that’s too many numbers for me to feel safe to spend anything without consulting my banking thesaurus lol. So in my redesign, I wanted it to be SUPER easy to understand what the heck is in our accounts at a glance, no more guessing, no more mental math! Total = actually means total, AKA every cent in your Envel account. Underneath is a colorful bar showing you how that total is distributed between all of your active envelopes. Any envelope that has nothing in it will not be shown to keep it simple (pun intended).

SECTION 2

This total in section 1 does NOT include pending transactions. Everyone’s asking that one life changing question: “Can I spend that pending money now or do I have to wait?” So below I have a section for all income based transactions that have not yet cleared. The longer a transaction will take to clear, the warmer the color will be and for fewer days, the color will get closer to green. This will give users a quick understanding, not only on how much they’re getting (as seen in the Transactions screen) but also WHEN the money is to be expected so they can plan ahead and the colors only make that more obvious. Humans are visual creatures, let’s rock those colors so our brains can stop hurting :rainbow:

SECTION 3

Lastly, I included an “inbox” for anything new/urgent, such as debited charges, declined/reversed charges, support messages, app updates/news, status of a debit card delivery, new nearby ATM locations (future feature), etc. And since Envel does have a bug right now where most notifications don’t work, including some redundancy here on the Home screen will help make sure users don’t miss out on those new (and sometimes urgent) things the next time they open the app. Users should be able to manually clear every transaction here to make room for new ones (think: email inbox zero).

CURRENT HOME SCREEN

Card Link

This should live in the Debit Card screen. An idea for still keeping it on the Home screen could be if the debit card is linked to an envelope other than Cash, then a flashy header (think : moving neon caution tape) would suddenly appear at the very top with remaining time that the link will be active before it reverts back to the Cash envelope again. This could be a useful reminder if a user is making 2 purchases back to back and they need to switch back to the Cash envelope before the timer runs out. Users could set how long the default timer goes for in Settings.

Visual Analytics

As for the charts & graphs, I think they should live in the Transactions screen (as a hidden feature) or only be made available for the upcoming web app where users will be able to view their data on a larger screen. I’m a big fan of visuals but I never found these useful, at least not in the current form factor.

OTHER NOTES

Header

  • Remove the registered trademark symbol, it’s ugly, hurts the aesthetic of the app and also shouts “we’re a traditional bank!”
  • Remove the debit card icon for Card Link and keep that functionality in the Debit Card screen.
  • Move the Settings tab icon to where the debit card icon is
  • Slide the Notifications bell icon so that it’s in between the Autopilot icon and Settings icon
  • So in total, the new header would look like this from left to right: Autopilot > Notifications > Settings

Footer

  • Envelopes - keep
  • Debit Card - move to last tab slot, replace with dedicated screen for external transfers and future features like check deposit & ATM finder
  • Home - see above
  • Transactions - keep
  • Settings - move to the Header, replace with Debit Card

So in total, the new footer would look like this from left to right: Envelopes > External Transfers > Home > Transactions > Debit Card

Misc.

  • Please change the sky blue accent color theme (in dark navy mode) back to what it was before, this new shade of blue is meh, you had it right the first time (which episode of The Office am I referencing here? lol)
  • Transactions need icons and color schemes that actually means something lol. Why not keep it simple and just use red for debit and green for credit? And then use different icons based on the type of transaction, like an envelope icon for envelope transfers, etc.

I will probably have more ideas but this post is already getting long, whoops! :stuck_out_tongue: I hope everyone has a good weekend ahead and I hope those autopilot robots bring you good luck! :robot:

3 Likes

Hey Jeff,

Thank you for sharing this here as well! I really love the account total breakdown bar at the top, I think this type of visualization would be really useful to our users.

Cheers,
Jacqui

3 Likes

I love the envelope distribution chart! It tells me exactly what I want to know, right quick. I also like that the “grand total” is there, but small. I don’t want my total to be too obvious. I might get cocky and spend more than i have!

2 Likes

I love it,
Very well designed even the grand total shows the amount that’s left all together

Two thumbs up for me :blush::+1:t5::+1:t5:

2 Likes

I just wanted to clarify something in my original redesign post:

When I was talking about how Simple’s different balances were confusing, I left out details on why I felt that way.

The (original) Safe-to-Spend equation is simple (pun intended again, sorry):

Total Balance (minus) Pending & Scheduled (=) Safe-to-Spend

Simpler way of looking at it : All the money in your account (minus) allocated money & uncleared money (=) unallocated & cleared money

As seen in the graphic I made above, originally Simple included Pending Transactions in the Total Balance, meaning that this Total Balance, in banking terms, was not the same as Available Balance (cleared total). Technically this Total Balance would be also known as Current Balance or Pending Balance.

The money you have scheduled, is already cleared/landed in your account but just hasn’t transferred out yet. You could still technically cancel the scheduled bill payment, or adjust the amount or date - it’s your money, you have control until it leaves. Scheduled payments are essentially the same as goals/expenses/envelopes but with an added automatic transfer date to an external party.

However, Pending is not the same as Scheduled since Pending is money you don’t have control or ownership of until the money clears.

Example 1 - Incoming Money - Your bank may not let you spend pending income until it clears. As long as Safe-to-Spend did not include this pending income, you would be safe. I can’t remember what Simple did here back in 2012. So it may or may not have been at issue at that time.

Example 2 - Outgoing Money - You paid for a restaurant but also added a tip. The tip will get added later. This means that your Safe-to-Spend will not be accurate until this restaurant transaction has been adjusted to include the tip. Obviously some transactions would take longer than others to adjust. I recall Simple being faster than other banks here but it wasn’t always adjusted within the same day. This would mean that Safe-to-Spend was not truly a safe number but more of an estimate when it came to pending outgoing transactions. When it came to sending checks, luckily, up until recently, they would mail physical checks on your behalf, which would automatically be included under Scheduled. Then within the last few years, they replaced this feature with physical checks that you would have to write and mail yourself andddddd I think you get the idea lol.

Am I being knit-picky? A little bit, sure. But this is MoNeY we’re talking about. Most of us can’t afford (literally) to make mistakes. I know Simple didn’t charge an overdraft fee but 3rd parties, like credit card companies and your landlord company, would.

Then in around 2015, with Simple’s desktop UI refresh, they removed Pending Transactions from that same bar, and changed Total Balance to Available Balance. I don’t remember if they announced this change in their blog but my guess is they made this change because they added Goals. Now users had 3 categories to keep in mind - pending, scheduled and goals. I think Pending transactions were subtly included in one of the balances after this change but I’m not totally sure. I do remember having to do some mental math at times. But now the issue became this new mindset that was brought along with the addition of Goals.

I wasn’t the best when it came to my Goals in my Simple account. I didn’t always consider that money as “100% definitely” set aside for things. Maybe you can relate? So because of this, when I would glance at my Safe-to-Spend balance, I would also look at my (total) Available balance. I would sometimes think to myself “I know I put some money in a few goals but I technically could still spend that money right now if I wanted to” and I was correct because if I spent beyond what was in my Safe-to-Spend balance, the missing difference would be pulled from my Goals. Simple had this feature in place as a safety net to help users avoid over-drafting.

And this is where Envel comes in. Envel keeps things simple (sorry😇) by just using the term “envelope” for all of your accounts. Envel lets you decide how you want to think about your money. What would have been called “Safe-to-Spend” is just called Cash. Envel is trying to help you spend wisely and ultimately save you more money overtime. As much as I loved Simple, to me, the term “Safe-to-Spend” sadly ended up ultimately becoming a fallacy. Also, the phrase is worded in a way that almost encourages spending. This is why I believe Envel is on the right path with their envelope system and naming conventions. Envel wants to make sure you have so much extra padding in your envelopes that eventually, you won’t even need to look at your balances! Total AI robot takeover! But all jokes aside, this brings me to my last point and how this relates to my Home screen redesign:

I believe Pending (and Scheduled) Transactions still need to be up front, transparent, and obvious. This is why I included Pending Transactions on the Home screen. I forgot to include Scheduled Transactions in my original redesign but I will get another mockup done soon to show what that could also look like. Not all banks follow the same rules so I think it’s crucial that every Envel user knows how to interpret any money that is not cleared in their Envel account. This is why I like the idea of the Home screen separating your (cleared) Account Total versus your (uncleared) Pending Total. I do think this proposed section could be smaller. I’m now thinking the version in my redesign could be an “expanded” view when the user taps on it. I also think that this section should definitely be included in the Transactions screen, pinned at the top. In this case, it would make more sense for the Home screen version to be smaller.

I know that my redesign only included pending income transactions. Envel would still need to find a way to address pending outgoing transactions that include things like restaurant tips, maybe some kind of automatic buffer, like an “invisible ghost envelope” that pads the transaction to account for the possibility of that transaction getting larger to avoid over-drafting instead of money being pulled from your Emergency Envelope before the transaction clears. Some neobanks like One, for example, give users an overdraft credit. I’m thinking some sort of hybrid feature would be cool. I’ll go over this idea in a separate post. :ghost:

P.S. I mostly pay for things with credit cards so I admit I don’t have experience using Envel with scheduled bills or pending transactions that include tips so feel free to let me know if I am wrong or missing something here with any of my assumptions about how Envel handles these types of transactions.

Once again, sorry for the long rant. I hope this makes sense. Let me know what you guys think :sleeping:

1 Like

Hey Yen-ri,

Welcome to our forum, we are super excited to have you on board! And thank you for the feedback, our design team is in the process of going through this redesign!

If you have any other feedback or suggestions about the app, feel free to post anytime!

Best,
Jacqui

2 Likes

Hey Jeff,

No need to apologize, ever! These clarifications are actually super helpful to our design team: the more detail, the better!

Cheers,
Jacqui

1 Like