PiggyVest
Tools
My Role
Redesign, Prototype, Interface Interaction.
Overview
PiggyVest is a secure online savings platform that makes saving possible by combining discipline plus flexibility to help you grow your savings. They also have verified investment opportunities where users can invest their money and get interests in a few months.
Adipiscing cras cursus eleifend est malesuada molestie nunc phasellus porta posuere suspendisse ut. Aenean arcu at bibendum egestas eget eros facilisi fringilla integer lectus mattis mollis nisl pharetra risus semper torquent. Accumsan convallis cubilia curae; dapibus dignissim dui duis eget facilisi fringilla iaculis laoreet libero lobortis luctus mus parturient porta semper ultrices vehicula velit vivamus viverra. Ac bibendum elit justo leo libero magnis sagittis sociosqu ut vestibulum. Ante arcu convallis cras dolor eros hac leo natoque nisl quis sociis ultricies. A ac condimentum consectetur cras elementum facilisi iaculis justo lacinia magnis mus parturient placerat platea rutrum sed semper sociis sociosqu suspendisse tempus ullamcorper velit vestibulum vitae vivamus. Aliquam condimentum curae; dictumst dui eu facilisis hendrerit magnis nam non parturient tincidunt ultrices urna vel. Ad adipiscing amet consequat convallis eget fames feugiat habitasse himenaeos lectus ligula lobortis malesuada mi nibh nisl ornare platea pulvinar rutrum sapien tellus torquent turpis vestibulum. Adipiscing augue congue duis habitasse luctus massa metus nascetur odio tempus urna vitae. Aenean blandit cum curabitur dolor iaculis justo lobortis massa mauris molestie mollis nam non nunc odio orci parturient pellentesque placerat porta quisque sodales ullamcorper urna velit viverra.
Discover
I'm a tad bit of a Piggyvest user myself. While going through the app one day, I noticed some flows that I thought were not effective and could be made to be more seamless. I also noticed that there were a lot of colors going on in this one app, you could be on one page and almost forget that you're on the same app. So I decided to redesign the Piggyvest app to showcase some of my design solutions.
Define
Project Goals
Redesign the mobile app and showcase areas in the user flow that can be more seamless and effective, heightening user experience.
Success Criteria
I would consider this project a success if I was able to design these UI/UX solutions and a user found it truly helpful and easier to use.
Challenge
Oh boy, I have to give credit to the design team at Piggyvest, cos redesigning was massive work, I had thought I was going to redesign the entire app, but perhaps 40 screens later and I thought, I'll just design the design flows solutions I think should be implemented and not the entire app.
Visual Style
For the visual style I explored a bit with fonts, using fonts that are different from the one used in the app. I also did some things different with the colors.
Prototype
Below are the current Piggyvest mobile app screens, and my re-design for your perusal starting with the splash screens.
For the splash screens I used vectors that are more explanatory and aid the understanding of the written content.
Next up are the onboarding screens, a couple of things I did differently was to include a progress bar that shows a user how many steps there are left they are inputting their information. Secondly I created a vertical scroll interaction so as a user is scrolling down while inputting their information, the "Create Account" heading stays in sight.
Next up is the home screen. I used different background patterns for the headers, and started re-enforcing the same brand colors used on the splash screen. I also changed the shape of the plus icon, using a shape that's consistent with the brand button.
Again on the app, there's just a lot of colors going on, I addressed that in my design. Also when you click on "turn on your piggybank autosave" in the app, it brings up a pop up where you then toogle on the autosave, but in the prototype you can just toogle on or off your autosave without the need for a pop up.
For the savings screen, the brand colors show up here again, each card having the color of it's saving option, so for example when a user clicks on "Flex Naira", and are directed to the the Flex Naira page, the colors are consistent. As opposed to the pink color in the app which is quite jarring, the Flex Naira color is green, still in line with the first set of colors the user sees on the splash screen.
On the screen for each saving options, the prototype has a design where the user can view how much they have in each of their savings account, and right under that figure, a button to quick save; where on the app the button to quick save is a bit further down.
.png)
.png)
Thoughts & Learnings
I give a lot of kudos to PiggyVest team. Navigating the app was very insightful for me and I was able to see all the work that has gone into design and developing. Redesigning the app was very challenging for me but I did come out of this a better and more knowledgeable designer.
.svg){kind=small}
.svg)
