FamliNet

My Role

Branding, UX / UI Design

About the Project

Staying connected by maintaining meaningful relationships and acquiring information that supports daily activities are leading determinants of quality-of-life and health for older adults. Common online communication channels are often too complicated for some users, especially those who have not used computer technology before. FamliNet is a Canadian startup company aiming to provide powerful tools that are easy to use and a secure messaging platform that prevents unsolicited messages.

Branding

I completely redesigned FamliNet’s branding and marketing materials for clarity and consistency.

Website UX / UI

Design Process

I completely redesigned and implemented FamliNet’s product website, later integrating analytics and SEO (Search Engine Optimization) and performed user testing, which increased sales.

I began with iterations of skeletons, wireframes and mockups for each page.
View the live site

Webapp UX / UI

Over a period of two years, I collected observations and users’ responses to the app, and wireframed solutions.

Accessibility

  • Photos in messages and My Media:
    • Starts off too small to see well
    • Once expanded, they scale inconsistently, and some photos require much scrolling to see the whole photo.
  • Medium blue colour is difficult to read on a grey background. This colour could only be used for links on white message backgrounds instead, and not be displayed on other backgrounds
  • Message text should start larger to begin with
  • Text size on some pages may be too small, and cannot be increased (Games, Movies, Music, News, Senior Safety, etc.)
  • Some buttons too small to see and tap
  • “New Message” flag: Why not a mail icon? These words can be hard to see and need to be translated

Organization, Information Architecture

  • What do my contacts’ circle colours mean?
  • (from Sunnybrook observations) The circle bubbles in the My Connections screen are ‘clickable’. After pressing a bubble and entering a Conversation with a person, their ‘profile picture’ is visible at the top. This preview image is the same as the ‘clickable’ circle bubbles but smaller. It is often confused for being ‘clickable’.
  • Services are not separated from contacts in any way to distinguish them
  • Why are form field names on the left side of each box, instead of using the industry standard, which places field names on the top of each box?
  • “Settings” button can only change the text size. Is there a reason why it does not say “Text Size” instead?
  • Sub-choices in message types:
    • There is no arrow to point at which icon the sub-choices are referring to (see iOS app for reference, which does use arrows to help)

User Flow

  • Why does it take 2 clicks to reach the Support page?
  • Tab navigation can be very confusing, and by extension, system groups that function through use of links and new tabs
  • Creating a new account:
    • User is exposed to many different fields in the form. Can be intimidating to see so many, could stop users from wanting to sign up
    • Lots of text to read
  • Sending a link takes many steps. Why must a user wait so long while the link is being checked, and then only once the very small preview loads, tap “Send” after that?
  • Not obvious that user must tap the “Save” button after “Edit My Profile”. Button is also very small and can be easily obscured
  • Video playback:
    • Not consistent with the industry standard UX of playing a video back
    • Timeline does not sync with the video playback properly

Empty States

  • For example, “You cannot record an audio message because Connections doesn’t have permission to use the microphone.” What should I do now?

Visuals

  • Buttons are different sizes and colours
  • Webapp very inconsistent with branding colours
  • Icons
    • Look very inconsistent, and some are too cluttered to see and understand clearly on small screens.
    • Border around them makes them feel more busy and cluttered
  • No FamliNet logo on the main “My Connections” page?
  • Page titles are not centered properly
  • Items in Services (such as Games) not centered properly
  • Shadows and gradients:
    • Inconsistent shadows and gradients
    • Gradients on message boxes use an outdated style
    • Issues with perceived elevation of elements (Why do buttons look flatter than message boxes?)
  • Form fields:
    • Default background colour for form fields is blue which is not industry standard, especially when the rest of the field looks similar to many forms
    • Having many form background colours can be confusing to users