Explainer: Promotional Story

 

The TypoWriters

JAMIE CATACUTAN, TARA LIN, TIGER ZHAO

 

PRÉCIS

Précis is an add-on editing tool for Adobe Software that summarizes and paraphrases text to make it more clear and concise. It also has features of spelling check and grammar correction. 

 

FOCUS OF PROJECT AND WHO WE ARE DESIGNING IT FOR

The focus of our team's Product Design is to create a tool for Word Processing. When we gathered to brainstorm who our desired user group will be, we decided on Graphic Design Students from CCA whose first language is not English. We arrived at this decision because we felt that, aside from the Writing Majors, Graphic Design Students also dealt a lot with written text (non-visual) and not only graphics (visual) which was interesting in itself.  

 

RESEARCH FINDINGS

Based from my research findings that is apart from my group, here are the insights that I gathered:

This is a summary of the interview insights I previously created in detail, which you can find by clicking this link.

User.png

GRAPHIC DESIGN STUDENTS IN CCA FIND IT…

01

Difficult to write concisely and condense a lot of information into short, informative statements

"I FIND IT DIFFICULT TO WRITE A CLEAR AND COHESIVE STATEMENT." (MAHA KURDI)

"I TEND TO WRITE TOO MUCH AND ITS DIFFICULT FOR ME TO CONDENSE A LOT OF INFORMATION, LIKE AN ENTIRE SOLUTION TO A PROBLEM, INTO A FEW, SHORT SENTENCES." (VRINDA GANGWAL)

 

02

Easier to express themselves visually through icons, symbols and images as opposed to text or type

"I TRY TO MAKE THINGS MORE VISUAL TO MAKE SENSE OF THINGS AND MEANING. I ALSO TRY TO CONVEY MY MESSAGE THROUGH COLORS AND IMAGES." (MAHA KURDI)

 

03

Annoying to check their grammar and spelling errors through other word processing tools instead of the main software they use for projects (Adobe Creative Suite: Illustrator, InDesign, Photoshop). 

"I LEARNED THE BRITISH ENGLISH SYSTEM AND THE TRANSITION TO THE AMERICAN ENGLISH SYSTEM IS DIFFICULT WHEN IT COMES TO SPELLING. IT IMPACTS MY WORK A LOT, ESPECIALLY IN PROJECTS LIKE POSTERS WHERE TITLES ARE GIVEN IMPORTANCE WHEN IT COMES TO BEING CORRECTLY SPELLED. MISSPELLING OF WORDS CAUSES CONFUSION AND MISUNDERSTANDING." (BATUL BAHRAINWALA)

Tools.png

 

PRODUCT INFORMATION

Based from the research I gathered, I started to synthesize and pull data to create my product information:

 

PERSONA

I created a persona out of the information I gathered from my interviewees and the stories they shared with me.

Persona.png

JOURNEY MAP

This journey map explains the design process of my user group when creating a project. Originally, my team and I decided to make it specific by focusing on making a poster project since it was the project that mostly came up from our interviews. We mapped their actions, possible questions, happy points, pain points and opportunities across each phase:

JourneyMapFinal.jpeg

GOAL, INTENTION & CHALLENGE

From the research that I gathered, I synthesized my findings to arrive at a goal of designing a word processing add-on tool for Adobe Creative Suite (Illustrator, Photoshop, InDesign). I decided on the following key features: rephrasing and summarizing text, grammar correction, and spell check to make written information more clear and concise.

On that note, I created a Molecule that defines the three key areas of my design: The People, The Problem, The Solution

MoleculeGoal.png

USES, FEATURES, KEY SCREENS & WIREFLOWS

Delving further into understanding my product design and my user group, I sketched out scenarios, storyboards, key screens and wireflows for the uses and features of my persona, Lisa, using the tool that I designed, Précis. This helped me dig deeper into the story of my product and build a more user-centered tool that addresses the exact needs of the Graphic Design Majors. 

UsesFeatures.jpg
WireframesKeyScreens.jpg

 

My previous iteration and original sketches was less coherent in a way because I was still in the process of figuring out and pinpointing exactly what I wanted my tool to be. I had an idea in my mind of what it's supposed to be but I was still unconvinced about the direction I was taking. It's similar to the final direction I took, but it needed to be more specific. I felt that my original design was being pulled into different directions, partly because my team and I had a little bump in the road where we couldn't exactly agree on certain things but after ironing out our complications, we got to straighten things out and go into the path we felt strongly about. After consulting with my Professor and talking more about what I wanted to convey in my product, I was able to go into a direction that explained exactly what I wanted it to be: an editing tool that summarizes text. Plain and simple.

If you're interested in how my original sketches and early iterations looked like, this link will show you my previous process and progress work during our Product Design Sprint done in class.

 

EARLY SKETCHES & DIRECTIONS 

Logo Iterations and Prototype Sketches

After I was figured out my product information, it was time for me to go to the next phase of my design process, which is to do directional sketches for my prototype. Here I created key screens of my tool, Précis, and did some branding and logo work:

Screens.jpg
Logo.jpg
 
 
Logo 01.png
PrecisLogo02.png

 

PROTOTYPE

Using Sketch, Origami and InVision, I created a prototype that takes you through the entire experience of using Précis. Set in the context as with Lisa, a Graphic Design Student working on a Poster Project for her Midterm, the prototype goes about creating the graphics, the context or information and the seamless text editing process with Précis

LINK FOR THE CLICK-THROUGH PROTOTYPE AND INSTRUCTIONS ]

NARRATIVES: CONCEPT, USAGE, & ORIGIN STORY

This scenario plays out the experience of discovering and using Précis, as well as it's Concept Story, Usage Story and Origin Story:

 

APPENDIX

As an overview, here is a list of other process works and references done for this project:

     

    REFLECTION & INSIGHTS

    This project had a lot of ups and downs for me because it was kind of confusing to work individually but in a team setting at the same time. There were a lot of directions that pulled our concepts and ideas into a scattered mess but in the end we pulled through and I do feel strongly about the outcome of the project (not just the design itself but the growth of my work).

    Looking back at certain activities, some felt insignicant or irrelevant. But now that I arrived at the end of the project, I realized how everything played a signifcant role together in designing a product. Sometimes, I fail to see the importance or reason of a certain event playing out because I focus on the emotions and stress that I feel at the moment. But whenever I look back, I see how everything knits itself together to help me build the skills and knowledge as an Interaction Design Student.

    One of the things I enjoyed in the process of this project is designing the tool itself and creating the prototype. I love playing around with the softwares and getting to practice my more with them.  I also learned a lot on how to create a process book and tell a story out of it. I gathered what I learned from the previous assignment on Process Book Examples and integrated them to my own for this project. Even though it was a lot of work to organize and figure out an appropriate story of how I wanted to tell my experience on this project, it was a lot of fun gathering all my work together and seeing how much I progressed from start to finish. I always had an appreciation for putting together my portfolio (I recently did mine for this website the entire Winter Break) because there's a kind of satisfaction that I get once finish and see the output of my work in a presentable format.