Eric McCrorey
UX / UI designer

Nano Flick

A mobile app that allows users to create professional-looking videos with a storyline with little to no editing required.

Image alt tag

Project

Nano Flick

Role

UX/UI Design, Team of 6

Duration

5 Weeks

Tools

Figma, Slack, Usertesting.com

Overview

Nanoflick is your one-stop shop mobile platform for quickly creating, editing, and sharing videos. It specializes in making multi-shot, short story-driven videos, with little to no editing. Generated with shot-by-shot instructions, provided with hundreds of videos that users can access from a user-generated template library to help create the perfect video every time.


The process:

  • Research

  • Ideation

  • Design

  • Prototype

  • Testing

  • Dev Handoff

  • Reflection

The problem:

The app struggled from the beginning with UX and UI issues. The app was outdated, didn't meet industry standards, and struggled to communicate effectively with the users. You didn't really know where to begin.

The Solution:

To fix the UX and UI issues we created a more modern app that met industry standards that were functional, visually engaging, and fun to use. We completely revamped the app from head to toe. From creating better onboarding to a modern homepage design to a multi-shot feature that reduced the number of shots from 10 down to 5 to make it more seamless and easier to use.

Research

Responsibility

Before we began I met with my team over zoom and we discussed the project scope and the client's goals of the project. During the meeting, we established key areas we needed to focus on and the time frame at which the project needed to be completed. Our goal was to fix the UX and UI issues by creating a more modern app that met industry standards that were functional, visually engaging, and fun to use.

Client Questions

After the initial zoom call with the team, the first step was to prepare a list of client questions related to the project so that we can get a better understanding of the client's needs and goals. Some of the questions are as follows:

  • What is the overarching goal of this app? What roadblocks do you feel are hindering your progress, if any, in reaching your overall goal for this app?

  • You mentioned in the kickoff call, you want to help users start and finish a video - can you share data collected about experiences regarding this problem so far?

  • Are there any features you feel your product needs you would like for us to add/focus on?

  •  Do you have specific apps you like the UX/UI of and want us to take inspiration from?

  • What research has been done till now? Which techniques were used? Were they helpful? How?

  • How long from start to finish does it take to make a video?

Heuristic Evaluation

Next, we needed to conduct a heuristic evaluation because the app had a lot of outdated features that needed to be addressed. As a team, we began to look over the original app and target key areas we needed to address with the client and focus on as we move forward.

The Four major usability issues we encountered while conducting this evaluation were:

  • Visibility of system status: Navigation did not indicate where the user was in the app.

  • User Control and Freedom: There was no undo option when trying to add a filter, Trying to remove text from screens was confusing, and icons were also confusing and didn't do what they intended.

  • Flexibility and efficiency of use: There was no onboarding at all. templates were confusing and difficult to use.

  • Aesthetic and minimalist design: screens were busy, and screen design and icons were dated and not visually engaging. The text seemed all over the place and not consistent at all. The logo seemed a bit generic.

Ideation

User stories

After completing the initial heuristic evaluation, our next step was to develop user stories based on the scope of the project. Doing the user stories really helped us focus on the most important aspects of the project. The user stories were then organized into the order of priority of (High Priority, Medium Priority, and Low Priority)

Nano Flick

User Flow

After we completed the user stories we gathered all the info we received and created a user flow to layout a structure base on how we thought the app should flow. Doing this helped us focus on key areas in the design process.

Nano Flick
Design

Wire Frames

After completing the user flow we began the wireframe process by implementing industry-standard designs and functions, to make the app more accessible. We wanted to ensure we kept things simple and intuitive while focusing on the client's goals.

UI iterations

After completing the wireframes and receiving the client's approval. we began the Hi-fi wirefrmaing process and created 3 versions of the same screen for the client to decide which he would like to move forward with.

Nano Flick

Style Guide

After completing the UI iterations and getting client approval on the style of design they liked. We were now ready to move forward and put the finishing touches on the style guide and move one step closer to completing the project.

Hi-Fi Wireframe

Once the style guide was finished and the approval of the client was received, it was time to put the finishing touches on the project.

Prototyping & User Testing

Prototype

The client loved the new designs and functionality of the app. Next, it was time to see all our hard work in motion.

Nano Flick

User Testing

After we completed prototyping we went one step further and conducted a usability test so that we can fix any hiccups that we may find before the final send-off.

Key findings from the usability testing:

  • Issue #1: The first issue we found was that many users had difficulty shooting single-shot flicks. In order to solve this issue, we recommend adding an overlay that pops up when users tap on “Create New Flick.” In this overlay, users can select a multi-shot flick or a single-shot flick. Once the users select a multi-shot flick, they then would be taken to the template screen; if they chose the single-shot flick option, they would then be taken to the camera. Doing this would create a clear path for users to produce both types of flicks. 

  • Issue #2: Users also had trouble finding drafts. In order to fix this issue, we recommend adding an icon and increasing the font size of the label. The current label we had was small and unclear, so users would miss it during the testing process.

    Overall, the users reported a positive liking to the overall design of the app.

Dev Handoff

Dev Handoff

The project is complete and now it's time to deliver it to the client for their team to bring it to life. We used autoflow and annotations in Figma to further communicate the navigation and functionality of our design.

Nano Flick
Reflection

Reflection

I really enjoyed this project because we really got to use our imagination and creative abilities with this app. It was fun to be able to see the before and after of what it was to what it became. In some ways, it was a bit of a challenge to try to incorporate trendy industry-standard functions and design while trying to stay true to the client's goals. The best part for me was hearing that the client and his team were already implementing our team's designs into the app. Overall I'm very pleased with how this app turned out.