essays

Arke Case Study

Arke believes in the idea that beautiful messages need to be shared. As creators it is our obligation to show the world our ideas. To inspire. Our stories are our art. They create empathy. Express an idea or an emotion another might be feeling. In today's world Instagram is a powerful tool to allow that message to be shared. Yet it's diffcult to be noticed in a sea of content. That's the power behind the hashtag. To categorize your content. To help be seen by those looking for what you are trying to say. Yet, those hashtags tend to take a long time. As creators we might lose motivation sharing content when are spending 20 minutes just to hashtag a photo. It's discouraging. Arke is the tool to build that motivation again. To speed up the time a creator spends hashtagging. Allowing them to get back to their real work. Telling a story. It's an app and keyboard that allows a creator to organize, create and import hashtag lists. They can then quickly post their hashtags with their content right inside of Instagram never having to leave it.

App link: Arke iOS App

This is the entire case study of Arke from inkling of idea to finished product on the app store.

executive summary

The Idea

The ability for content creators to quickly hashtag their content without leaving the app. To be able to organize, edit and post hashtags without having to spend 30 minutes per post. To build a brand that believes in helping creators spread a beautiful message to the world.

The Approach

Creating an app and keyboard based on a minimalism approach. Design that helps Arke achieve its job of being in the background as a tool. Architecting the idea from paper to prototype. Storyboarding the flow of the idea. Understanding where a user might get stuck. Iterating rapidly through a prototype leading to a well thought out final development.

The Outcome

A 5 star rated application on the iOS store. Reviews raving about the time saved and the ability to share better content. Creators being confident and excited to spread more messages without getting hung up on hashtags. Being able to be seen despite the small size of their following. Beautiful stories being told around the world.

table of contents


background

In a time like no other we have to power to be fully independent. We can be recognized across the world for our voice. Our personal brand. Our company's brand. We don't have to jump through hoops and go through middlemen. We can directly speak to our audience.

That's the power of the internet we have today. Though this power is a double edged sword. The idea of social and sharing can be a burden. It can be distracting. Taking us away from ourselves. But if we are able to use it right it can also be a great tool to spread our message. To inspire others. To create a group that believes in a cause. In an idea together.

That's what I have seen inside of Instagram. For all the thoughtless content there are thousands of profile trying to say something. Spreading goodness and beautiful ideas. As I was exploring this idea I began to learn how to grow my own Instagram. Wanting to spread my ideas and messages. Learning about building better content, being consistent and the power behind the hashtag.

Posting more content I found it increasingly frustrating to organize the hashtags. Having to write them out. Or keep them in a separate note page. Difficult to modify and edit. It was taking me at least 10 - 15 minutes. Yet when I did use them I was gaining so many more views. From 20 likes to almost 200.

The hashtags told a detailed story. They were the threads of the content fabric. Telling us where they belong and if it's something relevant to us. Such as those seeking better photography or inspiration for traveling.

That's when the idea came to me - to use the new iOS 3rd party keyboard. Able to instantly pull up the hashtags you want to use and post to your images.

The idea was to build a keyboard & app that you can:

brief

The first goal was to find a name. It had to be something better than Instagram Hashtag Keyboard. Sure it would have garnered a short term benefit of showing up quickly on the App Store but I believe in the long term. I believe in connecting with a brand and believing in a message. It makes you loyal, understanding and empathetic to a brand's story.

So I thought about messengers. About sharing content through history, how difficult it used to be. The importance of sharing messages, humans being storytellers for such a long time. What came to me was the idea of the messenger to the Gods. A message that could travel across the world. From the earth to the sky. A lot like our internet of today. Messages able to be told in an instant anywhere in the world, even above to our satellites and space station.

Iris was far too on the nose. It was overused and overdone. The name would be drowned out in a sea of other apps. Instead I did my research to find Iris had a twin sister, Arke. Arke was the messenger to the Titans. Even better, us humans being the powerful titans of the world. Shaping it. Exploring its depth. Yearning to go beyond our little planet.

Arke was the name to be chosen. Easy to say. Short. Yet had a background connected to sending a message across the globe.

Arke's purpose was to be in the background. It wasn't to disturb the user. Only to help guide them in creating their hashtags. Then quickly and easily post those hashtags with their content. It was to be muted in a way. Able to blend in yet do its job. With that idea I explored muted colors. Colors that had little flash but enough contrast to help the content become easily decipherable. Separating content from actions steps. I came to the conclusion of using variations of gray and one beautiful light blue representing the sky.

Arke Color Palette

On the same idea of muted choices, for the Typography I chose only one font. The new Apple San Francisco Font. Now choosing one font and the default iOS font at that may seem like a lazy choice. Yet it was deliberate. It was about picking a font that users were familiar with. Able to quickly read it. One optimized for the iPhone.

More important the purpose of Arke was to be used as a tool. A 3rd party keyboard. An extension of the phone on top of Instagram, a widely used app. In that case it couldn't be a font that clashed. Or called out for attention. It had to be a font that would sit in the background. Communicating clearly. Using the minimal color choices I would then be able to create a simple hierarchy off this typographic choice.

As for the choice of form and layout I decided to go with a simple top down table. Able to quickly go through your lists like you would a Spotify playlist. Where you browse your playlists and then edit the songs inside of them, you would do the same with hashtags. These lists would then continue further when adding your hashtag. Each hashtag on an individual row. Easy for a user to see what hashtags they chose. The list would also allow for easy reading when pulled up in the keyboard.

Table approach for Arke

As the keyboard doesn't allow much space. Using this list approach it was easy to build a common thread among the app and keyboard. Almost a seamless experience. The only time it changed was for the individual hashtags, this time resulting in a grid one could quickly scroll through to find their relevant hashtag.

Grid Approach for Arke

Now that the ideas were coming together it was time to create a logo. Something that would continue to elevate the message and stay minimal. Again able to be seen yet not yell for attention. You can read more about the logo development process here: Design Process Behind Arke Logo

Using the logo's framework of sharp rising lines it was easy to decide on the icons used for the menu. Staying true to clean, simple lines. Sharp lines without much fluff. Minimal but communicated clearly. Icons from Noun Project

Icons for Arke

storyboard

When it comes to creating a well thought out UI experience especially in applications it's important to determine what each phase of a feature will look like. How will the users interact with the application? What does each process look like when it starts and when it ends.

Taking from the idea of production, I enjoy storyboarding these processes. Trying to take a best guess as to how a user might flow through the features of the application.

When first starting an application it's important to keep the features to the absolute minimum. Storyboarding those features and then using a Prototype tool such as Flinto to show users. Seeing how they interact with the screens. If it makes sense to them. What pages they get stuck on.

Despite many thinking that this is a lot of additional time in the end it ends up speeding up the development process. That's the power in letting our industries flow with each other rather than be separate entities. Designers and developers who understand each other's process a little better can develop the correct tools and resources to speed up all cycles. Design should not be seperated

When the developer is finally ready to create they have a tested and prototyped application. They can quickly refer back to the screens and understand how the features work without needing to email back and forth so many times for small clarifications. It's important for our ideas to be grounded. To be taken from our heads to a tangible thing we can see and interact with.

In my case I was the sole designer and developer. It was valuable to me to make sure what I saw in my mind worked in reality. That I could see each screen happen and free up processing power in my mind.

With that I storyboarded 3 different processes -

I focused on the absolute minimum amount of features. Below are the description of those features and some of the images of the storyboard for each feature.

Application Cycle:

Keyboard Cycle:

Help Cycle:

testing

Once I created all the storyboard scenarios I put them together in an prototype tool called Flinto. Which allowed me to put the storyboard into a final test product. Able to click each page and go through the process. With a link attached to the prototype I was able to share it with users. Getting feedback rapidly and seeing the idea in a tangible way.

Having not developed any code I was able to quickly go back to my storyboards. Fine tune the changes. Reupload a new prototype and keep iterating. Until I had my final concept ready, planned and tested.

You can view the prototype of Arke here:

Arke Prototype on Flinto

A short video showing some of the prototype:

development cycle

After having set the strong foundations in place it was time to code with the same idea. Code that was minimal, stripped and ready to bring the idea to life. The design and prototyping created a sense of confidence on what to code without doubt if it will work or not.

The biggest roadblock was creating an iOS 3rd party keyboard. This was a relatively new feature. Something with very little documentation. Especially one that needed to access an external app that would edit the keyboard on the fly.

Now the development process is long, complicated and parts of it are a company secret. However, I can describe some of the thought process.

Application side development

Much of this development is relatively straightforward. Using table views you can create a list of categories. Inside of those categories is the meta information like the hashtags, if this list requires a spacer, number of hashtags, if it's over Instagram's 30 limit.

Since the application was kept to a minimalism approach. The preset and custom lists shared similar views and code.

The fun part was building a complex regex pattern for importing a list of hashtags. The general idea is many content creators keep their hashtags in notes tab somewhere. Yet this list could be different for each creator. It could have commas, spaces, weird characters. My thinking was that many creators want to copy and paste right away so their lists are kept fairly similar to Instagrams rules. Meaning a space between each hashtag.

Since the hashtag is an anchor point. You can focus the pattern to search for a hashtag grab all letters after it, throwing away the space at the end and grabbing the next hashtag. From there each hashtag is numbered and put into the custom list, able to be labeled and customized.

The help pages were also straight forward. Creating a slider of images to guide a user who may be stuck. Looking forward it would be nice to create quick videos to show up on each part a user may be stuck on.

Keyboard development

Here's where it gets interesting. Much of the information on 3rd party keyboards was related to doing things like language keyboards and emojis. Few keyboards imported information from an app and then displayed that information. This was a process that took a long time to get right.

Essentially using Swift's prototyping nature I created a link between the keyboard and the app code. Grabbing the same tables and lists. Populating them with the information already stored in the app. Checking for the customization options like spacers and adding those in.

The keyboard had a few custom functions of its own. One was scraping all the lists to build a large grid table of individual hashtags compiled from all the lists a user had saved.

The other function was reversing the import hashtag feature. This way the keyboard could have a delete function that would remove one hashtag at a time instead of letters. Allowing for quick edits on the fly.

Essentially a user could load a custom list. Delete the hashtags they didn't need. Then jump into the individual hashtags selecting new ones they might want or simply typing up a new one.

launching the app

Thanks to putting in the deliberate time in getting the foundations right, launching the app was a breeze. Creating a website was founded on the same colors, typography and minimalism. The final factor was the url name. For marketing reasons I chose to grab hashtagkeyboard.com. Making it easy to be searchable. Knowing when a creator gets frustrated like I did that's one of the first things they might try and Google.

website: Arke Website

For the website it was important to quickly describe its features and have a link to the app store. Along with creating some videos that show how the app works. Beyond that the use of Arke is inside the mobile app vs the website.

Arke Launch Brainstorm 1 Arke Launch Brainstorm 2

Once the app and video were launched it was time to make some videos that described what the app did. Creating a 3rd party keyboard like this was a completely new idea. Part of the mission then is to inform users how to work the application, what it does and who it might be for.

Arke Launch Brainstorm 3 Arke Launch Brainstorm 4

Storyboarding Ad Campaign

Part of the launch campaign was to build videos to show how the app works. More importantly I wanted to create videos by content creators. Having them make a short film of them using the app during the work flow. Showing how easy it was to flow through the app. How much easier it made their time.

It was important to build beautiful videos with real content creators. It was part of the message. That your content matters. It's important to share your content and hashtags don't have to be evil. They are a tool. As content creators it's up to us to share beautiful content. It's our obligation.

The first video to be created was showing the app in use. How lists are created and the process of using the keyboard on Instagram.

full video: Arke Features Video

short gif:

storyboards of video:

feature video storyboard feature video storyboard 2

The next video was to show how a content creator would use the app. The goal was to make a video that had atmosphere. That the video was meaningful and showed how the app worked without simply trying to sell an app. Rahter, selling an idea. The importance of spreading your message. So for the first video we chose to film it on a beautiful mountain top. The photograhper comes across a beautiful scene and wants to quickly capture it for her audience. She doesn't want to spend her whole time hashtagging. So she decides to use the Arke Keyboard and one of the presets to quickly setup hashtags for her content.

full video: Arke Ad Video

short gif:

storyboard of video:

ad video storyboard

the final results

Arke is now live on the App Store. It's continued with a 5 star review and minimal updates. Doing all the upfront work of making sure my designs and flow had a good rhythm I've been able to keep the app running with minimal upkeep.

App Rating

The reviews show how much it helps save user's time. More importantly it gives me pride knowing I built a tool that will help everyone not only share better content but able to find it.

Reviews of App

There was an intense amount of learning during this process and mistakes to fix for next time. One thing I'd like to improve on is getting social media influencers on board with the idea ahead of time. Building more hype. Using the prototype to launch a splash page site to get more eyes and build buzz.

I'd also like to update the app to fit the new iPhone X screens along with building better help pages, perhaps using video to describe the processes. Looking forward I'd love to get more content creators to make videos of them using the app. Trying to showcase how Arke is helpful across a broad range of content. How sending the message to the world is important and now easier.