![](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/8760b9ce-6cd3-4342-9e2c-eba0b298b70b_rw_1920.jpg?h=fa2d023fb1e60268d9294c622e6ca0ac)
Overview
SystemOn is a Shure conferencing audio asset management software designed for audio/IT professionals. This project involves refreshing the old UI based on company design system, as well as fixing some user experience issues. It ran in Agile.
Team: Collaborated with global cross function teams located in North America and Europe, including engineering, testing, marketing, research, etc. Team size is 50+.
Product Launch: 2020
Contribution: User experience design, Interaction design, Prototyping, User research
Before & After
Project Summary
Urgent Need: This enterprise software has been Shure's flagship conferencing product. It desperately needed a visual overhaul as it was written in an older version of Angular, and also out of sync with its sister product Shure Designer.
Users: Its target audience is enterprise AV/IT managers, and system integrators.
UX Goals: Revamp the UI, align with Design System, and upgrade overdue UX issues.
Challenges: Not enough users available to do usability testing; Strong dependency on existing backend structure; Different views need to be designed
Step 1 | Problem Analysis
Existing Issues with the Old UI
![](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/e5bbc63a-e6c3-4ef8-84a0-0f71b18eb1a5_rw_1200.png?h=049af3820379473f9354ea7669c2c64f)
(Old UI examples)
The Old UI had multiple usability issues:
1. It uses outdated design patterns;
2. Has a ton of empty space, wasting the UI real estate;
3. Low contrast on the color pallet, bad for accessibility;
4. Lacks a clear focus point of the main workspace;
5. Hidden navigation lacks visibility;
![](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/ce97cea9-aa9f-477a-990a-bb27f034a82d_rw_1200.png?h=f6164f6936e5a544e2594b919e41bee2)
(Detail analysis of usability issues)
Solutions
1. Updated visual language with the new Design System;
2. Added an always presenting L shaped navigation panel;
3. Removed mixed use of mobile & web pattern;
4. Created a workspace to give a focus point of UI;
![](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/5ffedf0e-8c2e-442e-b9d9-0e025c9f6709_rw_600.png?h=53ba3cbcde06850681202b8a6a36bf44)
Step 2 | Plan + Sketching
Information Re-Architect
Using Information Architecture Analysis to break down the app features, then regroup to build a sitemap
![IA remap](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/79466166-c9eb-4d71-8a27-1479017f565f_rw_3840.jpg?h=f86bc6054773520b5f2e0a331d6043a6)
IA remap
![Feature blocks](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/ccc5340d-79d2-41c2-93be-b5e26927e66e_rw_1920.jpg?h=fc1cea8164ccc93b74aed431ff2954f3)
Feature blocks
![Sitemap](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/9dd735cf-56a0-4d95-8889-bc24348ccb9c_rw_1920.png?h=9ab2c8e0b8561c0d126009c815af1161)
Sitemap
Step 3 | Design
Mid-Fi Design
![Branch_Account](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/25665808-6a83-49ec-8986-53885ed657f8_rw_1920.png?h=36d386c70f760ee556e005e2c8752788)
Branch_Account
![Branch_Dashboard](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/814902d3-dfd4-4640-b726-661106b77ed4_rw_1920.png?h=5645949e24d83bf3416a5feaa21d9255)
Branch_Dashboard
![Branch_My project_Location](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/e68063b5-b27f-43a3-876e-ae185f7d7ab5_rw_1920.png?h=0ca15ca66422ca87e9f52af884c1bce8)
Branch_My project_Location
![Branch_My project_Users](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/1911cf12-86ac-4c71-be2f-ca65afdad288_rw_1920.png?h=90bf688a3174352b7c80a091c820c68a)
Branch_My project_Users
![Branch_Event log](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/31037673-a72f-448a-a2f1-6e5b99889851_rw_1920.png?h=f1e7c566589c2d343d577f4b2700fd8d)
Branch_Event log
![Branch_Settings](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/36069ecb-56ca-438c-a7c9-2fc0d4946462_rw_1920.png?h=22aec9394cf7f75b2295a2ba583cfd40)
Branch_Settings
![Branch_Notification](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/b9938750-41d7-4f52-be28-ae6d50c0ad9f_rw_1920.png?h=3bb61e2a60a7eabf3fcbae67443f7f43)
Branch_Notification
![](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/a4b8c9b4-064f-4c2f-9224-a00645f54077_rw_1920.png?h=0cddb7a9f4ae095ac599b4e89bd333f1)
![](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/2fb1c656-f0e4-40dc-9ec0-501fbf9c18b4_rw_1920.png?h=76b0b7c98004d2d1e2c0c8e4051f7043)
![](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/18bab121-cc94-4f12-90a6-0f12404b23de_rw_1920.png?h=8a3586eae6423cddc14620db22ca370e)
![](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/4a6ab273-7407-44bb-a488-8bc3bee86e24_rw_1920.png?h=426934f0ea1963c94a9f6e168fc03c97)
Hi-Fi UI Deliverables
The updated New UI has: A) a higher contrast; B) a better organized content layout; and C) follows most recent Material UI patterns
![](https://cdn.myportfolio.com/d106945e-a885-4d7a-a3a9-e251a722180d/8960c54a-6ea2-4ee4-9a1f-79d7c74247a4_rw_1200.png?h=bf5f26ac224d9873514406c973e89699)
(Newly Released UI)
Retrospective
Biggest takeaway from this project is communication early on in the process with all team functions. As a designer, learning the technical challenges and enablers from work partners is just as important as designing itself. Via effective communications with team members, I understood why the application was designed this way before (and what technical constrains we used to have); and how we can tackle the legacy problems with new tools at hand to bring the biggest impact to our customers.