Sideview

Designing a different kind of social network

During my time with the 3S Studio team, we set the cornerstone for an app that would challenge the social media status-quo from an entirely different angle. To get a better understanding of what Sideview stands for, I find it more appropriate to quote Steven Klimek—the visionary behind the project—by saying that “Sideview enables you to mindfully journal and share authentic content and tap into other perspectives based on activities and emotions relevant to you”.

Mobile app

Sideview was going to be a mobile-only tool that would allow people to express themselves naturally, freely and most importantly anonymously, without fear of being judged by others. Working very closely with Steve Klimek and Paul Bulencea, we took a holistic approach to building the app and spent a lot of time laying down ideas on the whiteboard way before we could even begin to visualize even a single application screen.

User flows: Figuring out user interactions using paper prototypes

With session after session of brainstorming, we got closer to what we believed would set Sideview apart from your typical social network. We thought that anyone, at any given moment could be described as the sum of what they were doing, how they were feeling and what results they were getting out of their state. This combination—represented by our Visual Hashtag concept—would now help people connect based on experiences, instead of just their identities:

Visual Hashtags + Anonymity + Locations – Judgment = Sideview

Everything from this point on had to revolve around the Visual Hashtags, from submitting new posts—which we called IDs—to analyzing past content to make sense of what is important to you as a user. We therefore split the Visual Hashtags into three types: activities, emotions, high-level emotions. A combination of any of these three hashtags was supposed simplify the way in which users could express themselves, free of the burden of having to put it into words.

Because this radically new app concept aimed to help people connect via their personal experiences, we also built a rehash functionality which we called Remix. Since users were sharing an experience by visually tagging a photo, there was always the possibility that their photo could in turn inspire someone else to share their own experience and thus be remixed and shared again into the Sideview platform.

Once we had most of the features penciled in, together with the development team from 3S Studio, we put together a simple paper prototype to figure out some of the main user flows before moving on to mocking up the screens. A preview of this prototype is available, below courtesy of Marvel app (just hit play and start clicking aroung):

As the pencil has always been more convenient for me than the pixel, this helped tremendously in getting things going fast and figuring out if what we were doing made sense. Apart from that, the sketches and paper prototype helped me be more focused on the finer details once I moved on to mock-ups, since most of the usability issues had already been figured out. Screen by screen, I created the user interface for each possible action that the user could take and handed them over to the development team one by one as I progressed.

Login flow: 1. Login, 2. Create account, 3. Set password, 4. Welcome tutorial
User flows: 1. Settings, 2. Dashboard, 3. New ID (add photo), 4. New ID (photo selected)
New ID flow: 1. Choose hashtag, 2. Add text, 3. Set location, 4. Search for location

The team at 3S Studio did a great job at finding the ideal means of implementing each of these features. We worked together tightly to figure out the best compromise between what is technically possible and what is enough to deliver a high-quality app that would help people connect on a more deeper level.

Website

While the team was working on implementing the actual iOS app, I switched my attention to the website that was going to promote the app and showcase its features. Right from the start we didn’t want anything overly complicated and decided to stick with a CMS-free website that had a simple structure, easy navigation and straight forward message.

Website: Responsive layout has impact on both desktop and mobile

Working closely together with Steve on this, we agreed on having a simple welcome screen regardless on the fabled fold above which everything of key importance should reside. To make things more intriguing to new visitors, I even animated the logotype to include Sideview’s iconic Visual Hashtags and only displayed the basics of what Sideview was in three simple blocks—Why? How? What?—with the rest of it available under the fold.

Logotype animation: Looping through icons as part of the ID
Sketches: Wireframing logo animation and responsiveness

Obviously designing and developing this simple website took me a lot less than it did the team to implement the entire mobile app, which is why we launched it as more of a teaser, leaving visitors with the option to sign up for a newsletter to find out when it will go live on the App Store.

Homepage: Single page design focusing on how the app benefits the end user

Since the first user of any app or service is always the one creating it or working on it, Sideview was a great opportunity for me to learn more about how I view the world around me and how people interact which each other. Working on this project with Steve, Paul and the 3S Studio team allowed me to expand my skill set but in the same time experience what a full-blown agile project is like in a small startup environment and for that I will always be grateful to everyone involved in the project.