Marcus Mobile
  • Take the UI of the current web platform on ( and bring it to the mobile platform.
  • Need to tweak the web version to avoid switching screens to navigate to the next section. Switching screen per section takes users away from the experience.
The UX
  • Define concept and challenges.
  • Design product UI and visual.
  • Take the UI of the current web platform on ( and bring it to the mobile platform.
UI Wireframe
  • Need to find a solution to not take the users out of the experience by switching screens to next section frequently.
UI Wireframe - Sign In
  • Different color theme than the main screens.
UI Wireframe - Navigations
  • Main navigations (bottom of sceen): home, account, calculator and loan history.
UI Wireframe - Main Screen
  • Divide home screen into 2 sections.
  • To not take the user out of the experience, toggle the bottom section only.
UI Wireframe - Loan Calculator screens
  • Working with the colors of this brand provided bit of a challenge due to the selection of brand colors not being complimentary.
  • Dark blue theme on the web version did not produce a good visual result on mobile as the color is mostly useful for filling large areas. This however provides a good text color.
  • For mobile must use white background as much as possible as it would provide the cleanest feeling of aesthetics. Therefore need to find a color that's complementary to white.
UI Visual - Sign in screen
  • We can use a different theme than the one used on the main screens to ease the user in with the brand.
UI Visual - Navigation
  • Branded bright blue as the primary selector as well as all primary links.
Ui Visual - Home Screen-Pre account creation
  • Branded light beige background provides a solid completentary color to white.
  • Branded dark blue as the primary text color.
UI Visual - Loan Calculator screens
Note: All examples displayed do NOT contain any sensitive data. If during any process any sensitive data was used, it has been omitted from displaying.