F.R.O.M
My work began with a redesign of F.R.O.M's entire application with the vision of becoming the next biggest project management platform. The goal of this particular project was to identify any usability issues with the beta release and determine the critical features to prioritize for the next iteration of the product.
Learn more about F.R.O.M's older design version :
Background
Frames of Mind is the embodiment of that vision—a place where forming dynamic, multi-disciplinary teams involving both AI and human employees is as intuitive as putting paint on a canvas. Our platform is a testament to the belief that well-formed teams have a value greater than the sum of its parts.
In order to work on this app, I felt it was necessary to make a few assumptions and set a few constraints.
​
-
The app would need to be intuitive and engaging to retain user interest.
-
The AI component would need to be sophisticated enough to offer real-time, accurate advice and adapt to user feedback.
Understanding the problem
The challenge was to make AI accessible to everyone through integrating 2 AI’s in one frame. The purpose of the app is to suggest suitable output choices for each individual based on their specific demands.
• Single-User Interaction: AI systems are generally designed for one-on-one interactions, which limits their effectiveness in a team where multi-faceted coordination is essential.
• Speed vs Timing: While AI provides rapid responses, this speed does not always align with organizational workflows that may require strategic timing and consideration of external factors.
• Task Complexity: AI effectiveness decreases as tasks become larger and multidimensional, revealing a gap in AI's ability to multitask or manage complex projects efficiently.
Solution
• Coordinate with Multiple Entities: This includes interaction and collaboration with other AI tools and multiple human users simultaneously.
• Project Management Approach: AI will execute tasks based on real-time, internal and external outcomes, ensuring timely and relevant actions rather than immediate, potentially premature responses.
• Specialized Task Execution: Our system can break down complex tasks and engage specialized AI tools for specific components, harnessing the strengths of various AI systems for complex problem-solving.
Challenges
Unfortunately, one of our main challenges is the lack of resources and time that we have day to day, as like most startups, we were stretched quite thin! With this challenge, we often have to reiterate our designs in order to be achievable within time and technical constraints, while still providing more value to our users.
Competitive Analysis
So far, there were no comparable offers, so my research applied to products from the field of Generative AI and project management tools.
The creation of competitive profiles (in terms of marketing strategy, target market, core business, usability, layout, navigation structure, compatibility, content, design and performance) together with SWOT analysis helped to assess current offers in this area.
User Persona
Having gathered all the necessary insights about the target group, I progressed to developing a user persona. This step was a consolidation of my extensive prior research. It played a crucial role in determining the core features of F.R.O.M and steered the direction of my design choices.
Narrowing down the scope of work
Based on the usability tests conducted with 5 users on the existing web app, we found the following key issues:​
-
All 5 were frustrated that the buttons were missing a few places.
-
4 of the users thought that there was no visual hierarchy.
User Flows
I created unique user flows utilizing the research created to understand the direction and user journey of each individual and how they would interact with the application.
Wireframing the solution
Based on the above problems identified, I worked towards addressing these pains by coming up with potential solutions:
-
Reducing the number of steps to minimise time to completion.
-
Making buttons visible.
-
Establishing a clearer visual form hierarchy by grouping related fields.
-
I had to come up with a standardized styling and UI pattern for future AIs.
-
Well structured navigation
-
Informative data that is actionable
I quickly mocked up some basic wireframes to gather feedback from Product, Engineering, and the users on the overall layout and structure of the wizard form. This involved establishing a standardized visual hierarchy and layout.
Iterate, Iterate and Iterate
-
Improve the data we provide - wanted to display the data more visually for it to be better digested and appealing.
-
Improve navigation - We included a sidebar of quick links.
-
Improve actionability
Validating the designs
I conducted usability testing sessions with our primary users to validate whether the new designs would solve their problems. I created my high-fidelity mockups in Figma allow the engineers to inspect the file and export the HTML and CSS code.