Back to Top

Case study

Case Study: Array (Conceptual)

A promotional image for Array, with two mockup phones on a gradient background


“Introducing Array – a fresh, new app in the Art Social Networking experience."

The Brief

We were approached for a 2-week sprint, to help Moleskine break into the art social networking space. Having delved into the digital art world with the Moleskine Smart Notebook, they chose us to lead them further into this space with an art-sharing platform.

My Role

I was fortunate enough to work alongside the brilliant Jaweria Mehmood and Iago O’Flynn during this project, facilitating the team throughout the design process.

The team: Jaeria, Iago and I in a zoom call.

Skills

Discover:
- Pluses and Deltas
- Feature Inventory
- User Surveys
- User Interviews
- HEART Framework

Define:
- Affinity Mapping
- User Persona
- User Journey
- Site Map
- User Flow

Develop:
- ‘How Might We?’
- Sketching
- Wireframing
- Prototyping
- Usability Testing

Deliver:
- Hi-Fi Prototype
- Visual Design
- Branding
- 15 Minute Pitch-style presentation

DISCOVER

Introduction

I had never even considered Moleskine as anything other than a luxury notebook, and upon receiving our brief, this perception was instantly shattered. With an artist in our midst (the talented Iago), we felt equipped to tackle the task of taking Moleskine into a brand-new realm. However, we had a long road ahead before the solution materialised in the form of our app, Array.

Although you have already been spoiled on where we ended up,  I’d like to take you on the journey of just how exactly Array came to be. The first step: Research.

Competitive Analysis

We began by first assessing the competition, finding out exactly what is going right, what is going wrong and most importantly what is missing in the current dedicated art social media space.

Our two main methodologies for this undertaking were a Feature Inventory and Pluses and Deltas.

The Feature Inventory (pictured below) was a huge help in determining where opportunities lie in terms of features for our fledgling app. Although many of these platforms were feature-rich, many of those such as ArtStation and DeviantArt were desktop-focused, and those that were mobile-first such as Instagram are not dedicated specifically to artists and creatives.

A screenshot of our feature inventory.

This revelation combined with some web analytics of our competitors led us to the conclusion that a mobile app would be the way to go.

We felt this would give us the best opportunity to stand out and fill the needs of our potential users. But first, we needed to sit down and have a chat with people we thought would be the perfect suitors for Array.

User Interviews (and our Survey):

We created and distributed a Google Survey to weed out candidates we thought would provide us with the insights we needed, as well as gather valuable data on current app usage and perceptions of Moleskine as a brand.

An interviewee and I during an interview over zoom.Another interviewee and I during an interview over zoom.

We wound up conducting user interviews with a variety of creatives, from digital and traditional artists to poets and hobbyists. We sought to understand their needs, frustrations with existing platforms, and preferences for new art-sharing networks.

The Divorce from the Moleskine Brand

During our interviews, we consistently heard the notion that Moleskine was not a brand for ‘artists like me’ from our interviewees. So, with an already existing suite of paid apps and quite a strong preconceived brand identity, we felt we could create a more approachable app that would reach more artists if we separated our branding from Moleskine itself.

We wouldn't determine exactly what that would look like for a little while longer, however.

Affinity Mapping

We synthesised the qualitative data from our interviews and surveys into an Affinity Map to identify key themes. This helped us frame the core needs and desires of our target users.

A screenshot of our affinity map.

Key Insights:

- Artists crave feedback and support, but toxic behaviours on other platforms discourage engagement.
- Discovery is essential- users want to find art that inspires them without being overwhelmed.
- The desire for customisable profiles and portfolios to show their work.
- Preference for a platform that enables the artist to save others work for future reference

Define

Introducing: Jamie, and her Problem

Jamie is a freelance artist looking to establish a stronger online presence. She often shares her artwork on social media platforms but feels limited by what’s available. She wants a more meaningful way to connect with other artists, showcase her process, and receive valuable feedback on her work. Having left school not too long ago, she misses the meaningful feedback that was so readily available whilst she was studying.

Our user perosna, with her needs, frustrations, needs and personality traits.

Using this persona we were able to synthesise this problem statement, derived from Jamie's, needs, frutrations and motivations:

"Jamie wants an artist-centric platform to showcase her work and connect with others because she is currently frustrated with the lack of meaningful engagement on social media platforms and she desires the constructive and valuable feedback she once had whilst studying."

The User's Journey in the Existing Climate

A large focus of our app was to alleviate existing problems, so a User Journey (pictured below) was a great tool to put ourselves in the shoes of an average artist’s experience posting on social media in 2024. To help us maintain a consistent goal, we used Jamie as our focal point for this journey too.

A screenshot of out user journey, showing the 5 stages.

The journey starts positively and our artist feels inspired by seeing other people's work, which sparks an excitement to share their own creations with the world.

The point where things began to go wrong was shortly after, during and following the sharing process as the engagement is far below expectations, in both quality and quantity. We want to avoid this cycle, as it can lead to disillusion and a reluctance to post and share.

How Might We’s

So, as a group we brainstormed possible “how might we” formatted questions, which would then force us to think broadly when ideating and sketching solutions to prevent this cycle within our App.

From the 10 HMWs we whittled down to, we then were able to pinpoint two which felt the most important per our problem statement and user persona:

How might we ensure that Jamie receives constructive and actionable feedback? How might we make it as easy as possible for Jamie to showcase her work?

Site Map and User Flow

Finally, before jumping into the ideation, we first wanted to establish a general structure of our app, which is where our site map (pictured below) came in handy. Using competitor analysis and feedback from the interviews, we determined what we thought the Skeleton would look like:

A screenshot of our site map.

Additionally, as we only had a short amount of time to create our prototype, it was important to isolate the user flow (pictured below) we believed was most fundamental to our app and what makes it distinct.

A screenshot of our user flow.

Develop

Sketching and Ideating

Now for the fun part (at least in my opinion). We began our collaborative sketching session. We went about this by selecting different “screens” from the user flow we wanted to develop, and spening two minutes with all three of us sketching the chosen screen simultaneously, keeping our HMWs at the forefront of our mind.

A screenshot of each of our sketches fro the 5 main pages from our flow. Landing page, home page, upload, curations and profile.

Afterwards, we would come together to discuss the outcomes, picking out certain aspects of each person's sketches to take into consideration when moving on to our prototype.

The Beginning of Prototyping

With our app still nameless and branding undecided, we had to keep moving forward, so we amalgamated our sketching ideas into a super duper lo-fi wireframe (pictured below). This was super helpful in just getting an idea of the general layout before we committed to our mid-fi.

A screenshot of our low-fi wireframe

With everyone aligned on this rough structure, we began the mid-fi prototype. Our goal with this was to have a usable representation of the function of our app, without any specific branding or detail. This way, we could conduct usability testing to iron out the kinks and problems, whilst having maintained minimal time investment.

A comparison between the mid-fi and hi-fi home page.

Usability Testing

The people we tested with needed to be those we hoped to be using our app in the future, so we tested with a small group of users from our original interviews.

Feedback was positive, particularly regarding the intuitive design and the potential for community engagement. However, there were of course ample opportunities for improvement. Below are some examples of the changes we were able to make as a result of the feedback we garnered from said usability tests:

Image showing how we reduced margins on the homepagefor posts to make the art more prominent.

1. Users preferred to have the art as prominent as possible, so we reduced the margins on post to make the art bigger.

Comparison showing the chnage in our comment icon, removing the plus that was inside.

2. The plus sign was confusing for the users so changed it to a more familiar comment icon.

Comparison showing the remvoal of the bio section from our profile page.

3. Users found the font too small and the bio section unnecessary, especially with the already existing ‘About’ section so we removed the bio to reduce clutter and improve legibility.

Comparison of the tool bar before and after, now with smaller icons and the upload button chnaged visually.

4. Users found the tool bar icons too big. Although we reduced the size of the icons visually, the clickable area remained the same.

Other insights from the testing to keep in mind for the Hi-Fi:
•    Comment Section: Users had difficulty differentiating comments from reactions, suggesting a need for a clearer separation between the two.
•    Text & Icon Visibility: Some areas required revisions in text sizing and icon visibility for improved accessibility.

Branding and Styling

Before the Hi-Fi looked as you just saw, we had the obstacle of needing to nail down what exactly our “app” looked and felt like. So the first priority was a name.

'array' - An impressive display or range of a particular type of thing.

Through a group brainstorming, what essentially boiled down to a word vomit, one name stood out above the rest, which of course you know to be, Array. Both the definition and sound made it, in our opinion, the perfect choice for our app.

A moleskine notebook with the colours we extracted from it adjacent on the right.

For our colour palette, Iago had the great idea to procure our colours from Moleskine notebooks, so we grabbed myriad images of books they sell on their websites. After narrowing it down to 4 different books, the original sketchbook gave us our favourite (pictured above).

Although we had separated from Moleskine’s brand and name, we could still include a small part of their identity more subtly and innovatively.

Logo Development

Redesigning our app from scratch meant we also had to create our own bespoke logo to represent Array, which stood out and portrays the image of our brand. We began by using an online logo generator to get our creative juices flowing, and from this Iago sketched a bunch of quick ideas, from which we pinpointed 3 options to develop.

A screenshot of the work in progress sketches Iago drew during the logo process, as well as the finalised choice.

The end product was stylish, clean, and fit the name, being an "array" of circles to create the letter A. With the logo and branding finalised, it was finally time for the Hi-Fi.

Deliver

The Final Product

With a name and branding finally determined, it was full speed ahead on building the hi-fi. We fortunately had a strong foundation to build from, so the process was relatively seamless.

We also felt that an onboarding process could mitigate some users' uncertainty about the app's terminology, so a quick, information-rich yet concise process was created for users on sign-up to make them even more comfortable.

I also created a presentation to showcase Array, and what it has to offer. Here are a few slides as a sneak peek:

A slide titled Who is Array for?
A slide showing off the Wip feature.
A slide showing off the tags feature for curations.
The title slide for the Profile and Portfolio section of the presentation.
A summary slide with visuals to sum up what you had seen during the slideshow.
An image showing off the badges feature within your profile.

Next Steps

Working on a 2-week design sprint we were facing time constraints which meant we couldn't cover everything we wanted to, however, given more time in the future we would have loved to have further developed features revolved around AI disclaimers and those to help prevent plagiarism, such as watermarks.

Reflection

My main takeaways for improvement going forward would be to delve deeper into research to inform our information architecture and to do more iterations of usability testing on higher-fidelity prototypes.

Overall, I thoroughly enjoyed this project from start to finish. Working alongside Iago and Jaweria was an absolute pleasure, and I was chuffed with the outcome. I feel like we delivered a professional and compelling app, that I hope artists would be excited to use.

Thank you so much for reading!