inked voices
TRANSCRIPT
REDESIGNING THE USER EXPERIENCE TO INCREASE SIGN UPS
ADRIAN LIN, JONATHAN QUINTUÑA, MATT FINDER
THE TEAM
Adrian LinUX Designer
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
Jonathan QuintuñaUX Designer
Matt FinderUX Designer
INKED VOICES - BACKGROUND
• Helps writers do more writing and do it better.
• Connects writers with small, online critique groups
• Webinars on craft
• Professionally facilitated workshop groups
• Helps writers stay accountable
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
THE OPPORTUNITY
• Inked Voices has expanded its offerings.
• Added additional nonmember pages
• No longer presents a single cohesive message.
• Success depends on sign ups, which can increase as a result of redesigning
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
CURRENT NONMEMBER PAGES - HOME
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
PROBLEM STATEMENT
• Concise, communicative nonmember pages
• Showcase Inked Voices’ features
• Motivate users to sign up
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
REDESIGN PREVIEW
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
COMPETITIVE RESEARCH
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
Community and Platform
Platform with No Community
Community with No Platform
FEATURE COMPARISON - COMPETITIVE
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
Sign In Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Primary Nav. Yes Yes Yes No Yes No Yes Yes No No No NoSecondary Nav. Yes Yes Yes No No No Yes No No No No No
Footer Yes Yes Yes Yes No Yes Yes Yes No Yes Yes Yes
Log In Yes Yes Yes Yes Yes Yes Yes No Yes Yes Yes YesSearch No Yes No No No No Yes Yes No No No No
Accountability Yes No Yes Yes Yes No Yes No No Yes Yes NoVideo Yes No No No Yes No No No No No No No
Create Groups Yes Yes Yes Yes No Yes No No Yes No No NoJoin Groups Yes Yes Yes Yes No Yes Yes No Yes No No No
Subscribe Yes No No No No Yes Yes Yes Yes No No NoFeedback Yes Yes Yes Yes Yes Yes Yes Yes Yes No No No
Pro Feedback Yes No Yes Yes Yes No No No No No No NoJoin Writing Contest No Yes No Yes Yes No No No Yes No No No
Pro Learning Yes Yes No Yes No No No No No No No NoSummit Writing Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
Read Writing Yes Yes Yes Yes Yes Yes Yes Yes No Yes No YesExplore by Genre No Yes Yes No No No No Yes No No No No
Change Language No No No No No No No No No Yes No Yes Privacy Yes Yes Yes Yes Yes Yes No No No Yes Yes No
HEURISTIC EVALUATION - COMPETITIVE
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
5
Visibility of System Status 321Match Between System
and Real World 541
Consistency and Standards 451
Aesthetic and Minimalist Design 13
User Control and Freedom 242
Error Prevention 452Recognition Rather than Recall 321Flexibility and Efficiency of Use 152Help User Recognize, Diagnose,
and Recover from Errors 124Help and Documentation 545
Sign Up, price page input does not notify user instantly if there is a
mistake
Very wordy, Ink On?, Resources?
Primary, secondary, and footer navigation are not consistent
across pages
Visual design is aesthetic and minimal, but content is
overwhelming
No control over vast amount ofinformation and no redo in case
of mistakes
Main Buttons are too small, there’s no prevention from
clicking on annual or monthly payments.
Every page with links to scroll has to be recalled to escape
Lacks navigation on sign up page, there is no sorting of information.
Very few errors can occur because all information is in the page
layout.
Direct email, or message throughdirect help center
Input in search and sign up does not give the user a system status
if they are correct or not.
Very simple wording, has real world conventions.
It is consistent across all pages using constraints.
Advertisements ruin the experiences, also too much
secondary content.
While searching for book or ebook, a reset button fixes your
search query
For every book search text field, there is a pop up or description to
prevent errors.
Buttons are big enough to notice but a lot of recall occurs when
clicking on books.
Very flexible, has a footer, sort, and a search to access content
faster.
Error message did pop out but does not indicate what occurred.
Forums and videos help users.
When inputting info the “close out”.
Has understandable wording, human, ex: Hi, Glad, for you
Consistent navigation very organized
Great spacing across content. Information is packed in
summarized blocks
Many of there links take you out of there website and there no control over if you what to go
back
Has great design for error prevention. Hovering world give a button or link a big red bold color.
Besides the home page not having a nav its easy to recognize
what to do
Not flexible, there’s no sorting information
When link takes you to another page that does not exist it does
not help you recover
FAQ, and dedicated page to contact the owner.
15
Negative Impact
Positive Impact
Legend
COMPARATIVE RESEARCH
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
LAYOUT ANALYSIS - COMPARATIVE
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
Home Page
Sign Up Page
Pricing Page
SCREENER SURVEY - VALIDATING NEEDS
• 71.8% are or have been active members of writing groups.
• 91.6% love receiving feedback about their writing.
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
INTERVIEWS
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
• From 96 responses, we interviewed 14 candidates in person and through video chats
• Inked Voices users and non-users
• Professional writers, amateur writers, and writing teachers, and non-writers
• Varying experience with writing groups
GLOBAL NAVIGATION INCONSISTENCIES
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
Ink On
Writing Groups
Dashboard
Home
About
Home (scroll down)
CARD SORTING / IA
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
INTERVIEWS - AFFINITY MAPPING
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
INTERVIEWS - AFFINITY MAP FINDINGS
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
Self-motivated / Doesn’t Need External Pressure / Other People
Mood / Reason-Based
MOTIVATIONS
Knowing Skill Level is Important Wants / Likes Help Finding Groups
Doesn’t Know What Pro Groups Are Doesn’t Need an Explanation of Writing Groups
Likes Small Groups Unsure of What Will Happen When Joining
Values Consistent Contribution Values Respect for Others
Values Adherence to Rules
GROUPS
Liked video / It’s Clear Too Long
Doesn’t Watch Videos / Prefers Text Didn’t Want to Watch the Video
Didn’t Notice the Video
VIDEO
It’s visually appealing It’s clear
Wish App Had Full Functionality
INK ON APP PAGE
Only Shares Some Work Doesn’t Share Any Work
SECRECY
Too Much Text Make Important Info More Readily Available
Needs Modern Images Wants more images
Likes Current Images Didn’t Notice the Video
HOMEPAGE
INTERVIEWS - AFFINITY MAP FINDINGS
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
Saddened by Negative Feedback Likes Honest and Tough Feedback
Doesn’t Like Feedback From Strangers
FEEDBACKDoesn’t Have Time
Lost Interest
REASONS FOR NOT WRITING
Too Complicated Feels Annoyed
TOUR PAGEIt Varies / Depends
Multiple Times A Week Every Day
WRITING FREQUENCY
PERSONAS
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
Jane - The New User Aldous - The Current User
Age: 43Occupation: MarketerLocation/Hometown: United StatesTech-Expertise: Mid RangeDevices: PC, Android
Maya - The Teacher
Age: 36Occupation: University English ProfessorLocation/Hometown: London, EnglandTech-Expertise: Mid RangeDevices: MacBook, iPhone
Age: 28Occupation: Business ManagementLocation/Hometown: Boston, MATech-Expertise: Mid RangeDevices: Desktop
About Jane:Jane writes fictional short stories, and is currently looking for a writing group to critique her work. She knows great feedback will make her writing better, and wants to find a group of writers who are experienced enough to give her the quality of feedback she needs.
Pain Points:big anonymous groupsgetting bored with lots of stimulidoesn’t currently have a group to workshop writingis a writer, and doesn’t need to know what a writing group is
Needs / Likesways to get himself accountablesmall groupsknowing the experience level of other membersto find an online group because doesn’t have one in personis impatient, needs important info quicklyclean, minimal design
How We Can ServeBreak up long videos into shorter videosShowcase accountability featuresSay what types of groups are on the siteDisplay the skill level of other writersEmphasize small, intimate groups
6/10
4/10
Jane — The New User
Age: 28Occupation: Business ManagementLocation/Hometown: Boston, MATech-Expertise: Mid RangeDevices: Desktop
“I want people to give my writing more thoughtful feedback”
Level of writing experience:
Level of writing group experience:
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
PRIMARY PERSONA
FEATURE PRIORITIZATION
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
• Emphasize small, intimate groups • Reduce complexity • Display skill level of other users • Show info about drafts and refining
• Highlight accountability features • Exhibit ability to set deadlines • Reduce video length
• Show site activity • User happier-looking drawings
• Enable keyboard shortcuts for editing • Required reading for groups
GOOGLE ANALYTICS
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
• 95% of current users use desktop (and laptop) computers to access Inked Voices
• 66% of new users viewed the home page, of which 40% left without viewing other pages
10%3%2%
5%2%3%2%5% 66%
Homepage
About page
Inked On
Writing Groups
Pro Groups
Resources/ Writing
Resources/ Lecture
Tour Page
Pricing Page
SITE MAP
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
PEOPLE LOVED THE INK ON PAGE
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
Ink On (current)
HAND SKETCHING
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
Home (new)
INITIAL DIGITAL WIREFRAMES - HOME
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
Home (current) Home (new) Home (current)
Group (current)
INITIAL DIGITAL WIREFRAMES - PEER WRITING GROUPS
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
P.W.G. (current) Group (new)W.G. (new)
Group (current)
INITIAL DIGITAL WIREFRAMES - PRO GROUPS
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
Pro Groups Group (new)Guest Workshops
USER TESTING
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
• We conducted 7 user tests
• Amateur writers, writing teachers, and non-writers
• Returning participants from the original site test, and new participants
• Varying levels of tech expertise
• Varying experience with writing groups
ISSUE 1 - HOME PAGE TOP PANEL
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
• “One way I would improve it is making sure that anything that is supposed to grab my attention is in a larger font.”
• “Have more detail on the descriptive lines around the image on home”
ISSUE 2 - WORKSHOPS & EVENTS PRICE
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
• “There's no dollar signs on these, which is weird, I think having the price be on here is more natural”
ISSUE 3 - DIFFERENTIATE LINKS IN HOME PAGE COPY
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
• “It would be better if it was a different color”
• “I didn't know you could click on it … I only thought you were trying to emphasize it, not link it"
ISSUE 4 - THANK YOU PAGE
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
• “The words are tiny, and I’ve had LASIK"
HOME PAGE - ANNOTATED
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
WORKSHOPS & EVENTS - ANNOTATED
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
STORY
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
• When Jane is writing a new short story, she wants to sign up
for an online writing group so she can receive feedback
about her writing from other writers at her skill level.
FINAL DESIGN - PROTOTYPE WALKTHROUGH
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
NEXT STEPS
SHORT TERM
• Send list of education-specific feedback
• Continue testing our design for further refinements
• Ensure design intent is carried through the development phase
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
LONG TERM
• Launch! • Test launched design to
validate success of redesign • Implement version of Inked
Voices for teachers and students
• Design responsive version of site for mobile
• Investigate if it would be worthwhile to create a native mobile app for Inked Voices
ADRIAN LIN, JONATHAN QUINTUÑA, MATT FINDER
THANK YOU!AND START WRITING!
ADRIAN LIN, JONATHAN QUINTUÑA, MATT FINDER
APPENDIX
STYLE GUIDE
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
New Inked Voices Styles
home intro h1:‘Lato black’
#663366 Do more writinghome-p:
‘open sans’#333333
15px , 22px
48px
Margin-Bottom: 30px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at porttitor risus. Vivamus tristique enim arcu, sit amet pellentesque enim scelerisque vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at porttitor risus. Vivamus tristique enim arcu, sit amet pellentesque enim scelerisque vitae.
Home Page Only
Site-wide
h1: ‘Lato bold’#663366
32px, 34pxuppercase
DO MORE WRITING.h2:
‘Lato Bold Italic’#707070
24pxMargin-Bottom:
10px
Find groups or individuals
with shared
h3:‘Lato Bold Italic’
#333333 20px
Find groups or individuals
with shared
h4:‘Lato Bold’
#707070 18px
Find groups or individuals with shared
h5:‘Open Sans Bold’
#333333 14px
Find groups or individuals with shared
P:‘Open Sans Reg’
#333333 13px
Find groups or individuals with shared
Links:‘Open Sans Reg’
#0a5c7d 13px
Find groups or individuals with shared
Small Text:‘Open Sans Reg’
#707070 11px
Find groups or individuals with shared
Buttons: Standard
All buttons use:
Font Size: 14px Open Sans Padding: 10px 30px
Search
Search
PRO
Critique
Search
Search
Search
Search
Buttons: Labels
Solid:
Hover:
Cancel
Cancel
When there are two action buttons side by side.
Search Show All Groups Search Show All Groups
#7e4e7f
#9e7aa0
#0a5c7d
#5299af
#83a24c
#b4c683
#afafaf
#707070
Negative Action:Default Positive Action:
#fdc52e
Sign Up
Buttons: Other
Underline appears on hover state
Margin-Bottom:10px
New Inked Voices Styles
home intro h1:‘Lato black’
#663366 Do more writinghome-p:
‘open sans’#333333
15px , 22px
48px
Margin-Bottom: 30px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at porttitor risus. Vivamus tristique enim arcu, sit amet pellentesque enim scelerisque vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at porttitor risus. Vivamus tristique enim arcu, sit amet pellentesque enim scelerisque vitae.
Home Page Only
Site-wide
h1: ‘Lato bold’#663366
32px, 34pxuppercase
DO MORE WRITING.h2:
‘Lato Bold Italic’#707070
24pxMargin-Bottom:
10px
Find groups or individuals
with shared
h3:‘Lato Bold Italic’
#333333 20px
Find groups or individuals
with shared
h4:‘Lato Bold’
#707070 18px
Find groups or individuals with shared
h5:‘Open Sans Bold’
#333333 14px
Find groups or individuals with shared
P:‘Open Sans Reg’
#333333 13px
Find groups or individuals with shared
Links:‘Open Sans Reg’
#0a5c7d 13px
Find groups or individuals with shared
Small Text:‘Open Sans Reg’
#707070 11px
Find groups or individuals with shared
Buttons: Standard
All buttons use:
Font Size: 14px Open Sans Padding: 10px 30px
Search
Search
PRO
Critique
Search
Search
Search
Search
Buttons: Labels
Solid:
Hover:
Cancel
Cancel
When there are two action buttons side by side.
Search Show All Groups Search Show All Groups
#7e4e7f
#9e7aa0
#0a5c7d
#5299af
#83a24c
#b4c683
#afafaf
#707070
Negative Action:Default Positive Action:
#fdc52e
Sign Up
Buttons: Other
Underline appears on hover state
Margin-Bottom:10px
New Inked Voices Styles
home intro h1:‘Lato black’
#663366 Do more writinghome-p:
‘open sans’#333333
15px , 22px
48px
Margin-Bottom: 30px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at porttitor risus. Vivamus tristique enim arcu, sit amet pellentesque enim scelerisque vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at porttitor risus. Vivamus tristique enim arcu, sit amet pellentesque enim scelerisque vitae.
Home Page Only
Site-wide
h1: ‘Lato bold’#663366
32px, 34pxuppercase
DO MORE WRITING.h2:
‘Lato Bold Italic’#707070
24pxMargin-Bottom:
10px
Find groups or individuals
with shared
h3:‘Lato Bold Italic’
#333333 20px
Find groups or individuals
with shared
h4:‘Lato Bold’
#707070 18px
Find groups or individuals with shared
h5:‘Open Sans Bold’
#333333 14px
Find groups or individuals with shared
P:‘Open Sans Reg’
#333333 13px
Find groups or individuals with shared
Links:‘Open Sans Reg’
#0a5c7d 13px
Find groups or individuals with shared
Small Text:‘Open Sans Reg’
#707070 11px
Find groups or individuals with shared
Buttons: Standard
All buttons use:
Font Size: 14px Open Sans Padding: 10px 30px
Search
Search
PRO
Critique
Search
Search
Search
Search
Buttons: Labels
Solid:
Hover:
Cancel
Cancel
When there are two action buttons side by side.
Search Show All Groups Search Show All Groups
#7e4e7f
#9e7aa0
#0a5c7d
#5299af
#83a24c
#b4c683
#afafaf
#707070
Negative Action:Default Positive Action:
#fdc52e
Sign Up
Buttons: Other
Underline appears on hover state
Margin-Bottom:10px
LAYOUT ANALYSIS - COMPETITIVE
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
Home Page
Sign Up Page
Pricing Page
FEATURE ANALYSIS - COMPARATIVE
opportunity, goals, & methods
next stepspersonasuser
researchcompetitive
researchsketching &
ideationprototyping & user testing
Sign In Yes Yes Yes Yes
Primary Nav. Yes Yes Yes Yes
Secondary Nav. Yes No Yes Yes
Footer Yes Yes Yes Yes
Log In Yes Yes Yes Yes
Search No Yes Yes Yes
Accountability Yes No No No
Groups Yes Yes No No
Pro Learning Yes Yes Yes Yes
Feedback Yes Yes Yes No
Video Yes Yes Yes Yes