MMX Group & Melbourne Mint Consulting
Lis consulted with MMX over the course of 8 months on various digital elements, workflows, systems & processes. The second half of the work was to help the graphic designer and management team, skill-up into interface design for a new website application which would be their first custom site. This was done through teaching the methodology we use to go from a blank state to an effective website that works for users and the business. It was particularly useful during the design phase to teach wireframing, UI elements, various states, prototyping and how to hand over to a development team.
Process improvement & design
User & team workflows
Business planning strategy
Wireframing user interface
Upskilling a department
We spoke to key members of the team to understand the workflows that were causing the most difficulty within the business for the employees or customers (often it was a series of both). We listened carefully, sketched these all, identified the bottlenecks and then created streamlined processes that would resolve the issues. In a number of cases these could then be built out into wireframes for the front end so the team understood the process and the design department could view the workflow and what was required from the customer. The processes were documented and included in the employee guidebook for the fast-expanding team.
We looked at the marketing lifecycles whilst we were analyzing systems and processes to determine the best way of managing these each month. No structure had been created around these so we listed out the suggested plan for this so it could be integrated with the project management tool.
Processes & planning
The company, with multiple child companies, had rapidly expanded without a solid structure in place. We devised a yearly planner that was broken down into quarters with a color allocated to each sub-company. Projects were then placed into each quarter in Asana and a Gantt chart outlined so that managers could easily see what was upcoming and use this as a tool when deciding whether to proceed on certain projects or opportunities or what needs to switch around in a quick visual. The team was also working in disjointed silos and needed to be included in the developments and business growth. Management was busy in development and needed a quick way to set KPIs and goals. We set up a dashboard for each child business that could be displayed across the three monitors in the office with live updates. Managers were provided with additional private boards for monetary reporting and other specifics.
One of the child companies was creating a custom website with online store for the first time. It required a large amount of content to be clearly structured. We created an architecture for this content and reviewed it with the management team, increasing the level of breakdown until we landed on the final structure. We then split out all the content that required creating and assigned it with the managers so that the key contact creators knew exactly how to develop the contact. We set up an outlined Google sheet for this and over the coming weeks reviewed all the copy that came through, worked with staff to edit it where needed and then handed it over to the final editor.
Analytics & user analysis
Before we created the content architecture and wireframes we dived into the analytics of the previous sites and competitor sites to determine audience behaviours on the site, workflows, bottle marks and areas for improvement and optimization.
After the wireframing we began working on the branding development and interface elements. These were rolled out into a pattern library in a shared asset Sketch file with the team (using Abstract for change commits). Each element was logged in Sketch for use across the atomic library design and ultimately the website. In this way the more the teams grew and expanded with the business, the better this information had one single source of truth and could be updated and approved with one change reflected across the whole design in one click.
Wireframe design & teaching
Lis advised the graphic designer on atomic design (creating atoms, organisms, molecules and pages) and how to wireframe (tailoring it in a method that would work best for their company). From their Lis wireframed all the primary pages and through various meetings with stakeholders the wireframes were approved for UI design. The internal graphic designer then took over whilst Lis assisted with how to create a website interface, setup, how to outline the various states, mobile and desktop grids and handing assets & notes over to a development team with prototyping where needed.
UI design & teaching
After the wire framing and pattern library, Lis provided a number of examples of interface design picking a few specific elements of the website. Lis worked with the designer to show the various hover states, active states and user interactions that need to be considered when designing the UI and how to best present these for the developers.