Project Overview 🚀
Embark on a transformative journey with the Adobe Widget initiative, a cutting-edge addition to the Workfront project management platform. Seamlessly merging collaboration and strategy, this innovative solution introduces a flexible and personalized workspace for users, enhancing their focus on daily tasks.
The Process ⌛
Discovery 🔬
I started with limited knowledge about designing widgets and working with Workfront, I immersed myself in the platform. Through hands-on exploration and user-centric interactions, I gained valuable insights into the tool's intricacies. Additionally, I delved into widget research, collaborating with other designers to understand the nuances of design, behavior, and functionality.
Workfront is a complex and intuitive project system. It has a steep learning curve but once you figure it out you can truly maximize. It feels like a Russian doll, every time you get on Workfront you're surprised with something new
Research 🔎
I aimed to uncover pain points in submitting and tracking requests, understand users' thought processes, and determine the time involved in the request process so I conducted 15 user interviews.
When I was learning Workfront, I found myself frustrated because of the level of complexity it requires, so I wanted to understand what users truly felt 😩
Empathy Map Insights gathered from talking to users Metrics from usability testsQuotes from usersThus I asked myself 🤔
Strategy ♞
Upon clarifying my users, understanding the concept of a widget, and grasping the dynamics of project requests, I proceeded with the project. I started by breaking down the main tasks into a user flow.
User flow for submitting a project request on WorkfrontUser flow for tracking a project request on WorkfrontUser flow for project request appearing on the queueThe ChallengeThis prompted me to explore various strategies and approaches:
- Separation of Project Request Flow: Divide the project request flow into two main steps and create two distinct widgets.
- Scaffolding the Flow: Structure the flow to fit into a widget form, considering its limitations.
- Selection of Compactable Steps: Determine the criteria for choosing which steps should be condensed into the widget.
- Entire Flow in a Widget: Explore the feasibility of fitting the entire flow into a widget, questioning whether it would still maintain its essence as a widget.
This strategic exploration aimed to address the challenge of integrating a comprehensive project request process into a widget, ensuring a seamless and efficient user experience.
Ideation 🧠
I opted to rely on insights from users, ideation sessions, and feedback from designers and engineers to shape my approach. Instead of facing a roadblock and remaining stagnant, I chose to navigate around it in the hope of discovering the answers. This approach allowed me to generate a variety of ideas.
I thoroughly examined the design system, analyzing components commonly utilized across Workfront. My focus extended beyond the confines of Workfront, as I explored components and elements adaptable for a widget, even if not traditionally used in that context. My strategy involved introducing novel components suitable for widget implementation. More significantly, I proposed the inclusion of new components tailored to widget frames and sizes within the design system. This proactive approach aimed to enrich the design system to accommodate the evolving landscape of widget design across Adobe tools.
Iterations ⤵ 🖌️
Diving into design decisions
I created ideas based on user needs and feedback, I explored ways to create a project widget that offers more functionality than traditional widgets. Sketching and collaboration with other designers fueled the ideation process.
These concepts were transformed into my mid-to-high fidelity designs, evolving with continuous input from both designers and customers. This iterative process allowed me to channel each idea into a refined design iteration.
1️⃣ Two Separate Widgets
I created two widgets to nail that authentic widget feel. They're super straightforward, handling just two main tasks: tracking requests and submitting new ones. This keeps things professional while ensuring the widgets are user-friendly and packed with essential info.
Two Separate Widgets. First Idea and iteration. Considerations:
1. Task Separation: User who prefer a modular approach might appreciate widgets for a specific task.
2. Visual Clarity: With Two widgets can highlight a specific action to reduce cognitive load.
3. Parallel Workflows: User might prefer the ability to complete two different tasks simultaneously.
2️⃣ Two Widgets with a Compressed Look
The following concept I crafted involves preserving distinct widgets while making an effort to squeeze in as much information as possible, all in a condensed format.
Exploring a collapsible form. Considerations:
1. Condensed Form: Some users prefer forms in sections for better widget integration, but managing the behavior poses a challenge.
2. Compact Table: Using icons to show different information
3. Navigation: User might prefer the ability to navigate to information within the widget
3️⃣ A Single Widget with an Inline Editing
In this idea, I explored a single robust widget with additional features and behavior. This will allow users to find everything they need in within a single widget.
Robust widget with an inline edit featureConsiderations:
1. One-Stop Solution: Combining project request submission and tracking into a single widget provides users with a one-stop solution for managing their projects.
2. Space Optimization: Single widget made would leave more space in Workfront.
3. Table Form: User might prefer a table as an organized way to see information.
4. Learnability: Users would have an easier time learning one widget over two.
4️⃣ A Customizable Widget Feature
In this notion, users have the freedom to personalize a single widget, selecting the sections and information they prefer based on their roles and job tasks.
Customizable feature for the widget
Considerations:
1. Personalization: With just one widget, users can pick and choose the exact functionalities they want to add to their Workfront Home. It's all about giving users the freedom to shape their workspace based on what suits them best.
2. Scalability: Integrating the customizable feature posed the challenge of determining how the widget would scale in size.
5️⃣ Submit a Request Widget
Submitting a request is a vital function of the request widget, so I explored an idea to enable users to submit a request directly within the widget.
Considerations:
1. Contextual Focus: This format will keep the user's attention on a specific task or interaction by overlaying the main content.
2. Space Efficiency: Modal windows are space-efficient, making them ideal for presenting forms in a clean and concise manner.
6️⃣ Conducted A/B Testing to help decided between a single widget or two widgets 📝
I conducted 7 tests to learn which flow user prefer. Through A/B testing, we got insights from users, and based on their preferences and feedback, we decided to go with a single, all-encompassing widget instead of having two separate ones. 5 out of 7 prefer single widget
Insights from majority of the A/B Tests7️⃣ Finalized Design 💻 🆕
Search and Track Request
Search and Track Project RequestsSubmit a Project Request
Submit a Project RequestUpdate a Project Request
Update a Project RequestFiguring out widget sizes was a real puzzle 🧩
I had to juggle content, user interactions, and device adaptability. Usability testing and user feedback were like my secret weapons in getting those dimensions just right. Prioritizing info, creating a visual pecking order, and keeping things accessible were on my checklist. Consistency across widgets tied everything together for a seamless experience. The result? Widget sizes that are not just intuitive but also bring a user-friendly vibe to the whole interface.
Widget Specs 📐
Impact 🎯
What I learned 💡
AND THANK YOU FOR MAKING IT THIS FAR DOWN!
Thank you!