First National Financial LP

Corporate Website

back end development
USER EXPERIENCE DESIGN
ux audit
front end development
branding
mood boards
visual design
usability testing
personas
user flows
low-fi prototyping
information architecture

The relationship between content and visual design remains an evergreen challenge for most organizations. Do you write your content first or do you design first? Or, do you attempt to do them simultaneously? First National's website was packed with valuable content, but as a result, pages were laden with long blocks of copy without optimization for legibility and flow.

UX and UI design are ultimately not about the application of color, imagery, or typography. It's about how content and functionality are presented to the user in a way that makes them easy to consume. This engagement was primarily about reimagining the nature of the content, prioritizing, and applying emphasis where appropriate.

My role in this project

  • Conducted a competitive review of similar services available such as WeightWatchers®, MyFitnessPal® and Noom®
  • Developed an overall user flow depicting service onboarding, food logging and integration with 3rd party services
  • Designed and built an extensive set of high-fidelity prototypes using AxureRP
  • Created a detailed property map that presented technology requirements alonside user interactions within the application
  • Completed a full branding exercise including mood boards, logo concepts and associated collateral
  • Designed various app screens and user flows using Sketch
  • Liaised with app developers throughout MVP process
Mobile app visual design samples
Unlike other weight loss apps, Fitmethod aims to simplify the often laborious process of finding and logging food.

In three simple interactions, a food can be entered into the user's food diary. User behavior is rewarded with achievements and educational content around nutrition. is some text inside of a div block.
Navigation and flow samples
The "My day" dashboard provides users with an overview of their current food diary with macronutrient and exercise activity visualizations.
Visual identity mood boards
As part of the rebranding exercise, I developed initial logo concepts paired with mood boards to demonstrate the corresponding design languages.
High-fidelity prototyping
Using AxureRP, I developed an extensive set of high-fidelity mobile prototypes that simulated key tasks like onboarding, logging food and entering physical activity.
User journey mapping
I developed a hybrid user journey / technology diagram that presented user movement through the app alongside key technology decision points. This was developed in parallel with business modelling.
Competitive review
As part of my competitive review, I diagramed one of the key differentiators for Fitmethod - simplified food logging. In this diagram, the number of overall interactions are compared between MyFitnesspal (a key competitor) and Fitmethod for logging a simple food like a banana, and a more complex food like a sandwich.

Our role in this project

  • Defined a new information architecture for Residential Mortgages section
  • Conducted a content audit to identify patterns and components that would naturally extend to all section content types
  • Conceptualized and iterated on a new feature meant to position First National as a partner through the various steps of home ownership
  • Created responsive visual designs for ten templates, depicting proposed content presentation for each
  • Liaised with client team, front/back end development and project management teams

We hear the "less is more" mantra repeatedly when referring to website content. While I agree in principle, I think it's less about the amount of page content and more about devising suitable patterns to make the page itself more digestible. The long-scroll template isn't going anywhere soon, and embracing it opens up tremendous opportunities to control the pace and sequence for users to consume our content.

Interested in learning more about linear experience design? Download our introductory deck to learn what it's all about, why it's happening now and some UX patterns based on this thinking.

Download the free presentation in PDF format

View additional assets from this engagement

View more work samples

Receive user experience, product design and digital marketing updates

Sign up to receive periodic email communications from Input UX with our latest insights, downloads and tips around user experience and product design. We'll never spam you or sell your contact information to anyone, and you can unsubscribe anytime if you're not loving it.