Account Dashboard
Mobile app and Web (re-design)
Tools
Sketch & Zeplin
Time frame
About 6 months
Personal Contribution
Initial design exploration with new brand guidelines.
Lead the way for final delivery, user testing, and development.
Constant collaboration with developers during grooming.
Constant updates to the component library (colors, fonts sizes, icons, etc).
The Challenge
Re-design the portal page.
Reimagining and Implementing a new design system to UI experience.
Thinking outside the box without considering development time.
Making the browser and app experience look consistent.
Existing Portal Design
New Brand Re-Design
(look and feel)
Process
Quick competitor analysis and wireframe
We had two days to design a new look for the portal. First, the designers were tasked with coming up with a design. Then, after a few internal reviews with the creative leads, we presented the first initial designs to the client. I started with a quick hand-drawn wireframe to quickly put down my ideas and share them with my Creative Director before diving into Sketch. I also researched what the competitors were doing, like Chase Bank, Capital One, etc.
Data insight and design influence
Our Product and Project manager started a list of data points marked as a "must-have" and included in the new design under the client's direction.
These data points had a significant effect on how I approached the design.
New Features
"Your daily to-do's" tile was added as a new feature. It leads the way for possible future experiences offered, keeping the user needs in mind as we all grow more and more reliant on our digital platforms to do our tracking for us.
FICO® is a vital product offering from Discover. Hence, I gave FICO a very prominent space on the dashboard. It serves as a quick link for the users to their FICO page and displays their FICO score reducing the number of clicks to see this score.
Below FICO, a web targeting tile was added so Discover could advertise new offerings or new products to their users regularly.
Another nifty fun feature added to the dashboard is the "re-order" feature that allows users to re-organize their accounts as they would prefer to see them. The interaction would let you drag and drop the tiles above or below per the user's choice.
Implementation of New Design System
Our first attempt to put the new brand design into action was the Dashboard. The new system relies heavily on circles with three primary colors.
The greeting marquee on top of the page introduces its first shape language from the new brand guide by adding a circular edge on the bottom right, which works well for a responsive design system. All the tiles were rounded to keep with the new design guide and the use of circular shapes.
More circular shapes were used to highlight the product. A yellow semi-circle behind the card art gives the product the emphasis it demands and needs.
The use of midnight blue, yellow, and orange was carefully thought through and varied not to overwhelm the page with a big block of colors everywhere but more intentional and purposeful.
Post client review
Post client review, we learned a few new things:
They will not be able to treat FICO as we have designed it to be.
While they loved the idea of “Your daily to-do’s,” Discover could not implement it with their dev team in the allotted time frame for this project.
Solutions
FICO was added as a tile of its own in between account tiles. It has a reserved spot, and the user can easily access it from the dashboard.
Daily alerts are removed as a tile and added below the balance tile. We can now add this new feature for the user without adding an extra alerts tile.
The Final outcome
Though this design was by another designer, I took charge of taking this project to its complete implementation and final release. Initially, we worked together to create all one-off scenarios, but it was eventually under my lead.
In addition, the idea of “Your daily to-do’s” as a new section was not possible in terms of development for MVP1, so we came up with an in-line treatment for such reminders.
Finally, all these initial designs helped us create the new pattern library. I was in charge of keeping the patterns up to date in my file and collaborating with the design team to keep up with new library updates.
All possible cases for just single sign-on page and the state of the sketch file.
User Testing
Towards the end of all feasible design feedback and iterations, a Usability Test was written. Discover’s internal team wanted to see if the suggested new placements and a swipeable tile would cause any usability issues with users. The usability test determined a few expected reactions.
The users did not understand that the tile could be swiped both left and right exposing different information related to their accounts.
Solution
We created a quick animated tutorial to educate the user. It would pop up for the first three times the user logs in and will be dismissible.