Project Overview


Total Project Time: ~1 month

Role: Lead Designer

Responsibilities:
• Customer Research
• Platform and Competitive analysis
• Rapid Prototyping & Testing
• Updating existing components to new design system
• Documentation

Preface



One of the fastest growing content digestion formats the world has ever seen is stories (growing 15x faster than feeds). Becoming popularized with the rise of Snapchat, limited time images and short videos of "what's going on" exploded when the format was introduced to Instagram.

Quickly growing adoption from Instagrams 500 million daily active users the new format became a goldmine for brands and influencers to create targeted, expressive and most importantly, limited-time view into their worlds and messages. Whether it's gaining a glimpse into the night of your favorite celebrity or being notified of a sale at your favorite store, stories became the most personal pocket-sized billboard.

For us at HeyOrca, Instagram was the third most utilized channel behind Facebook and Twitter. Both of these titans have content that is seemingly thrown together at the speed of light. Some reused proven-to-work graphics, some standard slightly customized copy and boom, a week of Facebook and Twitter content is ready to be published. But standard Instagram posts take time and skill to become attention-grabbing content that stands out in a wall of highly edited media. Normal Instagram content for an agency or influencer also has to be on brand with a known look and feel, but also needs to be unique enough to not look stale when viewing their profile page. Hitting both unique, eye-catching, and on brand simply takes time and talent.

But for screen-by-screen stories, there was a shift in the Instagram ecosystem and suddenly the importance transferred from the visual uniqueness and beauty to the message or question the story contained. You're able to reuse proven-to-work visuals to stay on brand and since its only seen for a limited time, people generally don't remember the visuals you used last week, keeping everything looking fresh.



Another big shift was that stories no longer had copy being placed inside of a text box like 90% of social content. Instead, the copy of a story is designed and placed directly onto the media, along with gifs, animated stickers, and interactive widgets such as polls and questionnaires.

At face value when we first selected this project the act of adding another content format type seemed simple. Being able to preschedule a social post for a later date we already did, and did well. Being able to quickly share posts via a shareable link to review with your team or clients we also did well. Collaboration, although some awesome updates were coming, we also did at a basic lever very good. So all we needed to do was make a 9:16 post container and we're 99% done, right? Wrong.

Out of the gate while talking further with our users we learned of 3 unforeseen pain points we were going to face:

1: The overlayed UI elements such as profile information, the button to forward a story to a friend, and the text box for sending a message that Instagram includes plays a factor when creating a story.



2: We needed a way for people to select the post type that is within a channel, which we hadn't required before (ie. choosing between an Instagram Post or Story) which was an introduction of post subcategories.



3: We learned that people don't always like to use the full screen in a story, and they want to quickly crop and manipulate their media. Due to this, Instagram has some awesome color algorithms to help spice up an empty background that we needed to try and replicate.



Outside of the main goal to include Instagram Stories for our users, since this project was going to touch our post container it meant there was an avalanche of "can we also" requests from all corners of our company. We had to be firm here, as much as myself and the wider team always want to do as much as we can, we have to stay on track with our roadmap. We required this project to be completed by a deadline so that we could stay agile, learn, and iterate as fast as possible without making too many changes at one time. But there were a few small tasks we chose to fit in here that made sense.

For starters, updating and improving the post preview accuracy is always a top priority. Back in early 2017, we included a rough MVP feature that allowed users to flag a post as either purely organic, requiring boost budget, or a full-blown ad. It had proven to be useful and was released to all of our users, but the underthought UI implementation hurt our preview accuracy, and the discoverability & usability of the feature was poor. It was a tiny but important feature that was tucked away and forgotten and we never really got around to iterating. We had ideas already designed for how we could improve this feature, and considering we were about to touch the component anyways, it was a good time to clean things up.

At the same time, we were also beginning to implement our new design system/style guide, which made sense to update a lot of our old inconsistent elements that the post container used. A lot of this was messy spacing and inconsistent sizing, improving elements that didn't give enough context/information, and responsiveness issues


By stretching the scope very slightly with some efficiency and usability updates, we were able to kill a multitude of birds with one stone.

Finally, after a multitude of whiteboard sketches, wireframes, quick prototypes in Figma of how this could work, and show and listening sessions with users and the internal team, we narrowed the project down in roughly two weeks to an outcome we were pleased with.

Two more weeks of back and forth with Development, myself, and the rest of the internal team, and we released a highly useable, and quickly adopted new format within our platform! Version two which includes further edit functionality for media and layers along with more performance updates is already being planned, and the third version with some further tweaks and polish is quickly behind that.

This project was a learning experience in not only visual design, UX, and User Research, but it taught us all a lot about really tangly project management, a project scope that keeps wanting to grow with seemingly no end, and flexing our goals without taking on too much.

This update was a big step for us, and we're all super happy to say we now support Instagram Story planning, collaboration, and design all within the HeyOrca platform for all of our amazing users.