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.
Project Overview
Role: UX Designer & UX Researcher
Duration: 5 weeks (2021)
Deliverables: Style Guide, Wireframes, High-fidelity Mockups, Clickable Prototypes
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.
Redesign
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.
Problem
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
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.
Stage 01: Research & Discovery
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
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
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.
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
Customer
Stage 02: Information Architecture
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 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.
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.
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.
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
Arrow-Facing View
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
Arrow-Facing View
Customer-Facing View
Arrow-Facing View
Customer-Facing View
Stage 03: Visual Design
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
Original Style Guide
Redesigned Style Guide
Stage 04: Prototyping
Original
Redesign
Final Prototype
Displayed below are the final prototypes, featuring Arrow's view, along with the customer-facing view.
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.
