Case Study: Array (Conceptual)
“Introducing Array – a fresh, new app in the Art Social Networking experience."
“Introducing Array – a fresh, new app in the Art Social Networking experience."
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
- 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
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.
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."
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.
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.
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:
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:
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.
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.
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.
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.
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.
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:
1. Users preferred to have the art as prominent as possible, so we reduced the margins on post to make the art bigger.
2. The plus sign was confusing for the users so changed it to a more familiar comment icon.
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.
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.
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.
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.
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.
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.
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:
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.
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.