![](https://static.wixstatic.com/media/dae7b4_fcbcbe74bbd74ff0aceb55ea848ba417~mv2_d_2000_1333_s_2.jpg/v1/fill/w_858,h_572,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/dae7b4_fcbcbe74bbd74ff0aceb55ea848ba417~mv2_d_2000_1333_s_2.jpg)
PROJECT
Reach Engine user interface redesign
PURPOSE
The product redesign was for several reasons: To improve the overall usability and appearance, update the scalability for new features, and further tailor it users needs.
Reach Engine is a cloud based media platform that provides content management, video monetization, analytics, and automation for companies that work with digital media. Growth and demand became extremely apparent over my years working on the product. Clients and stakeholders felt it was time to make some important and necessary changes to the design.
My team began by addressing usability issues from our old interface in conjunction with anything new that came up during our research. As we designed new features, it became imperative to create an environment which provided a framework for new features to be added over time. As the parent company of Reach Engine, Levels Beyond, pursued clients in new media verticals, my team aimed to redesign the product to be more flexible, customizable, and suitable for a variety of user needs.
RESEARCH METHODS AND DESIGN TOOLS
Client Interviews
Prototype Testing
InVision
Client Journey
Personas
Sketch
DESIGN PROCESS
Empathize
Define
Ideate
Prototype
Test
Implement
MY ROLE
I was responsible for both the user experience and user interface design in this project and worked cross functionally.
I worked on a small UI/UX team of three. We shared equal responsibilities and used design centered thinking for the redesign. Each designer brought fourth individual strengths which contributed uniquely to the final design.
We worked closely with product for prioritization and with engineering for implementation. The design team had numerous discussions with the project management, solutions architect, support, marketing, and sales teams throughout the project in order to address concerns and apply feedback.
![SymbolLibrary.png](https://static.wixstatic.com/media/dae7b4_a77bec0aacb14a7eab267fdc46f1d96b~mv2_d_20780_3452_s_4.png/v1/fill/w_980,h_163,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/dae7b4_a77bec0aacb14a7eab267fdc46f1d96b~mv2_d_20780_3452_s_4.png)
UNDERSTANDING THE USER
There are multiple departments within our clients' media organizations which depend on Reach Engine for their daily tasks, each using the system differently.
The project began with a lot of insights which came from stakeholders and clients. This information was paired with research of our own originating from customer interviews, questionnaires, shadowing, and prototype usability testing with both current and prospective users of Reach Engine.
Throughout the process we used Trello as a way to organize our notes. The card sort below shows research from clients, partners, and internal users who often track the status of workflows running in Reach Engine. In this example there were a total of 15 columns displaying qualitative data that was used to redesign the product.
![Artboard.png](https://static.wixstatic.com/media/dae7b4_38634090c0fc40d99fbcc060cb17cbd4~mv2_d_3364_2101_s_2.png/v1/fill/w_610,h_381,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Artboard.png)
![Artboard1.png](https://static.wixstatic.com/media/dae7b4_a84e55fe92c3413ab6198f93e565912e~mv2_d_3360_2100_s_2.png/v1/fill/w_610,h_381,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Artboard1.png)
![Artboard Copy.png](https://static.wixstatic.com/media/dae7b4_3227a47972a648eb8223f8d9d41ac4e4~mv2_d_6728_4200_s_4_2.png/v1/fill/w_835,h_521,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Artboard%20Copy.png)
IDEATION
We designed with our current users in mind, understanding they were familiar with our product and already built mental models of the system.
With a clear picture of who we were designing for, we began our ideation phase. A few of the areas we wanted to concentrate on were:
Layout
Focus on content & improving scannability
Configuration
Consolidate configuration & making it more intuitive
Menus/Actions
Menu organization & less clicks to take action
Status Page
Decrease troubleshooting time for admins & developers
While our imaginations initially ran wild, we did not want to harshly disrupt users who were already using Reach Engine. We also considered accessibility. We used a Sketch plugin called Stark to check the contrast of our designs and ensured the colors were ADA compliant.
![](https://static.wixstatic.com/media/dae7b4_f07431657da54b29963afd4f5f2f0b87~mv2_d_6766_4950_s_4_2.jpg/v1/fill/w_980,h_717,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/dae7b4_f07431657da54b29963afd4f5f2f0b87~mv2_d_6766_4950_s_4_2.jpg)
PROTOTYPES AND TESTING
We learned throughout our testing phase that some of our initial solutions did not accomplish our goals, so we quickly iterated on our design decisions.
One instance in particular stands out as a prime example of why testing is so important in the design process: The way Reach Engine organizes workflows (actions). Workflows are an integral part of Reach Engine, and what sets the product apart from many competitors. In essence, workflows are the automated processes behind the scenes which take care of the work and are customizable based on user needs. A workflow example would be: ingest the asset into Reach Engine from Adobe Prelude > automatically tag it with appropriate metadata > send it to a transcoder > send it to multiple social media platforms.
To begin a workflow in Reach Engine, a user clicks on the workflow (action) menu in the UI and chooses which workflow to run. Before the redesign, Reach Engine's UI just displayed a single unorganized picklist of workflows, which was long and tedious to parse. Our initial solution was to organize workflows into picklist groups and display those groups individually. We proposed this as a solution in our conversations with users and they loved the idea. However, when we prototyped it, we found that users did not always know, or couldn’t remember which group the workflows belonged to, so they would end up having to click into different groups to find what they wanted.
We ended up going back to the single pick list, additionally allowing the workflows to be organized in groups within that picklist. Essentially, letting the user hover instead of click if they couldn't find what they were looking for. This solution cut down on the time that users spent searching and they preferred this option more.
DESIGN TO DEVELOPMENT
Product managers assigned features and UI components to developers, and I would review and support their implementation.
As part of the handoff to developers I provided style-guide specifications, component behavioral documentation, icons/visual assets, and dynamic prototypes. I also provided solutions to unexpected use cases throughout the development process. We split the designs into components which were then assigned to individual developers. This step was done so the designs could be reusable and implemented in a component library making future development easier, faster, and cheaper.
Before this project, the team provided the css manually and I suggested we try InVision inspect to replace the process. Since we worked so closely with the developers, our team felt comfortable making the change. We found InVision's Inspect feature to be beneficial and utilizing it cut down dramatically on the number of questions my team would get asked on acceptance criteria.
![Navigation Styles Long.png](https://static.wixstatic.com/media/dae7b4_b1fc3298c65442cea748e36b0a0fda27~mv2_d_1445_4031_s_2.png/v1/fill/w_600,h_1673,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Navigation%20Styles%20Long.png)
![Artboard 2 Copy 6.png](https://static.wixstatic.com/media/dae7b4_9fd0d275630043528d123a05d312000a~mv2_d_2880_1800_s_2.png/v1/fill/w_835,h_522,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Artboard%202%20Copy%206.png)
![Artboard 2 Copy 8.png](https://static.wixstatic.com/media/dae7b4_44faf15958274fd49809eedd166f5bcd~mv2_d_2880_1800_s_2.png/v1/fill/w_835,h_522,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Artboard%202%20Copy%208.png)
![SAV Copy 2.png](https://static.wixstatic.com/media/dae7b4_52800f20a9754f918dabaa9268a8f812~mv2_d_2880_1800_s_2.png/v1/fill/w_835,h_522,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/SAV%20Copy%202.png)
CONCLUSION
Redesigning the user interface and experience of Reach Engine was a collaborative and valuable process. Our team constantly challenged each other to do our best and encouraged growth.
The redesign for Reach Engine was one of the larger initiatives for our team of three. The design process was iterative and regularly moved back-and-forth. I would jump back into different stages at any given time based on feedback and issues that arose. Each designer on the UX team encouraged personal and professional growth in each other throughout the process. It is one of my most notable and important projects to date