ShaleApps UI/UX, Design System and Project Overview
This project highlights some of the design work I led for ShaleApps while tasked with bringing in design leadership and best practices to the company. During my time with the team, I ran several design sprints based on Google's 5 day design sprint framework, introduced the team to customer interviews and user testing, and helped build collaborative processes that brought design into our every day routine.
Much of the work that was done during my time on the project was spent on creating a flexible, component based design system and working towards a new look and feel that was representative of the future vision of ShaleApps. Some of the work below was work in progress and doesn't necessarily represent the final product or outcome.
Style Guide for the web application created in Sketch, and later imported into Figma.
Design Sprints & Discovery
During my time with ShaleApps I led three design sprints based on Google's 5 day design sprint framework. We used these when the stakes were high and we knew we wanted to prototype and test ideas with our customers quickly as well as ensure proper stakeholder buy in. Figma turned out to be a great tool to utilize during our sprints, as it allowed everyone to collaborate and execute on the prototype quickly and then seamlessly transition to user testing for feedback. We found that the biggest benefit to running sprints was actually he collaboration and knowledge sharing over the individual design outcomes.
Below are some examples from some of the collaborative work that was done during these sprints.
Prototype created with Figma for one of our Design Sprints. UI was from existing ShaleApps product.
Design Prototyping
Prototyping is a key component to the design process, whether it is to put designs in front of customers, or discuss with team members to gather feedback. For quick and dirty prototypes and developer handoff I generally stuck with InVision to make use of both the collaboration features as well as Inspect. If the designs had more complicated interactions I primarily used Principle to dial in exact animation details and best see how a user would actually interact with the interface. Below are a few examples of prototypes created in Principle showcasing both simple and advanced interactions.
Highlights from the new UI
Below are some examples of the web application utilizing the new design system. These pages were completely re-thought through from the original web application to better meet the needs of our users.
Showing how the general user flows across a given page/flow were laid out. In general I feel it's most beneficial to include all states for any scenario that you might be writing a story for.
Testing new analytic concepts based on user interviews and feedback.
Creating a new consistent and smart search experience.
Experimenting with a card layout view based on user feedback.
Wide drawer view.
Early explorations and concepts
I can't count how many iterations and different designs I went through while working on the project. Of course, it would never be final or perfect, but thankfully towards the end it really started to feel right, and the amount of edits were becoming more and more sparse, which let us focus more on the UX and let the UI get out of the way. You really notice how much a good design system as well as general organization makes a difference when you are flying ahead on UX work.
I still like to go through and look at some of the earlier explorative work I did, as it was a key component to getting us where we landed.
While we never fully got around to redesigning the mobile experience, there were a few times I couldn't resist the urge to start playing around with different concepts.
Early Dashboard concept.
Concept exploring our chat and activity drawer UX.
Very early dashboard concept.
There was such a breadth of work that was done on the project, it was hard to distill it down to what I wanted to share. While looking back I might have done things differently, it was still such a wonderful learning experience to be apart of.
Thank you!
Ryan Glaze