OVERVIEW
Designing an app that teaches you how to write stories and create characters in a digestible format
Writing stories and designing characters is a passion I enjoy in my free time. However, I understand the challenges of crafting compelling stories and interesting characters firsthand. As part of my graduate visual design course at the University of Maryland, I designed a tool to simplify learning how to write stories and create characters, driven by my passion for creative expression.
Timeline
March - May 2023
3 months
Role
Visual Designer
Team
Individual
Focus Areas
Visual Design, Interaction Design, Design System
PROBLEM
Writing a story is a complex process and there are too many resources available
I believe any writer will tell you that writing good stories with interesting characters can be difficult. Then there are a plethora of articles and videos online claiming to help with the process. With storytelling being difficult and there being potential frustration from finding the right resources, it is easy to become overwhelmed.
SOLUTION
Introducing YourStory, a writing app that guides you and provides additional tools
Step-by-Step Guide
Be guided through the process of writing a story or creating a character
Brainstorm With AI
Chat with “The Author” and receive ideas, inspiration, or feedback easily
Communicate
Communicate with the people to find critique, advice, or anything else
Notetaking
Take notes within seconds to write down whatever you need
APPROACH
How might I make writing a story easier and more approachable?
After conducting research and brainstorming, I devised a method to make learning how to write stories easier. I then established a visual direction that aligned with this method. Through iterations and feedback from colleagues, I finalized the design.
BRAINSTORM
I first determined that providing a step-by-step tutorial should ease the process
I had limited knowledge of the formal process of writing a story or creating a character, which prompted me to conduct research to gain an understanding. As mentioned, there were various approaches to story and character creation across many resources. This inspired me to identify the recurring elements and streamline them into a step-by-step guided process.
VISUAL STRATEGY
Take advantage of minimalism and illustrations to convey approachability
I believed that a minimalistic design approach would help make storytelling feel less overwhelming and more approachable. However, I also recognized that it could limit creativity. To balance this, I wanted to incorporate illustrations, which is an essential element of storytelling, to add vibrancy and life to the app.
VISUAL IDENTITY
Colors
I chose Mikado Yellow as the primary color for YourStory because it represents pencils, which are symbolic of writing tools. Yellow also represents happiness and fun, aligning with my goal for this to be approachable. Additionally, I aimed for the app to have an overall colorful aesthetic to reinforce my strategy.
Typography
I selected Roboto Slab as the font for YourStory to align with the writing theme and create a sense that the words were written by someone. For Nunito, I opted for a font that is highly legible and easy to read.
ITERATIONS
Iterating on the initial design from low to high-fidelity
I started in low-fidelity to visualize the layout before moving to high fidelity. Below is a snippet of the wireframes I created.
DESIGN SYSTEM
DESIGN CHANGES
Major improvements were made based on critique from 15 colleagues
After completing my designs in high-fidelity, I presented them to my colleagues during a critique session. There was minor criticism related toward visual errors, such as my padding size and transparency levels. Below are the major changes I made based on the feedback I received.
Less Busy Header
I tried to simulate the sensation of sitting at a desk on my “home” screen. I extended this design choice to the header, resulting in an overwhelming header for users.
New Features
There were suggestions for how to take YourStory to the next level. I added the ability to save, quotes from authors being presented to users, and a notes feature.
Removing Redundancy
There are a few minor visual issues that could be improved upon. The biggest change here was combining “Story” and “Character” into “Create”.
FINAL DESIGN
Create
Be guided through a step-by-step tutorial on how to start your story or character. You can skip the guide if you already have your ideas ready. Find your previous stories and characters in the collection below.
Ideas
Chat with The Author, an AI chatbot specialized in stories and characters. It operates like GPT models, generating authentic responses to inquiries within its topic scope.
Discuss
A discussion board where users can create discussion posts and have people reply. Discussion posts are organized based on the topic of the post.
Notes
Built-in notetaking feature that functions like other applications, ideal for quick writing and storytelling-related notes within YourStory.
REFLECTION
Challenges
Expanding My Creativity: Overcoming the limitations of minimalistic design and infusing character into my app was a persistent challenge for me.
Immersion: The header of the app posed a challenge for me in terms of incorporating my concept of immersing the user in sitting at a desk. Despite my efforts to come up with ideas, the header still looked too cluttered. Balancing aesthetics with usability was a struggle.
Design System: I’m still practicing how to make a proper design system with every design project I tackle. It’s difficult for me to determine what to include and what not to include alongside the overall organization.
Takeaways
Design What’s Possible: I was concerned that my minimalist designs may appear too conventional. However, I also reminded myself that innovative and unconventional ideas may not be feasible to implement in code. Thus, it's crucial to strike a balance between creativity and practicality while designing.
Learn the Material: Despite designing a storytelling app, I didn’t know the process of writing a story myself. It was a good reminder that you always need to learn about what you are designing for.
