LLAMA.AI ENTERPRISE SOFTWARE — Dashboards
Timeframe: Summer 2019 - April 2020
Client: LLamasoft
Software Used: Adobe XD, Illustrator, CSS/HTML, Zeplin
Project Type: UX Design and Research, Visual Design, Interaction Design, Web Design
Project Overview
During my Summer 2019 internship at LLamasoft in Ann Arbor, MI, the development interns (2 UXers included) were tasked with creating a complete redesign for LLamasoft's enterprise level cloud based software which is intended to help customers visualize their companies supply chain data through customizable dashboards. We had to integrate Sisense (a BI tool) into our preexisting dashboard system, but recreate the dashboard management system as well as the wrapper around the imbedded Sisense tool. Throughout this experience we updated the interface and user flow of the web application and after multiple iterations and getting lots of feedback, ended on a final design that we tested in-house, and felt proud of.
Goals:
Create a smooth dashboard management experience
Including how a user would create new dashboards, delete, edit, or duplicate them.
Embedded dashboard must function well with wrapper
Embedded dashboard must be on brand with LLamasoft branding
Team Organization:
7 Development Interns
2 UX, 2 Backend, 2 Frontend, 1 DevOps
Development Manager
UX Manager
Business Analysts
Process
We first began our project with conducting research with our stakeholders about how and why this application was needed by our customers. We wanted to know scenarios in which they used the application so we could gain context. We UX interns started brainstorming and iterating immediately. We were working in an Agile Project Management environment so we wanted to get ideas out there and the ball rolling as quick as possible. While our first iteration was a great learning experience, we decided after getting feedback from the management team, the flow didn’t make the best of sense.
Below you can see our very first iteration. The page on your left shows the “Create New Dashboard” page, where the user would create a new dashboard either from a template or manually. The second page is basically the dashboard management system, where the user could see all of their dashboards that they’ve already created.
So we scrapped that design and started from scratch again, disregarding our previous design and the consistency with the other LLamasoft platforms. Once we threw out what we previously had in our heads we really were able to tackle this problem from a clean slate. However, unlike our first iteration, this design was a bit too modern and sleek. The user flow was more user friendly, after feedback realized it was a bit too forward-thinking and wasn't consistent with the design of the other platforms.
Finally, after numerous brain storming sessions we decided on the flow and how we wanted to lay out the new design (shown below). This time, we created an interface mockup that was consistent with the feel of other platforms but resembled more modern software. We wanted to create a design that reflected aspects of the other platforms yet have aspects of modernity to reflect the future of LLamasoft its new rebranding.
On this screen, the users dashboards are displayed. Here they can manage, delete, rename, etc. old dashboards as well create new dashboards.
With this new flow, we created less work for the user by eliminating an unnecessary sidebar that was present in the preexisting software and contained all features on one simple and intuitive page. After this, we received positive feedback from management team, our mentor, and the development team. We tested our design with people in many different parts of the company so that we could get fresh eyes to look at it. Since this was at the end of the summer, we didn’t have time to implement any new changes, but we did compile a list of them. You can read that here.
At the end of our internship, we presented our findings to the entire company with a 40 minute presentation and Q&A.
Here, the user sees the modal to create a new dashboard. Here they name the new dashboard and pick what data source is linked to the dashboard. When they hit next, they are taken to the Sisense embedded interface where they can customize the dashboard.
Lessons Learned
Articulating the new user flow of the newly design web application was a challenge itself. To help us do this, we used Adobe XD’s prototyping option and sat down with the dev interns multiple times to help with clarity.
Sometimes throwing out what you know can be really helpful. Its easy to get stuck on one path, one way of thinking, but if you think outside of the box, it usually pays off… (just keep in mind the style guidelines set out in your company).
Because of our diverse team organization, I learned about the inner-workings of an Agile development team, something that was new to me before this experience.