Cate Hayes
UX designer

Superscribe

Creative Writing App
+ Responsive Website Design

Superscribe is a free online tool meant to help students learn and practice creative writing. Superscribe is designed to be accessed from multiple devices, which means users can access their account at home or on the go.

The problem: Students who are interested in creative writing often aren’t given the resources to take a creative writing class or to get feedback on their writing from other writers.

The goal: Create a tool that provides students with free writing resources, such as learning modules, daily prompts, peer reviews, and a community of writers.

My role: UX designer, UX researcher, Product designer, Visual designer, Interaction designer. 

Responsibilities: 

  • Conduct preliminary user research.

  • Define user problems and pain points based on user research.

  • Ideate solutions to user problems.

  • Create wireframes, mockups, and prototypes that helped solve user problems.

  • Conduct usability studies on prototypes to gather user feedback.

  • Continue ideation on designs based on user feedback.

Understanding the User

Interviews

To understand the needs of Superscribe users, I conducted preliminary user research through interviews. These interviews asked users what their writing process looked like.

The majority of users responded that they would benefit from the following features:

  • Daily writing inspiration

  • Option to access drafts from many devices

  • Peer review feedback

  • Talk with other writers

Superscribe

Personas

I created personas based on user interviews to help me keep the user in mind when designing.

The biggest takeaway from the personas was the aspect of continuity in this design across platforms. Users need to be able to view and edit their drafts, start and finish modules, and submit peer reviews from any device and platform.

User's Goal: Write a draft and share it with another writer.

User's Goal: Write a draft and share it with another writer.

User Journey

The user journey map was especially relevant to me when designing.

I wanted to keep in mind the specific process of writing and sharing work with other writers. Although I am familiar with the creative writing process myself, mapping out the user journey gave me insights into opportunities for improvement.

Superscribe

Sketches

I began the design process by sketching my ideas for different screens of the app.

I wanted this tool to be tailored to users' writing interests and goals upon creating an account, much like an app like Twitter prompts you to choose topics you're interested in when signing up. The journal screen was an early iteration of the "daily prompt" and "new draft" pages of my final design. I decided against using "journal" as the terminology for this page because I didn't want the user to feel limited in what they "should" be writing.

The first iteration of home screen design

The first iteration of home screen design

Wireframes/Low-Fidelity Prototype

After I sketched a few ideas, I created wireframes in Adobe XD and eventually, low-fidelity prototypes to test the design.

My low fidelity prototypes went through a few phases of iteration as I tried to combine all the elements that I wanted to include in an intuitive flow for the user. Initially, I struggled with finding the right navigation for the prototype, but getting feedback through a usability study helped me a lot with this process.

Revised lo-fi prototype after usability tests

Revised lo-fi prototype after usability tests

User Testing

I conducted an unmoderated usability study with 5 participants to test my designs before moving forward with mockups.

After the usability study with my low fidelity prototype, I gathered the following insights:

  1. A home button needs to be added to the main navigation bar.

  2. The peer review navigation form needs a submit button and better navigation cues.

  3. The community tab needs to link to the community page and have cues for its intended use.

"Create an account" user flow

Mockups/High-Fidelity Prototype

When beginning my mockups, I wanted to challenge myself to create a different style app than I had with my previous projects.

I wanted to incorporate gradients and bright colors to make the app visually exciting (especially the sign-up screens) so that users would be excited to create an account and start using the app.

I knew the next step would be creating a responsive web design for this app, so I kept that in mind when creating the final design for the app.

Sitemap for Superscribe responsive website

Sitemap for Superscribe responsive website

Planning a Responsive Website

To plan the navigation for the responsive website, I created a sitemap.

This site is a combination of a linear and hierarchical structure. The linear structure works best when signing up for an account and the actual features of the website resemble a hierarchical structure.

If I were to do this project over again, I actually would have created an "app map" to organize the pages before creating the app wireframes. This would have improved the navigation from the start, but thankfully my usability study revealed the navigation issues before I got too far.

scroll within prototype above to view full landing page

scroll within prototype above to view full landing page

Responsive Designs

To create my designs for the responsive desktop and mobile web app, I had to think creatively about how to design with continuity in mind.

Using progressive enhancement to go from a native mobile app to a web app was a challenge for me. I wanted the web app to feel like a browser experience and not like it was an adaptation of a mobile app.

I wanted the mobile web app to be a blend of both the native mobile app and the desktop web app.

Accessibility Considerations

  • Color contrast: 7.58. Designed with WCAG standard in mind.

  • On mobile screens, users can use both a keyboard and microphone to write in any text box.

  • Account settings included language settings, which allows users to change to their preferred language

Takeaways

What have I learned from this project?

This project challenged me to get out of my comfort zone with not only the type of design I was used to creating but the visual design style as well. I wanted to refine my visual design style to better enhance the user flow of this project.

My greatest challenge when designing this was balancing consistency and continuity with the visual and navigational styles of different devices. A user's experience on a mobile app versus a desktop website is often very different, and it was a challenge for me to design using progressive enhancement.

However, I'm proud of the balance I struck with all three versions of Superscribe, and I hope someday this platform can be brought to life. The main goal of this project was to design for social good, and I believe these designs could have a positive impact on the lives of young adults.