Instasize Redesign
About Instasize
Instasize is a photo editing app and a toolkit for social creatives. We help creators build content using advanced filters and editing tools. Our users also have access to exclusive tutorials and tips from social influencers and experts. Here at Instasize we‘re devoted to helping our users take their content to the next level and express themselves through visually engaging content. This is who we are now, but it wasn’t always this way.
Instasize began simply as a photo resizing app. Since then we’ve evolved into a full fledged photo and video editing toolkit. We have so much more to offer beyond resizing, and that’s what fueled our recent redesign.
The redesign goal
We’re always aiming to improve the user experience. In order to do that in the new app, we focused specifically on maintaining a clear hierarchy for navigation, increasing product engagement for features that are used sparingly, and creating a cohesive look and feel.
The design team at Instasize is currently four people strong: John Fabela, Kimball Frank, Charlie Steadman and Samantha Deherrera (that’s me!). Internally, we’ve wanted a redesign for a long time but we knew we would have to involve our users, engineers, and the executive team. Once everyone was on the same page with the redesign goals, we looked at product metrics to discuss what we were improving and any potential A/B tests. I’m going to walk you through a few of the major changes we made and explain our design thinking.
Design and Build
The first major change was moving our “Format” screen into the editor. The format screen is where you choose the dimensions of your photo. Although this step made it very clear what you need to do first, this also put a lot of emphasis on photo resizing since it is the first thing you do after selecting a photo. Photo resizing is not the most important feature in our app anymore so we decided to remove this step entirely and put the format feature in the editor next to the filter tab. Filters are currently our most important feature because that’s what motivates users to subscribe to our app. So it makes sense to see those first. This makes our navigation hierarchy much more clear. Filters are the first tab, and format is second.
Left: Old Format Screen | Right: New Format Screen
The next big change we’ve introduced is a third tray in the editor. Our app needed a better way to organize each main feature. Before this we had seven main tab bar icons and we needed to reduce this to 5. A scrolling tab bar tends to feel bloated with features and can be overwhelming for users. We knew that we could combine similar features, but we just needed an organizing system to separate them. After many iterations of this system on the UX and UI, we ended up with these pill-shaped categories. This system helps the user clearly see what page they’re on and notice the tray. In the example below, you can see on the right image how much easier it is to understand the different borders we offer: color, gradient, pattern, and photo. In the old design on the left, you actually go into another view when you tap color. This slows down the editing process because you have to x or check to get out of the inside view.
Left: Old Organization | Right: New Organization
Another change we’ve made to the UX is moving the collage feature to the editor. Collage used to be in the photo/video selection screen. In this screen you have to tab over to use collage. Since the user is choosing multiple images for a collage it makes sense to combine this with the single photo/video selection screen. When we implemented this, collage usage decreased. The collage feature used to be located in the editor and it did really well there, so we decided to try that again with this update. Collage usage has gone up significantly since moving it to the editor.
Left: Old Collage in Photo Selection Screen | Right: New Collage in Main Tab Bar Editor
Lastly, we updated the UI! Everything is a little rounder and friendlier, and we gave our users the option to switch from dark mode to light mode. We created light mode for a few reasons. First, a white screen is much easier on the eyes during the day. This takes the headache out of editing photos! Light mode also helps users see what their post will look like on Instagram with white UI. However if you like editing in dark mode or you are editing at night, all you have to do is go into settings and switch to the preferred mode.
Left: Black UI (Dark Mode) Right: White UI (Light Mode)
Design Conclusion
This update is something we’re extremely proud of at Instasize and we hope it creates a better experience for our users. By moving the format screen into the editor, the navigation of our app feels much smoother now and the hierarchy is clearly defined. It leveled out the playing field for each feature and gave prominence to our most important feature filters. We successfully increased usage of features that are used sparingly in the app such as collage and borders. Collage was hidden in the photo library so when we brought it out to the editor it gave it a place for people to discover while editing. The borders feature has a smoother experience because you no longer have to x or check when you are in a specific type of border. Now you can freely try different borders by tabbing over. Lastly, we achieved a cohesive look and feel by making sure all of the icons had the same design language and each tray had actual buttons for each editing item. Overall, this update has been a huge success and we will continue to iterate and create better experiences for users.
If you have any feedback on the design or any questions please leave a comment. We would love to hear from you!