PenQuill

Users should be able to use multiple forms of media when taking notes onto their journal. They should also be able to share their files to social media if they are willing to. PenQuill is a journalism app that has functions being able to take notes and have multimedia all within the same page. With these challenges in front of me, here is the process on how I executed this app. 

The Challenge

Users should be able to use multiple forms of media when taking notes onto their journal and share it when they want to.

The Solution

Make an app based off of the demographics, preferred channels/content types, and reviews. I also want it to be able to have the functions of sharing multimedia files to social media.

My Role

As a team of one, I needed to wear multiple hats.  I served as the UX researcher and the Product designer


Demographics and Psychographics

Key Demographics:

  • Age range: Young to middle adults

  • Gender: Both male and female

  • Common jobs: Journalists, analysts 

Key Psychographics:

  • Values: Organization

  • Likes to: Journal/take notes

Interviews

Before diving into the project, I needed to interview people and get some takeaways on how to produce an optimal prototype for the PenQuill app. Based on the interviews this what was important:

  • How might we make it easy to see the benefits of using this app?

  • How might we find it easy for people to share their notes to other people?

  • How might we find a way to make the app be free for users?

  • How might we make the app functional while remaining its aesthetic? 

  • How might we add add a function to let the user add multimedia files to their notes? 

Competitive Analysis

The two apps I looked into when it comes to journalism type apps were Evernote and Happyscribe. 

For Evernote one thing that I took into consideration was that it allowed you to add images to one’s text documents.

As for Happyscribe, it allowed you to submit a video and/or audio file into text documents. 

However, a disadvantage I found when using these apps is that they both required a subscription fee.

Personas

Based off of the research, I created two personas that have various goals and pain points to cover.

Journey Map

Then I made a journey map of what a user would experience when using the app.

Initial Sketch Flow

Afterwards, I made a sketch of the first stages of how the app would flow while also focusing on the main goal and questions.

Idea Sketch

The idea sketch was then made for branching out what else needs to be added for the app.

Crazy Eights Sketch

Crazy eights is another form of paper wireframing technique that I decided to use for this project.

Solution Sketch

The last thing I did before transitioning to the digital process is to make a solution sketch. This shows additional notes on what the user would expect in the app and a three part guideline on how to go through the app.

User Flow Experience

Afterwards I refined the layout of the user flow experience to have a cleaner idea of what to do. I also listed the user stories.

Typography and Color Schemes

Here is the text I used to make sure it's readable for the user when looking through the app. I also have the color schemes to show what I was aiming for when it came to contrast accessibility.

Mood Board

Here is my mood board for my Lifestyles app. This influenced the style on the UI and the colors I wanted to use for the app.

Wireframes

Here are some samples of the wireframes I made to get a further idea for my high fidelity prototype.

Login Page

Home Page

Document Page

High Fidelity Prototype

Here are some samples from the high fidelity prototype of the project.

Home Page

Add Photo Page

Save Page

Usability Reports

Based on the tests, these were the reports I got out of my app:

  • The design layout was really great to look at according to the reviews


  • An improvement that was suggested is that the sign up page needs a function to go back to the login incase one were to accidentally go there

  • Another one is that the "add audio" page needed a record button like how the "add image" page has a camera button 

Takeaways from the Project

  • The UX research part is important to me so I can match it with the UI design part of the project

  • Doing this type of a project for myself made me feel more responsible on how to make a thorough prototype

  • This gives me a great impression on how projects would work in the future when creating these kinds of interfaces

  • Through this program, it shows how important both skills in UX and UI are needed in a worker’s kit


Next Steps

  • If I would continue to make this app I would add a folders function so it can be more accessible to access specific files and manage them better

  • I would also add a sort feature based on how recent or a favorites list as well

  • Lastly, I would add a share function so it can be added into an article or social media or to friends