Introduction
Writing is hard, and keeping track of all the people, places, things, and events in a narrative makes it even harder. With Granthika’s editor, this knowledge gets integrated into your text. As the story is built, all facts about the characters, locations, objects, and events, all descriptions, labels, and notes get attached to each story element. Granthika is an editor, a database, and a timeline-maker for the writers that manages all story elements.
This software is in the research and development process. Most of the standards for design are already established. The general layout, color scheme and typography are already selected. This made working on this project easy and hard at the same time. While I did not have to come up with layout and creation of the elements from scratch, I had very little room to introduce newer/more efficient elements to this project. All in all, this was a completely awesome project to work on.
My Role
The product owner wanted to add the functionalities that some other research sites/apps (like Zotero and Mendeley) provide. My role was to create designs that incorporated a new Research tab, while making sure to adhere to existing design patterns and adding the following features:
Adding a Research Item.
Each Research Item can only represent one category (image, file, etc.).
A Research Item can link to other related Research Items.
Users should be able to attach labels (tags) to Research Items.
Users can see everywhere a research item has been referred to (like the mentions for characters, events, etc).
An option to add Notes that users can attach labels to, and also directly link to images or files and link to other research items.
In the Research tab, in a panel on the left, users can create folders (and nested folders) to organize their research.
Process
My process started by understanding the user. The users for this desktop app would be writers of different kinds. They can use this software as a tool to create and save their research on one platform instead of using a word processor, their hard drive, internet, several bookmarks, images and other clippings.
Secondary Research
I researched different websites and softwares, which provide research functionalities. The two famous softwares were Zotero and Mendeley. Zotero organizes research and can sort items into collections and tag them with keywords. Mendeley has similar features, but the requirements of the project made me align well with Zotero. I downloaded the software on my desktop to play with it and understand how creation of research folders and other functionalities like adding tags (we called it Labels) work.
I also downloaded the beta version of Granthika to see how the existing software works and also to understand design hierarchy. I also shared with the stakeholders the timeline and scope of this project, telling what exactly I would be working on and what specific flows are being researched and finally designed.
After doing some research and playing with the softwares while staying in touch with the product owner, I created wireframes to to ensure my ideas aligned well with the requirements.
Sketching Wireframes
I used Balsamiq to create wireframe sketches and invited users and other stakeholders to give feedback to find what worked and what needed some tweaking. Creating wireframes first is always great because when you have any changes to make, they are easy and quick to do instead of making adjustments in high fidelity screens. This step always saves me tons of time.
“Just one note—in the second one, in the popup I’d use the label, “Create Research Item” [instead of “Select a Category].””
Video Meetings
After a few Zoom video meetings and email exchanges, design adjustments to sketches and wireframes, it was time to create high fidelity mockups.
Outcome—Final Designs
It was time to create high fidelity mockups to make it look like a real-life software. I used Adobe Xd for this purpose. I love Adobe Xd as it transitions well from Photoshop seamlessly and since I had some elements provided to me in the early stages in .psd format, choosing Adobe Xd was an easy decision.
In addition to using the existing icons and elements, I recreated the ‘delete’ icon. Initially it was a “x” that confused people with ‘close’ instead of ‘delete.’ I created the trash icon, which is universally understood as a ‘delete’ icon.
Learning
After showing the final screens and working prototype, I got feedback.
“I wasn’t sure what I was creating/saving (but maybe I’m not part of the audience). Am I saving the right column? The central one? Maybe save should be together with the column?
- Pop-up: Create button is desaturated. It seems deactivated.”
“The third column on right looks isolated and does not look connected to the highlighted text in middle column. If the color of the third column would match the color of the selected line in middle column, it would look they are related.”
“From my side, it’s a thumbs up!”
There were established design standards, but I would change a few things to make this app more user friendly based upon the feedback I received. The hierarchy of the text can be made better. This app is is currently in beta and will be releasing shortly.