Inked Voices — Website Redesign
How our small team of designers used good UX practices to grow an online community of writers
--
About Inked Voices
Inked Voices is an online platform for writing teachers, students, and professionals to share thoughts about writing, watch video webinars to better their craft, and critique each other’s work in small, private groups.
Since its launch in 2014, Inked Voices expanded its offerings and added additional pages for all of its new features. As a result, the website no longer presented a single cohesive message and had trouble retaining new users.
This is the story of how our devoted team of designers improved the user experience for potential new users of Inked Voices:
The Team
Jonathan Quintuña, Adrian Lin, and I (Matt Finder) are three UX designers from a diverse range of backgrounds. We enjoy working together to advocate for user needs, remaining open-minded and adapting to new insights, and solving meaningful problems.
Even though we worked together day and night for three weeks, we had a great experience, an opportunity to further develop our skill sets, and always look forward to meeting up again. (And we still want to take that fun team photo we’ve been planning since the project ended.)
The Current Inked Voices Home Page
The current Inked Voices home page features many sections with heavy use of copy, a 4-minute video, line drawings (some repeated), varying textured backgrounds, hover-over interactive elements, and more.
And that’s before it even has the chance to mention professional-led writing groups (a favorite feature of users) or Ink On, Inked Voices’ productivity-tracking iOS app.
Problem Statement
Inked Voices’ is a wonderful product with a vibrant community, so it was important for the website to give potential new members an experience that communicated this.
There needed to be concise, communicative nonmember pages that showcased Inked Voices’ features, retained users’ interest, and motivated people to sign up.
Here’s what we did to make it happen:
1. Project Timeline
We had a lot to do in order to to accomplish our goal, but only three weeks to do it. Because of this, it was essential for us to be organized, proactive, and thorough with our approach:
Spoiler alert: We were a motivated team who truly believed in Inked Voices’ Guiding Principles, always listened to each other, and kept smiles on our faces throughout; so were able to deliver on time.
2. Competitive Research
To educate ourselves about other online offerings for writers, we searched the web to grow our knowledge of the space.
Our findings from this search — combined with input from our client — helped us uncover eleven other web-based products for writers:
Feature Comparison
Once we gathered this list of eleven competitors, we compared features between them to see if Inked Voices had any major shortcomings.
Findings: Inked Voices revealed itself as having a great list of features with few notable absences:
This led us to further compare the user experience of Inked Voices with those of The Next Big Writer and Scribophile: two competing products with similar features and missions.
Heuristic Evaluation
In Nielsen Norman Group’s 10 Usability Heuristics for User Interface Design, Jakob Nielsen outlines ten heuristics — think of them as rules of thumb — for evaluating the usability of online experiences.
Our team used these heuristics to evaluate the Inked Voices website, and those of The Next Big Writer and Scribophile.
Findings: Our evaluation emphasized that although Inked Voices had a great list of features, it was lacking in terms of a pleasurable user experience and could learn from its competitors’ successes:
4. Screener Surveys
After researching Inked Voices and competing products, we dove deep into learning about our users.
We started this user research by creating a brief online survey to screen for potential interview candidates, and sent it to a diverse range of people:
- Aged from mid-twenties to mid-seventies
- Located in the U.S. and abroad
- Professional and amateur writers
- Writing professors and students
- Non-writers
- Users and non-users of Inked Voices.
Findings: We received a healthy 96 responses, which gave us important data including how most respondents enjoyed receiving feedback and had been active members of writing groups: two of the foremost qualities of people who might be interested in joining Inked Voices:
5. User Interviews
We interviewed 14 candidates from our 96 survey respondents, and spoke with them both in person and through video calls (in the case of international respondents).
Our interviewees were kind enough to complete an in-depth questionnaire and a recorded usability test of the current Inked Voices website:
Global Navigation Inconsistencies
“There are too many nav bars.”
“The global nav needs work.”
Findings: One of the patterns our testers immediately exposed was the inconsistent global navigation bar, which has more than 6 different manifestations across the many pages of Inked Voices and is completely absent on some.
The inconsistent organization was a clear representation of Inked Voices’ growth and added features, and needed to be streamlined in terms of both appearance and content.
6. Card Sorting & Information Architecture
Each of the interviewees who met us in person also completed a card sorting exercise. In a card sorting exercise — often shortened to “card sort” — you give each piece of website content its own card, and let participants organize these cards into categories they find to be most logical.
The goal of our card sort was to define an information architecture — which, as defined by usability.gov, “focuses on organizing, structuring, and labeling content in an effective and sustainable way” — that allows users to easily and intuitively find information and complete tasks.
We created our card sort on an iPad, which allowed for easy editing, renaming, and color-coding to help participants further organize content.
At first we made an “open” card sort in which we asked participants to create their own top-level categories for the rest of the cards.
Once we began to notice repeating patterns in the “open” card sort, we ran a “closed” card sort in which top-level categories were fixed based on the responses of earlier participants.
Findings: Our user interviews, card sorting exercises, and usability tests revealed which elements users considered to be most important. More specifically, they highlighted the value of featuring Inked Voices’ key benefits on the home page and relegating less important content to the website’s footer.
7. Affinity Mapping
We wrote down observations from all of our user interviews, card sorting exercises, and usability tests, and used them to create a map based on affinities, or commonalities:
Affinity Map Findings
Some key findings included how a great majority felt the home page had too much text, important information wasn’t readily available, and knowing the skill level of others in the community was essential:
Some other important learnings included how users felt the website tour page was too complicated, and how many part-time writers don’t write on a consistent schedule:
8. Personas
We used our findings from the affinity diagram to create three personas — Jane, Aldous, and Maya — based on our user research.
“A persona is a fictional, yet realistic, description of a typical or target user of the product. A persona is an archetype instead of an actual living human, but personas should be described as if they were real people.” — Aurora Bedford for Nielsen Norman Group
Each one of our personas had unique background stories, needs, pain points, and resulting ways we could help them. Because our goal was to increase sign ups from new users, we chose to focus on Jane as our primary persona:
9. Need Prioritization
By keeping Jane’s needs at the forefront while comparing them with those of Aldous and Maya, we were able to prioritize the ways we can serve our three personas.
Of the main needs we wanted to address in the redesigned Inked Voices website, our highest to lowest priority needs were as follows:
Highest Priority
- Emphasize small, intimate groups
- Reduce complexity
- Display skill level of other users
- Show info about drafts and refining
High Priority
- Highlight accountability features
- Exhibit ability to set deadlines
- Reduce video length into short clips
Lower Priority
- Show site activity (total number of users, critiques, etc.)
- Use happier-looking drawings
Lowest Priority
- Enable keyboard shortcuts for editing
- Have a required reading feature for groups
10. Site Map
Using behaviors found in the website analytics, needs expressed by interviewees, patterns found in card sorts, and the internal goals of Inked Voices, we created a site map based on all of our research.
This site map provided us with a research-backed framework on which we would then create informed designs:
11. Hand Sketching
Armed with all of the research above, our need prioritization, and our site map, we began sketching for a redesigned version of Inked Voices.
Low fidelity hand sketching helped the team quickly create a wide range of design iterations:
12. Initial Digital Wireframes
Once we agreed on designs that best balanced Jane’s needs (our primary persona’s needs) with Inked Voices’ goals, we refined them into medium fidelity sketches and then initial digital wireframes.
Home Page
The original home page was cluttered and inconsistently laid out, so we made sure to create a simplified and cohesive layout for our redesign.
We reduced paragraphs of copy into key points that emphasized major benefits from our user research, and provided concise videos for each section. These videos would be short with examples of specific features because Jane, as our research showed, is a busy individual with little patience for watching long videos.
Peer Writing Groups
We retitled the original “Peer Writing Groups” page to “Writing Groups,” because testers were wary that the word “Peer” meant there would be no experienced writers in these groups.
We also separated the introduction from “How it works” because testers had trouble finding how to use these groups. We kept the format of the lower section as it was because testers liked how individual groups were displayed.
For the individual writing group pages, we took user feedback into account by emphasizing the hierarchy of information to more clearly delineate the different sections.
Pro Groups
We designed this page to be consistent with Writing Groups page, as the types of content on this page were quite similar.
To further ease users’ worries about a lack of experienced professional writers (the same worry that resulted in the renaming of “Peer Writing Groups” to “Writing Groups”), we renamed this page from “Pro Groups” to “Guest Workshops.”
Our goal was to differentiate from the other writing groups and workshops while not degrading them in any way, to communicate how someone special would be facilitating, and to emphasize how these particular workshops are shorter term.
For the individual guest workshop pages, we used learnings from testing to make the price of the workshop more prominent and move the “Register” button to be near the workshop title and price.
13. Jane’s Job Story
Inspired by an article by Paul Adams of Intercom titled The Dribbblisation of Design, we created a job story for Jane, our primary persona.
Creating a job story enabled us to concisely frame our design problem “in a Job, focusing on the triggering event or situation, the motivation and goal, and the intended outcome.” Jane’s job story is as follows:
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.
We used this job story to provide context for our user testing, which helped testers expose issues Jane might face while trying to accomplish her goals.
14. User Testing
Using an interactive prototype we made with Sketch and InVision, we conducted seven user tests with a combination of amateur writers, writing professors, and non-writers who both have and haven’t previously used Inked Voices.
Participants for this round of user testing had varying levels of tech expertise, and some had returned to help us after testing with the original Inked Voices website.
In addition, some of our testers wanted to join online writing groups and were currently looking for websites to find them.
15. Design Iterations
Testing illuminated opportunities to iterate on our designs, so we continuously refined each page until users responded positively to what were formerly pain points.
Issue A: Home Page Top Panel
“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.”
Findings: Our goal was to design a relevant and informative home page with a seamless sign up experience, but users still felt the page could be improved.
We iterated on our home page top panel to address this need, and used findings from our early competitive research to create a revised home page experience that users then found more pleasurable.
Issue B: Changing “Guest Workshops” to “Workshops & Events”
“I think that just calling them Workshops would work. “Guest” implies a transience of the presenter.”
“Not sure about this. I guess I can wait to see.”
Findings: While changing “Pro Groups” to “Guest Workshops” showed some improvement, there was still confusion over what testers expected to be on the “Guest Workshops” page. Changing “Guest Workshops” to “Workshops & Events” helped testers be more confident about what would be on the page.
Issue C: Workshops & Events Price
“There’s no dollar signs on these, which is weird, I think having the price be on here is more natural.”
Findings: Users wanted to see the prices of workshops and events while viewing the main list. They didn’t realize these were paid events and didn’t like having to click on the events. We added pricing to the event panes, which helped users with both of these troubles.
Issue D: Differentiating Links in Home Page Copy
“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.”
Findings: Users thought our bold, underlined text was for emphasis and not necessarily a link. We added color to made the distinction clear, and confirmed the change was effective in later rounds of testing.
Issue E: The Importance of Content
Placeholder text — like Lorem ipsum — allows designers to focus on content organization without the distraction of writing the content itself, but can pose major issues in user testing.
Findings: One of the main unexpected learnings from this project (as far as design process is concerned) was how we almost immediately needed to stop using placeholder text for testing.
We wanted potential new users to gain enough interest in Inked Voices to sign up, and text like “important benefit,” “exuberant testimonial,” or, even worse, “nostrud exercitation ullamco” doesn’t exactly get people excited about a product (especially a product for writers).
Copywriting was out of our project scope, but we knew it was essential to have real information to test the success of our designs. As a result, we had to source relevant copy from testers, the current website, our client, and our imaginations to serve as suggestions to be finalized at a later time.
16. Selected Revised Wireframes—Annotated in Higher Fidelity
After making multiple design iterations to address both minor flaws and the larger issues above, we used Sketch and InVision to create higher-fidelity wireframes and a refined interactive prototype.
Annotated wireframes from this prototype can be seen below:
Home Page — Intro panel and “Get feedback” panel (below)
Workshops & Events Page — Global Navigation, Intro panel, and Workshops panel (below)
A Brief Reflection & Next Steps
Helping Inked Voices was an exciting, rewarding process that all three team members truly enjoyed.
The project gave us the opportunity to make an impact on a passionate online community, and help people who are dedicated to learning more about and sharing their passions.
This Is Only a Starting Point
There is plenty to be done in terms of continuing to refine the user experience of Inked Voices, and an exciting future lies ahead.
To anticipate some of what this future holds, we compiled a list of next steps and shared them with Inked Voices:
Shorter Term:
- Highly-polished visual design was beyond the scope of the project, so the visual design will need to be refined to ensure typography, use of color, and composition are up to the highest standards.
- On a similar note — as copywriting was also out of the project scope — writing will need to be refined to have copy that best communicates our suggestions for each section of the website.
- Responsive design is no longer a bonus feature; it’s an expectation. A responsive version of the Inked Voices website should be designed and tested for mobile users.
- Designers will need to work seamlessly with developers to ensure design intent is carried through the development phase. This ideally would have happened throughout the design process to make a happy, collaborative, multidisciplinary tech team; but we didn’t have access to the development team during the project (they didn’t work full-time for Inked Voices and are based in Argentina).
- And, of course, user testing of our design should continue to expose potential missed issues and allow for further refinements.
Longer Term:
- Launch! (And celebrate all the teamwork involved.)
- After launch, the Inked Voices team can run usability tests with the new design, validate its success with A/B testing, and receive feedback from the full user base.
- Users of Inked Voices’ current iOS app, Ink On, were disappointed it was only a productivity tracker and wanted a full-featured Inked Voices app. After launching the responsive website, we would like to see if it would still be worthwhile to create a native mobile app for Inked Voices. If so, we will be sure to follow Apple’s iOS Human Interface Guidelines for iOS and Google’s Material Design Guidelines for Android.
- Inked Voices showed an interest in pursuing additional features that address the unique needs of writing teachers and students. Creating new features was out of our project scope, but we collected and shared relevant research from the teachers and students we interviewed. We hope this opportunity leads to an exciting new facet of Inked Voices!
