Project
Redesign the startup’s legacy platform
Date: Jan 2015 – May 2017
Role: User Experience Designer and Full Stack Developer
Skills: User Interviews, Contextual Inquiries, Interactive Design, Workshop Facilitator, Prototyping, Front-End Development
Tools: Balsamiq, Axure RP, Sketch, Invision, Visual Studio Code
Goals
I was hired as the sole UX/UI consultant to re-design the company’s ABM platform. I did this work while on the technology team working closely with product and backend engineers who were re-architecting the entire system at the same time. Their platform consisted of many functional areas (services and offerings) and we targeted to redesign one area at a time – with a goal of completed each area in 4 to 6 months.
Challenges
The legacy system had not keep up with the rapidly growing business and the company was growing rapidly. There were serious problems in the user’s workflow. Users had been complaining that the old system was not working for them. At the same time, the technology stack needed to be upgraded as the company was moving from a bloated legacy system to a more open source and rapid development technology stack using more modern frameworks as well as AWS services.
Approach
After spending a couple of months with stakeholders, product and users conducting user interviews and contextual inquiries, we decided to move away from the use of grids and crowded text. We knew we had to present the data in a more meaningful way to the user. To do this, the team looked at aspects of the platform more like an ordering system (which it was in many ways).
This was facilitated with a more visual module (versus grids of data) for the orders which the user interact with and expand to get the data they need. No longer did they have to go to many different places. We also introduced a new Program Management Interface.
As mentioned, the team changed the overall architecture to be API driven; moving to open source technologies, plus rapid development frameworks like Angular.js on the front end. Over a 2 year period of time, we were able to tackle each part of the system – one at a time. Initially I did all the user experience and UI design as well as all the front-end coding, but this changed as we ended up out-sourcing the front-end development overseas after the first year.
What is was
Contextual Inquiries
As a UX design consultant, I worked closely with the users, stakeholders, and product owners.
- Contextual inquires with users, shadowing their daily work
- Conducted user interviews
- Testing of interactive prototypes I had designed to validate solutions with users and iterate designs
- Facilitated workshops with stakeholders, technology, and product owners
- Identified pain points and workflow issues
- Discussed new technical approaches that would lead to better user experience
Wireframes & Prototype
Dashboard for TV screen (and iPad) – this is the wireframe for a screen that needed to be updated in real time for different geographical areas showing specific data of various vertical industry segments. It was on display on a large screen in the office area for the sales team.
The designs included many aspects, not just the platform. In this case, I designed a useful screen formatted for a TV Screen yet was responsive so the sales team could also show clients the information on their tablets.
Dashboard for TV screen – Final Design I did as well.
Final design for tablet.
Ordering System – wireframe shows expanded module containing orders with a card design approach. Users click on collapsed orders (one shown above expanded) and all the details of the order are shown.
Proposals – wireframe for screens used by the pre-sales team to show the clients some scenarios for a targeted audience. Later, these would convert into actual orders.
Client Administration – this is the wireframe where account managers would create/edit information for the clients with the most basic information and logo of company.
Client Dashboard – this is the wireframe for a screen used by our clients where they could view their program and see it’s progress in relation to leads and ads viewed.
Design Improvements
The items identified here are just some of the improvements that the new designs provided for the users.
Orders: Expanded view
Client Program Dashboard
“With the new design and workflow, I’m saving about 3 hours a work a day. Thanks !” – Fulfillment team user
“It’s so nice to have all the data there in front of you or just a click away, nice sorting features ! ” – Client
“My clients are very happy with the new data visualization features for the new data visualization features, keep it up” – Sales team member
