New Jupiter UI ⚡

Hey guys just made my own version of jupiter home screen with minor visual tweaks…let me know your thougths.

10 Likes

Love the transactions tab. Icons pop out. Very Skeuomorphic!

Not a fan of the scan button placement though. Reachability issues.

2 Likes

The tabs especially Scan and pay should be at the bottom for sake of convenience in one hand.
And please another icon for deposit money instead of this plus icon.

Overall its nice…

4 Likes

Nice one vro :ok_hand:.

2 Likes

Now comes the expense analysis part…

5 Likes

This. Is. Epic!! Good job!
@Ranjeth

The QR code scanner however should be at the bottom. No? It’s the most clicked button to make quick payments when you open the app.

If it’s on the top, we might have to stretch our thumb a bit :sweat:

What are the first 2 icons though? Lemme guess.

  1. Bank statements
  2. No idea but looks like a forward button on Telegram :eyes:
  3. Scanner
  4. Pots
  5. “+” is probably more options, but we need to think about how to display it. Correct me if it’s not more options.

Moving on to the transaction details on the home, you must be seeing random alphanumeric statements. We’re planning to change this.

For the Analysis part,
This is a great representation. But this includes all the expenses, we might need to show incomes as well.
So maybe a double tab?

Things I’ve learned from these designs.
You as a user,

  1. Removed the “Do more with Jupiter” banners. I guess you found them annoying. Seems like they’re in the way?
  2. You wanted better headings for transaction details on the home page
  3. Better representation for insights, We’re working on it!
    Please add on if I missed anything :handshake:t4:

But really, appreciate the effort. Lemme share this with our product and design teams.

2 Likes

Icons explanation in order:

  1. Bill payments (I know it’s an yet to arrive feature :wink:)
  2. Send Money
  3. Qrcode scanner (I completely agree with the stretching thumb part)
  4. Pots
  5. Add/deposit money

Do more on jupiter is replaced with “Explore Jupiter>>” at the bottom.

Yes maybe a dropdown or another tab for income may be added.

and particularly I like the inner and outer shadow visual design under headers and icons…and thank you for your response.

4 Likes

Ah! That makes more sense! Thanks.

1 Like

overall great job mate :ok_hand::ok_hand:
quite an improvement over the current ones

2 Likes

1 Like

I love it ! Such an amazing mock up. I would choose a different font though.

3 Likes


So I had this idea a few months ago for a quick access tool on the app.
Something like a Jupiter “H.U.D”. A tool that can give you quick access to the options that are not upfront.

  1. There can be a floating icon on the home screen (We can make it movable if needed - Reference Facebook Messenger chat bubble)
  2. Tapping on this, highlights the options and blurs the background.
  3. You will get 5 options when you click on it.

The problem with this one is:

  1. It may look distracting to move it around. It may block and hover on some texts.
  2. SBI had done something similar, didn’t really work out well.
4 Likes

Its kind of nice feature. I use my phone 90% time with one hand.

That feature must be optional. Those who need it can use enable it from settings.

My screensize is bit large. Now i use assistive touch app from playstore for faster usage. Everything to me now is gestures and shortcut. :joy:. The above
feature will be useful for me :sweat_smile:

2 Likes

Its a good idea for sure. But when it comes to banking and finance app I prefer the UI as close to clean and minimalistic possible. But at the same time the app should represent all finance related options/data in a clear and intuitive manner on demand by the user.

I will try to do another mockup very soon which will be completely different from the current UI but with the same space-fire orange theme. I hope everyone gives feedback on that as well.

Thank you

2 Likes

This is great!

My review:- There is Expense catagory but also incoming fund catagories like refund, salary, cashbak, reward etc.

What about completely filled colorful circle (with catagory name and per cent in it) instead of ring.

3 Likes

Appreciation for you work! But there should be option for Turn on or off this Quick ball some might be found it quick and handy but for someone like me it’s also a quite annoying popup moving around screen. All these details ok in Three Line menu button in upper left corner and beneath account balance.

3 Likes

Here’s my another take on home screen… I assume Bank details can be shown once we click the profile icon. @Shawnpinto

RAW Screenshot

UI in my hand…

2 Likes

Hi @Ranjeth ,

Firstly, absolutely love the initiative to express your ideas on our Home Page
:raised_hands: :slightly_smiling_face:

I’m part of the Product team at Jupiter and I work on the Home Page, so this was exciting for me to see. Particularly liked the detailing on several components like the icons, white spacing to give a clean minimal vibe & your understanding of the tradeoffs in a banking app - need to be minimal and clean + solve key user jobs.

Love to share some of our Product philosophy and principles with respect to the Home Page.

We use the User Jobs framework , to understand the most important jobs that need to be done , this highlights 5 top abstracted job themes

  • Reduce time to view important financial information (account balance, recent transactions, other lines of business])

  • Reduce anxiety about critical activities that are in progress (tracking-related activities such as verification and card delivery, compulsory actions such as activating UPI, ordering cards, and SOS activities such as downtimes, failures)

  • Increase awareness of necessary upcoming payments/activities (SIPs, SIs, Payment dues, UPI requests)

  • Give users easy access to quick and consistent actions (Scan and Pay, Save money, Invest money)

  • Enable easy discovery of relevant financial services offered by Jupiter

Overtime we wish to be able to solve all these jobs, continuously looking to get better at solving them by learning more from our users.

From a purely design perspective -

  • Interesting to see that you put a ‘+’ sign , that opens up potentially to a list/view of different features/actions - this is something we are exploring. Love to learn more, if you can elaborate why you think this would be good for a user/how it would look.

  • Scan & Pay - While some apps have it in a similar position as you suggested, we have got very strong user feedback that it should be bottom screen.

  • Recent transactions - Nice. Any thoughts on a horizontal recent activity? Or more minimised/lesser entries to reduce scroll for lower sections.

Look forward to keep hearing/seeing more Ranjeth! :slightly_smiling_face:

6 Likes

Thanks for taking notice…have you seen this latest screen?

1 Like

@Ranjeth This is an interesting layout :astonished:
However, this might have allignment issues.

My thoughts:

Balance and quick icons
If the balance and networth is on the left and the quick icons are on the right, it doesn’t seem symmetrical. Y’know what I mean?
Think about right and left handed users. Right handed users might find this easier since the quick icons are on the right.

Love the notification icons. Our team did have this idea. Sometimes, notifications do get lost and users forget what was sent.

Bottom tab
This tab looks visually better now. Love the idea for the raised QR code to show that it’s more important (Feels like it’s highlighted)

Showing the profile pic instead of the hamburger button is a great idea! But not right now since it’s just letters. Once this feature comes out, we should add it on the home page :slight_smile: