To view the final product, CLICK HERE

‍

Roles & Methods

UX Designer Lead / Assisted in Research
C&C Analysis | User Interviews | Affinity Mapping | User Persona | User Flow | Sketches | Sitemap | User flow | Grayscale Wireframe | Mid Fi Wireframe | Hi Fi Wireframe | Usability testing (2 Rounds)

‍

Team

3 UX/UI Designers

‍

Tools

Figma, Figjam, Google Docs, Trello

‍

Timeline

2 Week Sprint

‍

PROCESS

1. Research/Discover 2. Define 3. Design 4. Testing

‍

RESEARCH/DISCOVER

Interview

For our interviews, we looked for people who were familiar with other art platforms to explore what their experiences were.

Q1. Have you used an art sharing website before, either to reference or to post? What made them stand out to you?

“I really enjoyed the community aspect of DA. Finding people that like your art and vice versa. Participating in drawing challenges and growing friendships”

Q2. What are your thoughts on criticism and cyberbullying? How can art-sharing websites become a safer space?

“To make a safe space for artists, it must be an art-oriented site because as an artist, you get that no one is there to receive harsh criticism. Just posting for fun”

Q3. Do you think you’d benefit from an art-sharing social media app? Why or why not?

“It would depend on the interactions available in the applications. How would the sharing be seen among users? What kind of feedback will there be? Would people just be liking it?”

‍

‍

DEFINE

With the insights collected from our interviews, our next steps were to go even deeper. We started off the Define stage of this project by creating an affinity map. Here we grouped similar answers from the interviews into 6 different categories.

• Notebook usage
• Cybersecurity
• Cyberbullying
• Community
• Criticism
• Inspiration

‍

PERSONA‍

After grouping similar answers into these categories we created several “I” statements to get an idea of the user’s needs & pain points. With these new “I” statements we used them to craft our persona, The Rising Creative.

‍

‍

JOURNEY MAP

We wanted to get a deeper understanding of our persona, The Rising Creative. Here we have our Journey Map created by the UXR leads. This journey map displays the emotional status our persona goes through when posting on his current platform. Towards the end, you can see he feels he’s feeling very disappointed which leads to his departure from his current art sharing platform.

‍

‍

THE PROBLEM

After analyzing and synthesizing data from our persona, we came up with this problem statement:

Due to the prevalence of toxicity, The Rising Creative needs a safe and supportive platform where they can share their art and cultivate a community without the fear of receiving unwanted hate and criticism.

‍

HOW MIGHT WE...

• Cultivate a safer space for artists to share their art without receiving unnecessary feedback?
• Implement a sharing function within the app to increase the user’s exposure and make networking more accessible?
• Place an emphasis on the user’s safety and privacy as a part of the application’s branding?

‍

DESIGN

‍

The next stage in the process comes Design. In this stage my team and I sketched out ideas and brought them to life by building wireframes in Figma.

Before we began sketching, we created 2 things:

1. A proposed Site Map to get a better idea of the layout and the contents we wanted to implement in the app.
2. A proposed User Flow, a series of steps shown how a user might complete a task on our app.

‍

SITE MAP

‍

USER FLOW

‍

SKETCHES & GRAYSCALE WIREFRAMES

Here we have our initial sketches. We began to draw out a layout of the homepage, create a post page, and a detailed view of a user’s artwork.

‍

Grayscale Wireframes

‍

MID-FI WIREFRAMES

Which then led to our Mid Fidelity Wireframes. In this step we added colors, images, icons, and overlays.

Here we have our Onboarding pages, Profile Page, Create Post page, Comment Settings, Menu and Home Feed. We wanted to keep the design of the app clean and simple with warm & darker tones to stay true to Moleskine's brand.

‍

‍

TESTING

‍

ROUND 1

Once we finished building our wireframes, our prototype was ready for round one of usability testing.

‍

We asked 5 users to complete 2 tasks:

Task 1: Users will be able to create a private account in under 2 mins.

Task 2: Users will be able to create an open-comment post in 2 minutes or less.

5/5 users passed the onboarding process without any difficulties

5/5 users expressed frustrations with task number 2

Due to some sizing, coloring, and formatting issues, users were confused on where to click.

An average satisfaction rate of 4.3 out of 5

‍

HI-FI WIREFRAMES

We began streamlining the Create Post Page so that the comment settings are obvious to the users.

We made the decision of changing the comment setting button to yellow so it doesn’t blend in with the keyboard.

Another big change was the button layout in the Create Post Page. The Camera, Library and Publish buttons were made bigger for users to locate easily. We made these buttons into the same style for consistency.

‍

ROUND 2

After we finished these changes we wanted to better validate our designs with a second a round of usability testing.

In this round of testing, we kept the same two tasks from before and added a third task.
Added Task: Users will be able to explore content on the explore page, and like a post from a verified user in 2 minutes or less.

4/4 users passed Task 1

4/4 users passed Task 2 with a few errors

4/4 users passed Task 3

An average satisfaction rate of 4.8 out of 5

It seemed there were still some complications when users were trying to create a post.

Like most apps, the Camera and Library button come before writing a description and that’s what our users highly suggested we changed too.

‍

So we did! Which leads us to our final product…

In our final stage of the design process, we made further changes to the Create Post Page by moving these buttons to the top. The settings tabs were moved towards the middle of the page and a publish button at the bottom.

Another big change we implemented was adding an “Imports from Smart Notebook” option when uploading to stay true to Moleskine’s branding and for those who actually use the Smart Notebook.

‍

‍

NEXT STEPS

First steps my team and I would like to expand and do more testing on the "anonymous ask" feature. Originally we added this feature for users to ask others questions they might have for their art, but there's always that chance a toxic user may use it differently. Secondly, would be further optimizing and creating more interactable features for mobile.

REFLECTION

I learned a lot from this 2 Week Sprint. Listening to other users and their experiences on other platforms really helped us build this prototype. I think time was the biggest issue we faced. Towards the end we were on a time crunch with a lot of helpful suggestions & feedback given to us before the final date. I'd love to go back and do more to make what we have already an even better experience for users.

‍

‍