Account Settings Portal
St. George News was integrating with RevCatch and needed to redesign its user portal. I focused on the account settings where they would keep general information and make payments.
Client
St. George News
Category
Web, UI/UX
Delivered
September 2020
St. George News partnered with RevCatch to allow for ad-free services and subscription plans.
The Problem
The account settings is where all subscribers make and update payments. It is also where you go to update passwords or unsubscribe. The current flow was very rushed and confusing. There was no clear path to updating information or changing payment methods.
Scope & Goals
- Create a cohesive design that matched their brand guidelines
- Simplify flow and provide more information to make sense of steps
- Include a method that visually displays the new subscription plan with the hierarchy of the plan chosen and the others offered
Old Site
Constraints
I was tasked with the redesign and visual code. In total, I had about 1 week for concept and implementation. I was told we could revisit later but needed this ASAP.
Flow Charts
Although this was pretty basic interaction I wanted to map out the payment and subscription plan just to make sure I didn’t miss anything.
Mobile First
I designed my first wireframes in mobile-first. This would be a new feature because they didn’t have a dynamic design originally.
Style and Branding
The styling wasn’t very strict. SGN just asked to use their orange and blue. From the previous design, I knew we had some accessibility issues. Especially, with the buttons. I wanted to incorporate a lot more white with dark text to allow for better contrast.
Subscription Plans
For the plans I wanted to allow for stacking that could work on mobile and desktop. Instead of doing the cards, I stacked the plans on top. To make sure there was a distinction between the active plan and the others, I added a checkmark indicator and color change. It was important to have 2 indicators for those who are colorblind.
Visual Code
As mentioned previously, I had to help with the visual code. I wasn’t doing any of the functionality. If you are interested in viewing the code you can download it here!
Oh yeah! I used simple HTML and CSS
Results &
Conclusion
This was a fun project to work on. I was able to accomplish our goals of simplification, cohesive design that was also accessible to everyone. I also added a bit of hierarchy and distinction between sections. The addition of a mobile-friendly modal has received great feedback from users. Plus, I was able to do the visual code which meant I could match my design mocks to a tee!
