In Flow • Starts with goals • Tells the users story • Shows user intention • Shows screen changes • Shows between the states In UI • Clear call to action • Shows progress • Provides feedback • Consistent • Maintains context • Good signage@tdavidson
Landing Page 1. Sign Up ﬁeld and button are primary call to action on screen. 2. Company logos and “Used by...” are positive social reinforcement. 3. Testimonial provides additional positive social reinforcement. 4. Image shows that service is multi-platform.
Thank You Page 1. Good message hierarchy. 2. Secondary message and activity clear.
Activate Email 1. Clear signup button call to action. 2. Secondary messaging available for non-HTML email.
Create Proﬁle Page 1. Progress bar indicates clear signage indicator of where the user is and how many steps are ahead. 2. Progress is limited to moving forward or opting out by closing the window.
Create Proﬁle Page - 1. Field completion check marks show on screen progress. 2. Password strength indicator dynamically shows strength of password and acceptableness of password. 3. Change: Add autocomplete search style functionality to Department Name and Job Title.
Follow Colleagues Page 1. Colleague form ﬁelds encourage the invitation of non-Yammer members and connecting with already established members Change: Add existing member proﬁle icons Change: One email ﬁeld that adds another as you type into it. 2. Problem: Don’t understand what this relevance score pertains to or why it is given on screen prominence.
Join Groups Page 1. Notiﬁcation button for Joined signiﬁes onscreen activity and changes. 2. Groups are both verbally described and iconically represented. 3. Call to action for adding yourself to group is simple and clear. Problem: Grouping of word, icon and call to action looks misaligned and weighted to the bottom right corner. Change: Create single icon with descriptor that acts as a call to action.
Add Your Photo Page 1. Skip option allows the user to move forward without having to ﬁnish this step. 2. Problem: Default language should be changed to reﬂect choosing a photo of yourself not the technical aspect of selecting an image from your computer. Problem: Alignment of default image and upload button are off. Change: Create single default image with description of action as call Add your profile photo to action. 3. Change: Automatically upload and preview image once selected. Allow for cropping.
Add Your Photo Page - 1. Problem: Alignment of default image and upload button are off. Change: Automatically upload and preview image once selected. Allow for cropping. 2. Problem: Save & Continue is inconsistent with prior use of (Next) button in prior screens. Change: Change button to be a “Finish Proﬁle” or “Start Yammering” button.
Logged In + Desktop App 1. Layover encourages interacting with front layer. 2. Call to action download button prominent and easily understandable. Problem: Visual style of the button feels inconsistent from other buttons due to the larger scale of the button. Change: Re-envision the button with it’s own visual style that makes it more distinct from other buttons.
In Flow • No clear goals • No user context • Not detailed enough • Focuses on features In UI • No clear call to action • No feedback • Lack of signage • Inconsistent • Breaks context • Forces user to remember@tdavidson