Inked Voices

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



researchcompetitive

researchsketching &


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



researchcompetitive

researchsketching &


CURRENT NONMEMBER PAGES - HOME



researchcompetitive

researchsketching &


PROBLEM STATEMENT

• Concise, communicative nonmember pages

• Showcase Inked Voices’ features

• Motivate users to sign up



researchcompetitive

researchsketching &


REDESIGN PREVIEW



researchcompetitive

researchsketching &


COMPETITIVE RESEARCH



researchcompetitive

researchsketching &


Community and Platform

Platform with No Community

Community with No Platform

FEATURE COMPARISON - COMPETITIVE



researchcompetitive

researchsketching &


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



researchcompetitive

researchsketching &


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



researchcompetitive

researchsketching &


LAYOUT ANALYSIS - COMPARATIVE



researchcompetitive

researchsketching &


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.



researchcompetitive

researchsketching &


INTERVIEWS



researchcompetitive

researchsketching &


• 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



researchcompetitive

researchsketching &


Ink On

Writing Groups

Dashboard

Home

About

Home (scroll down)

CARD SORTING / IA



researchcompetitive

researchsketching &


INTERVIEWS - AFFINITY MAPPING



researchcompetitive

researchsketching &


INTERVIEWS - AFFINITY MAP FINDINGS



researchcompetitive

researchsketching &


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



researchcompetitive

researchsketching &


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



researchcompetitive

researchsketching &


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:



researchcompetitive

researchsketching &


PRIMARY PERSONA

FEATURE PRIORITIZATION



researchcompetitive

researchsketching &


• 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



researchcompetitive

researchsketching &


• 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



researchcompetitive

researchsketching &


PEOPLE LOVED THE INK ON PAGE



researchcompetitive

researchsketching &


Ink On (current)

HAND SKETCHING



researchcompetitive

researchsketching &


Home (new)

INITIAL DIGITAL WIREFRAMES - HOME



researchcompetitive

researchsketching &


Home (current) Home (new) Home (current)

Group (current)

INITIAL DIGITAL WIREFRAMES - PEER WRITING GROUPS



researchcompetitive

researchsketching &


P.W.G. (current) Group (new)W.G. (new)

Group (current)

INITIAL DIGITAL WIREFRAMES - PRO GROUPS



researchcompetitive

researchsketching &


Pro Groups Group (new)Guest Workshops

USER TESTING



researchcompetitive

researchsketching &


• 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



researchcompetitive

researchsketching &


• “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



researchcompetitive

researchsketching &


• “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



researchcompetitive

researchsketching &


• “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



researchcompetitive

researchsketching &


• “The words are tiny, and I’ve had LASIK"

HOME PAGE - ANNOTATED



researchcompetitive

researchsketching &


WORKSHOPS & EVENTS - ANNOTATED



researchcompetitive

researchsketching &


STORY



researchcompetitive

researchsketching &


• 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



researchcompetitive

researchsketching &


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



researchcompetitive

researchsketching &


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


THANK YOU!AND START WRITING!


APPENDIX

STYLE GUIDE



researchcompetitive

researchsketching &


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


with shared

h4:‘Lato Bold’

#707070 18px

Find groups or individuals with shared

h5:‘Open Sans Bold’

#333333 14px


P:‘Open Sans Reg’

#333333 13px


Links:‘Open Sans Reg’

#0a5c7d 13px


Small Text:‘Open Sans Reg’

#707070 11px


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





15px , 22px

48px

Margin-Bottom: 30px


Home Page Only

Site-wide


32px, 34pxuppercase

DO MORE WRITING.h2:


24pxMargin-Bottom:

10px


with shared


#333333 20px


with shared

h4:‘Lato Bold’

#707070 18px



#333333 14px



#333333 13px



#0a5c7d 13px



#707070 11px


Buttons: Standard

All buttons use:


Search

Search

PRO

Critique

Search

Search

Search

Search

Buttons: Labels

Solid:

Hover:

Cancel

Cancel



#7e4e7f

#9e7aa0

#0a5c7d

#5299af

#83a24c

#b4c683

#afafaf

#707070


#fdc52e

Sign Up

Buttons: Other


Margin-Bottom:10px





15px , 22px

48px

Margin-Bottom: 30px


Home Page Only

Site-wide


32px, 34pxuppercase

DO MORE WRITING.h2:


24pxMargin-Bottom:

10px


with shared


#333333 20px


with shared

h4:‘Lato Bold’

#707070 18px



#333333 14px



#333333 13px



#0a5c7d 13px



#707070 11px


Buttons: Standard

All buttons use:


Search

Search

PRO

Critique

Search

Search

Search

Search

Buttons: Labels

Solid:

Hover:

Cancel

Cancel



#7e4e7f

#9e7aa0

#0a5c7d

#5299af

#83a24c

#b4c683

#afafaf

#707070


#fdc52e

Sign Up

Buttons: Other


Margin-Bottom:10px

LAYOUT ANALYSIS - COMPETITIVE



researchcompetitive

researchsketching &


Home Page

Sign Up Page

Pricing Page

FEATURE ANALYSIS - COMPARATIVE



researchcompetitive

researchsketching &


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

Inked Voices

Technology

Transcript of Inked Voices