Team Maturity Evaluation Tool Website and Feature Development
A update to a product designed to empower teams to grow sustainably, with an improved dashboard experience and refreshed visual design.
Context
As the lead designer on this team consisting of members from Aginic and Digio, I worked closely within the cross-functional team to refresh the website and survey tool branding, ideate new features, design high-fidelity prototypes, and improve features based on user and team feedback.
A large aspect of this project was working with the developers to create small slices of work and ensuring the designs were workable for development.
Timeline
January - May 2023
Role
Lead UX/UI Designer
Tools
Figma, Miro, Loom
ALPACA is a maturity evaluation tool for teams created by members of Aginic. It is used to assess a single team or team of teams against a variety of agile ways of working and technical practices, and includes features such as being able to receive an overview as a team and understand where to focus on through the dashboards, understand common areas of improvement across multiple teams or gain timely insights into the teams' transformation progress.
The challenge
ALPACA was a product still in its developmental infancy and required a fresh team to review the current iteration and backlog. The UI required improvements to deliver a smoother user experience and the survey tool was lacking more in-depth insights that would provide value to potential users.
The approach
To be able to work effectively, I first reviewed the current user flow of the website and survey tool, mapping out the experience of signing in, taking a survey and viewing the team results.
I used the user flows to identify potential design improvements and prioritise key points where UX/UI work would be most valuable for the user. Continuing to create updated user flows for my redesigns allowed the team to clearly see how the design had changed and why.
Bug Bash
We conducted an audit of the current ALPACA in a bug bash workshop, in which I identified UX bugs in the login process and admin experience, and UI defects when taking the survey and when accessing the admin backend menu options. After conducting the audit of the website and the application features we created a backlog of work and prioritised features to update.
Discovery Workshops
I ran discovery workshops on Miro with the team and product owner to reconfirm our bases, such as who the audience was, what key metrics would be most important, what problems we are trying to solve and what success looks like. We confirmed the user persona and goals were still accurate, and ideated new features we could develop and any possible roadblocks. As a result of the workshops we generated a backlog of features we could work on developing that the product owner agreed would improve the application.
Ideation
Working on a variety of features, ranging from swift UX/UI improvements to ideating new features to be added onto ALPACA, I started with researching and brainstorming ideas. I generated rapid sketches to explore ideas and refine my design. Once I had an idea of a general design direction, I also utilised existing Figma components to develop concepts that were clearer for the team to review.
Mid-Fidelity Designs
I developed design options to discuss the feasibility of with the developers which, after refining based on their feedback, would then be recommended to the product owner for approval. Where there were existing Figma components I utilised them in the design, however if it was a wholly new component I purposely used simple wireframes in greyscale colours to keep the team’s feedback to aspects such as the user flow and features included.
High-Fidelity Designs for Usability Testing
After collecting feedback, I translated my mid-fidelity designs to high-fidelity static designs and interactive prototypes for specific user flows for identified pain points or new features. For new features, such as the pulse survey tool, I conducted usability testing with a team of designers and continued to improve the UI and UX, revising issues like unclear buttons, survey layout, and visual accessibility. As a result my designs were highly refined through continuous feedback, and ready for development.
Branding Identity - Website Update and Style Guide
I uplifted the branding for ALPACA, with the largest impact being on the homepage. The main problem focus was separating the branding from Aginic’s branding identity, as it was initially conceptualised as being under the Aginic brand. As I was also conscious of not wanting to completely redesign every element from scratch and create a too-large slice of work for the developers, I utilised smart colour changes to visually separate ALPACA from Aginic from the get-go.
To assist future designers I started a style guide based off the rebranding updates, including primary, secondary and tertiary colours, some do’s and don’t’s and listing some existing and new Figma components that were a strong representation of the branding identity.
Problem Focus
Under-developed UX/UI
Coming into the project, ALPACA was at an MVP stage and needed further feature development. While it was functional, users felt limited by clunky UX decisions, and there were some inconsistencies in the UI that make the application feel less professional. To address these concerns, a large component of my time was spent improving the user flow, creating logical choices for the user with different menus and buttons, and giving specific direction to the developers on how to improve the UI. The result was an updated UI with new branding colours, updated user flows such as during the login process, designs for pulse surveys to give users more value, and improvements to the dashboard user experience.
Reflection
What did I learn from this project?
My primary objective was to develop more features and resolve existing issues in a set amount of time for the project, to give the application more user-value and be more functional. I was able to do this by rapidly iterating on my ways of working when in a cross-functional team. I learned to communicate frequently and clearly, utilising asynchronous communication methods such as Slack and video recordings of my prototypes to be able to receive feedback from team members who were busy with other projects. I also learned how to manage time and make smart design decisions when a project is time sensitive and constantly undergoing iterations.
