Moozler is a video on demand prototype I designed in 2016, following Material Design principles. On this project I helped with requirements analysis, wrote user stories and created UI Flows, designed UI and supported engineers and QA with queries/feedback as needed.
PROCESS
We met with the client several times to define requirements and to establish constraints (e.g. due to it being a prototype, there were many API limitations). I collaborated on UI Flows, wrote all user stories and created designs based on the creative director's wireframes.
We used this project as a pilot for a new Jira 'Story Board' workflow I developed with our QA and iOS leads. The Story Board tracks all design tasks with the stages idea, definition, design, team review, client review, architecture review, design markup and lock and delivery. The Story Board resulted in improved efficiency for the team with errors being caught earlier rather than later, happier engineers and a PM who could see the status of the entire project at a glance. We use the Story Board workflow on all our projects today.
UI FLOWS AND WIREFRAMES
DESIGN
The client's colour palette (bright pink against a dark background) and brand logo were both several years old and needed updating. We refined both by flattening the style, darkening the brand accent pink to a more mature tone, and introducing a gold highlight colour. As the prototype was for Android only and we were on a limited schedule, I stuck closely to Material Design guidelines and used native elements where possible to reduce engineering effort.
Designs were created in Sketch and handed to the engineers via Zeplin. To aid handover, I developed a new design markup language (see sample below) in collaboration with the project engineers. The markup describes layout in a more useful way for engineers by defining anchors, bounding boxes and constraints with simple symbols. The design language positively impacted the way I create designs, by making me think more of what engineers need to consider when laying out UI. The design language resulted in a reduction in UI related questions from the engineers, saving time for everyone.
ANIMATION
The client required an onboarding animation to display on the landing page. I created the below animation in Principle, it was successfully included in the app by our engineers.
Results
The app was delivered to schedule and on budget and is being used as a sales tool by the client. The Jira Story Board and Design Markup language trials were both successful for Marino Software, saving time and reducing production errors. They are now being used on all Marino's projects.