ozone-cover.jpg

Ozone App

Responsibilities: User Experience / UI Design / Prototyping / Qualitative Research / Product Design Lead

A culture represents who we are and gets at the heart of what inspires our users and team. We want to set the right tone of the community by growing a culture that is built to last, continues to evolve, feels special, and is unique to Ozone. When the culture of our community is in alignment with the vision, mission, and strategies, success follows.

The Ozone app is a community built with the intention to get creatives to connect with like-minded people, collaborate & showcase their work.

Below you’ll find how I took the project through 3 different phases: initial ideation, beta version and first launch.

Brief

Brief

Initially gone by the name Canvazone, the app was intended to become the social-media-go-to for creatives. Sort of like a mash-up between Facebook, LinkedIn & Instagram - targeted towards musicians, artists, dancers and so on. The challenge with this project was to design a platform that could drive engagement, create habit-loops & feel very easy to use. Since the goal was to be a social media app, it was crucial that the design appealed to a big crowd of users.

Solution

Solution

The live version is the outcome of a lot of research: data analysis, user behavioural analysis, heat map studies and in-person interviews with selected user groups. There were 2 goals that we wanted to achieve with this design. First off, give users the tools to create awesome looking profiles and posts. As seen above, users can create their own post layout of multiple images and videos.

 Secondly, make it easy for them to  discover  one another. Users can  tag their profiles  with skills. And with our  feed filter , you can easily search for just the right creatives to connect with.

Secondly, make it easy for them to discover one another. Users can tag their profiles with skills. And with our feed filter, you can easily search for just the right creatives to connect with.

Approach

Approach

First step was to identify and design the core features. The main ones we wanted to focus on were the post uploads, feed & profiles. What makes Ozone stand out is the way the post upload function is designed. Instead of uploading single images and videos, you’re able to create and customize a grid of multiple media contents in a single post. The challenge was to design it in a way that would make it simple for users - since this was a unique feature that no other app have in the market.

I chose to design some iterations of simple wireframes to walk through the different views a user would encounter. Thereafter, I started to design the first drafts of what would become the beta version.

My weapons of choice were Sketch, Flinto, InVision and After Effects. They were all used in order for us to quickly take a design draft to a simple prototype (Sketch to Invision). Once that was set, I designed high-end prototypes with Flinto and After Effects.

  High-end Prototypes   My focus was to create prototypes that felt just like the real thing, in order to save time on development iterations. These prototypes were created with  Flinto . As we finished the final iteration of the prototype, we extracted all the animation values from Flinto. The designs were then handed to the development team including styleguides with accurate specs, assets and code snippets via the design/development collaboration tool  Zeplin .

High-end Prototypes

My focus was to create prototypes that felt just like the real thing, in order to save time on development iterations. These prototypes were created with Flinto. As we finished the final iteration of the prototype, we extracted all the animation values from Flinto. The designs were then handed to the development team including styleguides with accurate specs, assets and code snippets via the design/development collaboration tool Zeplin.

Process

Process

Struggles

The purpose of the post uploads was to give users the possibility to be creative with their posts. Now, figuring out how to get users to understand the complexity of the post uploading tool was the biggest challenge. Initially, the design strategies chosen for the beta version was based off of the team’s logic perspective on how simple the tool was. In reality, there’s no fixed logic behind a user’s journey. Each user thinks differently and we had to find a way to adapt to many of them. The conversion rate for users succeeding completing a post according to our expectations was very low.

Success Point

Combining smart design with intelligent technology we were able to serve the users with the right tool. The post functionality was designed to teach the user how it works as you use it. I realized that giving the user too many options would make it harder for them to find it simple. So we cut off the extras and focused on making it simple and fast for each user to go from the upload button to an uploaded post.

 2018 - Redefining the whole uploading process & profile structure.

2018 - Redefining the whole uploading process & profile structure.

Result

Result

By focusing on what the users wanted to do in the app, and strictly basing the design off of that, we ended up with a product that converted much better.

Learnings

By getting rid of everything that is not essential to making a point, we ended up with a product that was laser focused to do what it was intended to do.

If given the chance, what would I do differently?

Putting the user - instead of the product - in the center of the design strategy.