Client: Peech - Israel
Role: UX/UI Designer
Timeframe: 4 weeks
Through their platform’s machine-learned algorithm, Peech aims to close the gap between inexperienced users in need of professionally-edited videos and video editing tools that require dedicated skills and time. The algorithm takes raw content such as the user’s video and logo to craft a near-finished product without the user having to worry about the details.
An Introduction to the Project
What was the given task?
Our clients, co-founders Danielle and Johnathan, were in need of a redesign of the Peech platform. During our first meeting, we were provided with their logo and a skeleton of their existing web app. Johnathan was able to walk us through their very basic prototype to help us have a better understanding of how their algorithm worked.
As UI designers, my teammates and I were tasked with providing a redesign of their MVP (minimal viable product) and laying down the foundation of the UI so that they could publish their product with an informed, well-developed design. By the end of our project, we were able to provide moodboards, style tiles, initial high fidelity screens, the final clickable prototype, and a fully fleshed-out design system.
Let's Walk Through It
What was the design process?
The following is a brief overview of our entire design process throughout the 4 weeks.
Not mine, currently creating one to include - Step by step timeline of each major step
Step 1: Research, Step 2: Moodboards, Step 3: Style tiles, Step 4: Hi-fi round 1, Step 5: Final user testing, Step 6: Final design and design system
Getting to Know the Client and Domain
What did the clients want?
What were the market domain and competitors like?
We began by conducting a gut check during our client kickoff meeting, in which we showed several images of various visual styles and asked the clients to rate from 1-5 to determine the preferred style of our clients. Though designing for users is #1, it is still important to keep the client in mind as well.
From our initial workshop, we were able to determine that our clients responded well to clean, well-spaced designs without too many options/details throughout. They also strongly appreciated a pop of color to promote a sense of fun and elements that made it feel like “a machine was working,” as they’d put it. Images with too many details reminded them of high-level editing tools such as Adobe Premiere, and they strongly did not want to go in that direction.
After our kick-off meeting, we jumped into the research of the domain and some basic competitor research. Through our exploratory research we found the following key trends in the market.
Trends in the Market
AI is revamping video editing in 2020
“The Global Video Editing Software Market size is expected to reach $1.1 billion by 2025, rising at a market growth of 4.4% CAGR (compounded annual growth rate) during the forecast period.”
Viewers appreciate supplementing graphics and animations compared to simply watching a video.
Basic Competitor Review
Danielle had prepared a list of competitors within the field, though Peech was aiming to reach outside of the assisted video editing market.
Magisto, Promo, Toonly, Invideo, Lumen5
All of these tools were platforms that specialized in producing short, promotional videos via a very newbie-friendly interface and customizable templates.
Current State of Market
Saturated, but Peech is attempting to reach outside of the stated market with longer, AI powered videos
The target audience of most of these competitors were the same as Peech, small to medium businesses without the knowledge or funds to produce high quality marketing videos.
After the exploratory research, we dove deeper by conducting an in-depth analysis of our competitors. For this analysis, we chose to examine the provided direct competitors, as well as a couple others that we thought were suitable indirect competitors.
From our analysis, we found the following key takeaways and insights to take into consideration for our designs.
Color: High Contrast, playful accents, dark backgrounds
Layout: Mainly left side navigation, with right side being editing or customizing options, whitespace for user-friendly and simple, rounded edges
Typography: Sans serif
Containers: Good use of modules and containers to make users feel directed and at ease while navigating
Establishing Our Design Principles
What was our design focus?
From our completed research of the domain and competitors, we came up with three design principles to abide by to help ensure that we are making informed decisions and keeping things user-focused.
Exploring Visual Concepts
How did we determine our design direction?
To begin our visual exploration, we started off by creating divergent moodboards to lay down the basic foundation for possible visual styles. Each team member came up with 3 designs, which are presented below.
All 3 of my moodboards were direct products of what the clients responded well to and what we learned from our research.
Each moodboard was then developed into style tiles, in which we presented our divergent visual concepts into basic UI elements. This allowed us to portray our ideas with the context of video-editing tools and let viewers get a better feel of how elements might look like.
With our style tiles, we conducted our first round of interviews to determine the desirability of each and find which elements were working and which were not. Each designer was able to figure out which of their 3 style tiles should be their chosen design direction. Unfortunately, interviewees were all scheduled by our clients, and majority were directly related to the clients and the project, and thus already had a predetermined idea of how the product should look. Despite this, we worked with what we had and did our best as designers to be mindful with our decisions.
Each designer was able to figure out which of their 3 style tiles should be their chosen design direction. Users liked my first design, as it conveyed a modern and fun style without sacrificing a professional feel.
On a high-level, the interviews provided the following takeaways:
Users expressed that…
Colors were appreciated, but needed to be used strategically
Modern designs with a good balance of simplicity were preferred
Tools and elements should look familiar.
To do going forward...
Tone down the contrast
Keep the playful gradients, but use mindfully
Avoid too simple designs
Translating to High Fidelity
How did we further our concepts?
First Hi-fi Screens
Taking what we learned from the first round of interviews, we shaped our design decisions to reflect the findings and further develop our concepts into our first versions of high fidelity screens. During the design process, we realized that the original layout of the Peech platform was not ideal, and thus took upon the task of researching several UX decisions. As we did not have any wireframes to go off of, we concluded that we should try to do some basic UX research and apply them to our hi-fi’s. The most significant was the choice to consolidate the main editing menus onto a single sidebar to the left, as we found that most user-friendly editing platforms followed this format.
My first version of the hi-fi’s were translated from my chosen style tile, from which I kept the modern feel, dark interface, and gradient & glow. To establish user-friendliness, I focused on keeping texting large and easily readable, and most importantly, ample whitespace to promote simplicity. Abiding by our design principle of helpful wayfinding, the initial onboarding is separated into clear, easy to follow steps. Colors and gradients are used meaningfully and consistently throughout, avoiding confusion and ensuring not to intrude into the users’ branding. Furthermore, soft shadows and rounded edges aid in establishing a modern feel that’s easy on the eyes.
Our second round of interviews provided each designer individual feedback that we were able to apply to our future iterations. The following are some of our key takeaways.
The first is simplicity. Minimal, open designs with lots of white space kept users more engaged and focused. We found that spaced out icons, simple tools, and aligned interfaces allowed for easy navigation.
Next, we discovered how to handle unnecessary options. Additional details and options are best to keep hidden so that the user can focus on the task they are currently doing. All features may not always have to be there, but should be easily accessible when needed.
Lastly, we found that there was a desire for guidance and help throughout the platform. Tooltips or small tutorials when participants seek it would be an ideal in-between to assist those who do not have familiarity with a new program.
Finalizing our Design Direction
How can we keep our designs user-focused?
The Decision to Converge
From our user testing, we found that, without a doubt, users would appreciate a converged design. Our overall combined efforts should focus on keeping our designs simple and clear by incorporating more white space, always leading the user on what to do next, and going towards a balanced contrast of a dark grey and lighter background. Before converging, we discussed the following key elements to help us hone in on the correct design direction.
Onboarding Overlays - Testing proved that the overlay system makes the process easy to understand and better guides the user to complete the necessary first steps. Users appreciated satisfaction indicators, such as check marks, upon completion. Explanations should also be provided on why these requirements would be needed to help the user feel confident that their actions will directly affect their visual outcome. This allows us to empower the user with motivation, which ties back to our design principles.
Side Navigation - Our decision to put all the main areas onto one side navigation bar ties back to our design principle of making everything simple and easier to navigate. For clarity, icons and text should be kept together and use accent colors for active states with plenty of whitespace. Hover states proved to be an efficient method of providing guidance to users, as some would blindly search areas for guidance.
Tools & Timeline - Keeping items simple and easy to use proved to us that we should keep elements familiar and hidden when not needed. The trimmer in the timeline should drop down when needed. This is a simple and convenient way for users to access their tools in one location. Since video editing is new to most users, names for all tools must be present to better clarify what they are.
The 3 original designs before converging.
The Final Design
As UI designers, we always made sure to keep the focus on users, but also kept in mind the preferences of the client. All decisions we made were based on our research and what users have said throughout the interviews. Thus, we are proud to say that our final design was highly successful, as our users and clients alike were greatly pleased by the outcome. Users overwhelmingly agreed that the platform was “simple and easy,” and that the tools were presented in a newbie-friendly and familiar way. Here are some key success points from our final design.
Simplicity - Our combined efforts created a design that was very simple and clear by ensuring we had plenty of white space, easy to read text and icons, and reducing clutter by hiding elements.
Guidance - We assist the users focus by using the blue and fuchsia accent color for direction and guidance. By keeping items open and hidden when not needed, we were able to guide the user and avoid distraction.
Balance of Colors - The balanced contrast of the side navigation, background, and darker elements is designed to work with any type of video being shown. It breaks up the areas providing direction and focus while being visually pleasing to most users.
Here is a walkthrough of our final prototype.
These microinteractions add delight to simple tasks while providing aid and keeping the user engaged throughout the platform.
What insights did I gain as a designer through this project?
Working with the Peech team was an incredible opportunity, as we not only developed the UI design of a brand new platform, but we were also able to explore and establish the UX side. Though it made UI decisions a bit difficult, handling both aspects was a great opportunity to enhance our skills and further our experience and understanding of UX design as interface designers.