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.
I completely redesigned FamliNet’s branding and marketing materials for clarity and consistency.
Website UX / UI
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.
- 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)
- 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
- For example, “You cannot record an audio message because Connections doesn’t have permission to use the microphone.” What should I do now?
- Buttons are different sizes and colours
- Webapp very inconsistent with branding colours
- 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