Project Case Study

Arrow Media Pro

Optimizing consistent contact and direct feedback to enhance efficiency throughout the work process between a media production company and it’s clients.

A smartphone leaning on a sleek piece of stone showcasing a media app design
A smartphone leaning on a sleek piece of stone showcasing a media app design
Logo of a media production app
Two smartphones leaning on a sleek piece of stone showcasing a media app design
Two smartphones leaning on a sleek piece of stone showcasing a media app design

Project Overview

Project Overview

Role

UX Designer & UX Researcher

Duration

5 weeks (2021)

Tools

Figma, Adobe Photoshop

Arrow Media Pro is a growing company, looking for the ability to expand their client base. To attract more clients and build a professional portfolio, they recognize the importance of comprehending their clients' visions and effectively showcasing their brands. However, being a small team, time spent on projects has consistently become an issue. The process of understanding clients, creating content, and iterating through multiple rounds of edits often exceeds the expected timeframe, mainly due to the challenges of scheduling calls and meetings to drive progress. Arrow sought a solution to enhance direct communication with clients, improve consistency, and expedite project turnover. This would allow them to allocate more time to new clients, foster company growth, and increase the frequency of delivering high-quality outputs based on a deeper understanding of client requirements.

Challenge

Challenge

Many of us experience the daily challenge of not having enough time to accomplish our tasks. For businesses, this struggle can be even more daunting, hindering growth and amplifying frustrations. Arrow Media faced a similar predicament—they had existing business opportunities but lacked the bandwidth to take on more work. Understanding the underlying cause was crucial for finding a solution. Arrow needed a way to better maintain consistent, direct communication with current clients, receiving timely feedback to ensure a smooth workflow. This would better allow them to meet deadlines and deliver high-quality work, therefore being able to allocate more time to new clients.

Utilizing time effectively is critical

Solution

Solution

A client interaction platform would alleviate Arrow's current frustrations and limitations. This platform would enable direct communication, seamless sharing of project updates, and real-time feedback discussions. As a result, Arrow could shorten project timelines, align the end-product with client goals, and create space to grow their company.

The picture became clearer

Redesign (2023)

Redesign (2023)

Initially developed as a final project during my UX education, this project involved collaborating with a real-world client. Recently, I decided to revisit it to enhance the previous work and showcase my evolving skills as a UX designer. Utilizing the insights from the original research phase, I revamped the design with a modern layout and contrasting colors that blend professionalism and creativity. With the company's creative focus in mind, I opted for a bright shade of purple against a dark background. This choice also takes into account users primarily viewing video content and aimed at reducing eye strain with the darker backdrop.

The app offers dual perspectives, representing both the customer and Arrow's business. It primarily focuses on customer interaction, feedback discussions, project tracking, and workflow management.

Below you can view and compare the original design to the updated version, as well as walk through my entire design process for this project, including changes made within the recent redesign.

Mockup of multiple smartphone screens showcasing a media production app
Mockup of multiple smartphone screens showcasing a media production app

Stage 01: Research & Discovery

Stage 01: Research & Discovery

Competitive Analysis

Competitive Analysis

The apps I reviewed were primarily focused on video editing, and while Arrow's app wasn't specifically intended for editing purposes, they all had one crucial feature in common: the ability to facilitate collaboration and communication for ongoing media projects. This specialized aspect of these video editing apps presented a valuable opportunity for Arrow and its clients to effortlessly monitor project progress, exchange feedback, and engage in real-time discussions. The limitations of scheduling calls or being confined to a computer were eliminated, providing a seamless experience for all involved.

Evercast

Strengths

• Collaboration and feedback allows on screen drawing and timestamped notes • Sessions can be securely recorded and played back • Allows streaming from any media source

Weaknesses

• Can be expensive • No Android or iOS availability

Evercast

Strengths

• Collaboration and feedback allows on screen drawing and timestamped notes • Sessions can be securely recorded and played back • Allows streaming from any media source

Weaknesses

• Can be expensive • No Android or iOS availability

Evercast

Strengths

• Collaboration and feedback allows on screen drawing and timestamped notes • Sessions can be securely recorded and played back • Allows streaming from any media source

Weaknesses

• Can be expensive • No Android or iOS availability

Frame.io

Strengths

• Collaboration and feedback allows on screen drawing and timestamped notes • Content organization • High upload speeds • Simple UI and low learning curve

Weaknesses

• Not available on mobile • Issues with bugs that disrupt workflow

Frame.io

Strengths

• Collaboration and feedback allows on screen drawing and timestamped notes • Content organization • High upload speeds • Simple UI and low learning curve

Weaknesses

• Not available on mobile • Issues with bugs that disrupt workflow

Frame.io

Strengths

• Collaboration and feedback allows on screen drawing and timestamped notes • Content organization • High upload speeds • Simple UI and low learning curve

Weaknesses

• Not available on mobile • Issues with bugs that disrupt workflow

Adobe Team Projects

Strengths

• Compatible with other Adobe tools • Customizable layout • In-depth editing ability with plenty of features

Weaknesses

• Higher learning curve • Only allows for one editor at a time • UI can be improved upon • Notable crashing issues • Subscription based

Adobe Team Projects

Strengths

• Compatible with other Adobe tools • Customizable layout • In-depth editing ability with plenty of features

Weaknesses

• Higher learning curve • Only allows for one editor at a time • UI can be improved upon • Notable crashing issues • Subscription based

Adobe Team Projects

Strengths

• Compatible with other Adobe tools • Customizable layout • In-depth editing ability with plenty of features

Weaknesses

• Higher learning curve • Only allows for one editor at a time • UI can be improved upon • Notable crashing issues • Subscription based

User Survey & Findings

User Survey & Findings

Gaining insights into user preferences for collaborating with a media production company was vital for the app's design success. A user survey revealed that a significant percentage of users expressed a desire to actively participate in the work process and contribute to the creation of their content. They wanted to have a say and be involved throughout the entire process. This app could serve as an accessible and convenient platform for them to voice their opinions and engage meaningfully with the company.

A graph showing results of a survey
A graph showing results of a survey
A graph showing results of a survey
A graph showing results of a survey
A graph showing results of a survey
A graph showing results of a survey
A graph showing results of a survey
A graph showing results of a survey

User Personas

User Personas

To ensure a holistic approach, personas were developed for both Arrow and their clients. Through early discussions with Arrow and extensive research, their clients were identified as busy business/brand owners seeking to leverage media production to authentically represent their brand. Similar to Arrow, their goals included business growth and reaching a wider audience. Effective communication and meeting media project deadlines were crucial for them to successfully showcase their brand and attract potential clients.

Arrow

A persona for a user of a media production app
A persona for a user of a media production app

Customer

A persona for a user of a media production app
A persona for a user of a media production app

Stage 02: Information Architecture

Stage 02: Information Architecture

MVP User Stories

MVP User Stories

Based on the research and information gathered, multiple MVP user stories were developed. The most crucial one focused on creating a streamlined and efficient method of communication that catered to both sides throughout the entire process.

Arrow

• As a user, I want to be able to view my progress so that I can keep track of my pace to finish my customer's projects on time.

• As a user, I want to be able to easily keep track of my clients and their projects so that I can remain organized and stay up to date on what needs to be completed and when.

• As a user, I want to be able to communicate easily with my customer so that I know their opinions and needs and can work more efficiently to provide them with the product that they need.

Customer

• As a user, I want to be able to see how far along my product is so that I know when I can expect to receive the finished product.

• As a user, I want to have a simple way to leave feedback that I know will be seen so that I know I have a say in the direction and outcome of my product.

• As a user, I want to be able to easily contact who I'm working with whenever I may need to so that I don't have to worry about scheduling calls or meetings with an already crazy schedule as a business owner.

User Flows

User Flows

Multiple iterations of the user flow were implemented, and one key addition was a notification system. This provided clients with a simple way to stay informed about new edits, payment reminders, and responses from Arrow regarding their feedback. Similarly, Arrow received notifications for client payments and feedback that required review. Several other enhancements were made to improve the overall experience and usefulness of the app.

A user flow that shows the different actions and workflows within a mobile app
A user flow that shows the different actions and workflows within a mobile app
A user flow that shows the different actions and workflows within a mobile app

Wireframing

The wireframes underwent multiple iterations as well, incorporating the notification system and expanding upon core design elements. Questions arose regarding Arrow's ability to view and navigate multiple projects, as well as the means of receiving client payments. Additionally, the customer needed visibility on payment due dates and payment status. While seemingly small pieces, these aspects played a crucial role in fully developing the app.

Arrow-Facing View

A wireframe of a media production app's homepage
A wireframe of a media production app's homepage
A wireframe of a media production app's notification page
A wireframe of a media production app's notification page
A wireframe of a media production app's project page
A wireframe of a media production app's project page
A wireframe of a media production app's client page
A wireframe of a media production app's client page

Customer-Facing View

A wireframe of a media production app's homepage
A wireframe of a media production app's homepage
A wireframe of a media production app's notification screen
A wireframe of a media production app's notification screen
A wireframe of a media production app's user account screen
A wireframe of a media production app's user account screen

Usability Testing & Key Findings

Usability Testing & Key Findings

Multiple Zoom testing sessions were conducted to evaluate participants' navigation through the app and test core workflows. Through these sessions, several key findings emerged, highlighting the following insights:

• Users found the app cumbersome due to excessive clicks required for common interactions. To enhance accessibility, dedicated sections were implemented on the homepage for clients and projects, making it easier for Arrow to add new projects or clients. Customers also benefited from the addition of a payment function directly on the homepage, streamlining their experience.

• There was a need for Arrow to have access to further customer information within their accounts. To address this, Arrow’s view of a customer's account was expanded to include billing history and status, contact information, as well as current and past project history. This enhancement allowed Arrow to have a more comprehensive understanding of each customer and their engagement history.

• A crucial improvement was required for the comment/feedback system. To streamline the process and eliminate confusion, individual text threads were implemented in direct connection with specific customer feedback. This enhancement allowed for seamless discussions on the changes made, separate from other ongoing feedback discussions. By providing a dedicated space for each comment, clarity and effective communication were greatly enhanced.

Iterations

Iterations

The screens below depict 3 versions of the app for both the customer's view as well as the business' view (Arrow's).

Arrow-Facing Views

A comparison of the before and after of a mobile app's design
A comparison of the before and after of a mobile app's design
A comparison of the before and after of a mobile app's design
A comparison of the before and after of a mobile app's design

Customer-Facing Views

A comparison of the before and after of a mobile app's design
A comparison of the before and after of a mobile app's design
A comparison of the before and after of a mobile app's design
A comparison of the before and after of a mobile app's design

Stage 03: Visual Design

Stage 03: Visual Design

Brand Development

Brand Development

The original design stayed true to the company's existing brand identity, incorporating reddish-pink and blue from their website. These colors aligned well with the company's purpose, instilling trust, productivity, and a touch of playfulness relevant to their field of work.

However, upon revisiting the design, a new perspective emerged regarding color choice and layout, and provided the opportunity to better showcase the progression of my skill as a designer. 

The redesign incorporates a simple color scheme that balances professionalism with sleekness inspired by modern tech. It was also crucial to maintain a connection with the creative side through the modest use of color, considering the artistic nature of their work, using technology to create their own personal form of art.

Color psychology guided the selection of a vibrant purple, reminiscent of the original reddish tone, to stimulate creativity, inspiration, and imagination. This choice creates a harmonious contrast against the darker shades of blue/purple used as the backdrop. The deliberate decision to employ a dark backdrop reduces eye strain for users, particularly as they concentrate on content within the app's smaller screen.

Style Guide

Style Guide

Original Style Guide

A style guide for a mobile app showing color choice, typography, and UI components

Updated Redesign

A style guide for a mobile app showing color choice, typography, and UI components

Stage 04: Prototyping

Stage 04: Prototyping

Original Vs. Redesign

Original Vs. Redesign

Original Prototype

Original Prototype

A mobile phone showcasing the design for a media production app
A mobile phone showcasing the design for a media production app
A mobile phone showcasing the design for a media production app

Redesigned Prototype

Redesigned Prototype

A mobile phone showcasing the design for a media production app
A mobile phone showcasing the design for a media production app
A mobile phone showcasing the design for a media production app

Final Prototype

Final Prototype

Displayed below are the final prototypes, featuring Arrow's view, along with the customer-facing view.

Feel free to check out the finished design!

Final Thoughts & Takeaways

Final Thoughts & Takeaways

This project provided two valuable lessons that hold immense importance, especially in the earlier stages of my design career:

• The significance of consistent feedback: Throughout the project, numerous iterations, changes, and additions were made, ranging from small to large. Taking it step by step ensured that no aspect was overlooked. While conducting research on users, competitors, and requirements is crucial, receiving ongoing real-time feedback on the design is equally vital. Regular testing by actual users allows for learning what works, what doesn't, and what is missing from the design.

• Keeping the user at the forefront of the design process: Prioritizing the user doesn't mean letting them dictate every decision. Instead, it involves constantly considering their needs and preferences during the decision-making process. Understanding how users will engage with the product being designed and identifying the problems it aims to solve enables the designer to focus on necessary features and workflows while discarding or refining those that do not serve their purpose effectively. Despite having assumptions and a sense of expertise, overlooking essential details can lead to poor decision-making unless the intended user remains the central focus.

Two smartphones showing screens of a media production app, standing vertically on pieces of stone in front of a grey background
A black and white photo of a desk with writing utensils and an image of a prototype for a mobile app.

Contact

I'd Love To Get In Touch

For any questions, collaboration inquiries, or potential work opportunities, feel free to reach out at any time. I’d love to hear from you!

A black and white photo of a desk with writing utensils and an image of a prototype for a mobile app.

Contact

I'd Love To Get In Touch

For any questions, collaboration inquiries, or potential work opportunities, feel free to reach out at any time. I’d love to hear from you!

A black and white photo of a desk with writing utensils and an image of a prototype for a mobile app.

Contact

I'd Love To Get In Touch

For any questions, collaboration inquiries, or potential work opportunities, feel free to reach out at any time. I’d love to hear from you!