SaaS · UX Architect & UX Designer · Fully Ideated MVP in 5 weeks
Brandables Case Study
Scroll ↓
Brief
Carve out the architecture of MVP 1.0 and advance it to a fully ideated MVP 2.0 that helps “Marketers” & “Employees” manage their branding efforts.
Client
Brandables is a B2B SaaS platform offering branding intelligence solutions to professional service providers and marketing executives.
I was joined by two other designers, Paxton and Lola, and introduced as a team to our client, facilitated by Springboard.
Strategy
We worked as a Design Consultancy & adopted Lean UX methodology to ensure a fully ideated redesign of MVP within a tight timeline.
My Role
UX Architect & UX Designer
As the Architect, I was responsible for architectural mapping and analysis and designed the platform for one core user group, “the Marketer(s).”
To speed up our progress, I worked closely with our Team Lead, Paxton, who assisted with the architectural work and designed the other platform, “Employees.”
Scope
Heavy MVP (re)design within a tight timeline and budget
Masked Client Identity & Some Descriptions (NDA)
Constrained Opportunity for research
We still utilized multiple research methods to inform our decisions and strategies. However, due to space constraints, research details will only be mentioned briefly if needed.
Project Snapshot
Duration
5 weeks / 60 Hours
State
Remote
Tools
Figma
Figjam
Zoom
Google Drive
Notion
Asana
Optimal Workshop
Google doc
Slack
Team
Minmin/Maxine | UX Architect & UX Designer
Lola | UX Researcher
Paxton | Team Lead & UI Designer, assisting with Architectural works
Before we start the journey of “ideate - validate - iterate,”…
emphasizing the client & product in real life kicked in.
❗Unexpected Shift of Design Focus
Initial Understanding from Original Brief
Our client described the design tasks as optimizing the current MVP by identifying and solving UX bottlenecks. Our success would be measured by increased engagement metrics, reduced drop-off rates, and a more well-received prototype, which we assumed would be testified by user testing.
Preparation
#1 - Icebreaking within the team
Knowing the teammates (competency, working preferences, availabilities, etc.) set the foundation for collaboration.
#2 - Created a mutual team working space (slack)
#3 - Selected necessary tools (all listed in tools)
#4 - Created a kick-off meeting plan agenda
We wanted to make the meeting efficient and show professionalism so the client would appreciate our advice and share information more openly.
Hiccup & Announcement in Kick-off Meeting
Finding time for the kick-off meeting was difficult due to our client’s availability. So, they sent us the platform's Figma file and user persons word document. After studying both, we realized we needed clarification on many aspects of the product, so we prepared a document listing all the questions.
However, during the meeting, before we could discuss them, we learned that the client had found a new market-product fit and thus decided to redesign the entire platform. They were unsure how we could help, so they proposed cleaning up the current Figma file (see below), which was unorganized and confusing.
So, what we expected - a usability improvement project, unexpectedly became an MVP (Re)design project.
Plan & Divide
MVP (Re)design means our client needs to audit the current MVP, identify the features essential to the new MVP.
Therefore, it involves significant strategizing and architectural design, which requires constant communication, validation, and input from both the client and the design team.
Our team reached a consensus - we could use our knowledge to assist in the MVP redesign process following this timeline we saw as feasible (as below).
We also re-evaluated the role division, and Paxton decided to help me since the primary focus became improving Information Architecture.
-
Consolidate & Benchmark the current architectural structure
Discover more with client to understand their vision and the product better
Define the problem & our approaches
-
through figma file clan-up, and structure mapping out in 3 angles (content, flow, and hierarchy)
-
Consolidate platform positioning and feature sets, update onboarding flow, and lay out IA 2.0 on Figma
-
Originally, we planned to run tests this week. Due to time constraints, we ended up rapidly wireframing for essential user groups and finalized MVP.
So, our journey began with empathizing with the existing MVP, product vision, users, and more through Benchmarking & Communication.
Week 1
Empathize The Product, Users & Client
Heuristic analysis - Lack of Design System
Each member did it separately, and our researcher compiled it together.
The usability issues were apparent, such as unreadable fonts, nonfunctional buttons, and information overload on the Landing Screen.
But most notable was the lack of a complete design system - inconsistencies regarding the hierarchy, typeface, and components.
Given the lack of additional documentation, we noted that this MVP needed a thorough design system set-up if it was a feasible priority within the timeline.
Benchmarking
Incohesive Architecture
At the same time, our Team Lead and I have begun to lay out the current information structure. However, we were unable to carve one out due to -
Premature flows: Screens were scattered without being put into flows, and the grouped ones did not indicate the user group they intended to serve.
Chaotic versions: Duplicated screens with minor differences hinting at outdated versions or similar screens in different stages of update/design.
Limited design documentation that we could refer back to.
Therefore, we each dropped questions and had this file with questions ready to hear about the client’s clarifications.
Positioning & User Groups
After reviewing the document and listening actively to our client, we learned that the platform aimed to attract managers who oversee employees' branding efforts (professionals, e.g., Lawyers, financial advisors, etc.) because they were tied to the company. These managers would then bring individual employees on board to start using the platform to help with building their brands further.
The manager/VP/Seniors were categorized as “Marketers,” and the individual professionals/employees of the company were identified as “Employees.”
In other words, we had two distinct user groups with different behaviors and goals and, thus, different functionalities. However, they shared one coherent platform and uniform expectation—they could complete the tasks simultaneously.
Debrief Our Discovery
This was a much deeper understanding of the platform's intended functionality. However, we still felt stuck due to a lack of clean information architecture. We needed to know each user group's existing screens/flows to identify gaps, and it would also aid the client in making a more informed decision regarding the new MVP.
“How do we lay out MVP 1.0 structure and build a complete information architecture for MVP 2.0?”
Identify the Problem
Based on this shared understanding, we started strategizing and identifying individual tasks. As the Information Architect, my tasks were quite heavy in the next two weeks, so our Team Lead, Paxton decided to assist.
Encompassing the insights we’ve learned, we adopted the following methods to brush out the structure for the existing MVP (MVP 1.0):
Identify Our Approach & Tasks
-
set up a master Figma file as the primary work field to avoid interrupting the client’s progress and organized the existing screens
-
laid out the flows for each user group (Marketer, Employees, Standalone VPs) with usable screens & placeholder screens (to fill in gaps in the flow)
-
involved content audit, feature listing, and mapping
-
helped to have a birds-eye view of the existing navigation & hierarchy
As planned, I worked closely with our team lead to brush out the existing information architecture through clean-up and mapping in 3 angles: Flow, Content, Hierrachy.
Week 2
Brush out Information Architecture 1.0 & 1.5
Color Coding
Based on our previous conclusion, it’s apparent that the clean-up must happen before anything else.
Making sense of these screens in various development statuses and states was challenging without documentation and with only one weekly meeting with the client.
We figured “Color Coding” would help filter screens quickly, so we created three parking lot sections -
Duplicated screens
Outdated screens
Screens in question: screens unrelated to any other ones, or repeatedly appeared but seemed confusing or needed more clarification from the client
Architecture Cleaning
Flow - Wireframe Diagram
Weaving Into Flows
As our team lead and I cleaned up the screens, we also started arranging them into flows based on user groups.
We created separate pages in the Figma file for each user group and filled in existing screens into flows within the user group's experience (when they landed on the platform).
Placeholder Screens
For any part of the flow where we could sense gaps, we added placeholder screens to complete the flow.
This allowed us to visualize the architectural gaps and consolidate our understanding more precisely.
Before clean-up
After clean-up
Information Overload
Our Team Lead and I collaborated to document the content we identified across the file during the clean-up process. Due to information overload and inconsistent designs, I was confused about extracting the suitable contents, so I decided to tackle it step-by-step.
Firstly, I had a quick discussion with our Team Lead regarding the core features (the highest level of content that we decided to extract). Then, I used those as buckets and grouped sub-contents under them.
Content - Feature Mapping
Affinity Mapping
After that, I went through discussions with our Team Lead regarding:
Whether the sub-features listed were mutually agreed upon & under the right core features
And whether the (sub)features marked in question were necessary
After reviewing all the sticker notes, we mapped out feature lists for both user groups, “Marketers” and “Employees.” This process ensured we evaluated the feature list together before presenting it to the client. It also helped us audit the content, see what functionalities the product tried to offer, and what was in the envision but lacked proper realization (from our understanding).
Hierarchy - Site Mapping
During the screen reorganization and weaving flows process, our Team Lead created sitemaps for each user group so that we could pass them on to our Researcher for future testing. I discussed this with him, so we both held the same view of the current hierarchy and marked anything in question in yellow to be brought to the client later.
We presented and consolidated the current information architecture and features with the client.
Visualized documents & Engaging our client in a sprint-like manner helped immensely with alignment & strategizing.
So, it’s time to fill in the gaps and put out the architecture of MVP 2.0.
Week 3
Fill In Information Archeticture 2.0
Branding effort management platform with insights from AI
As we continued to carve out the architecture, our discussion pointed to a question related to core functionality—an AI-based feature called “brand consultant.” This feature fragmented into different scenes and other functionalities, and the primary location on MVP 1.0 seemed unfitting to the current positioning.
To reconsolidate it, our client returned to their user interviews and stories, and our researcher assisted greatly with her analysis of the competitors, card sorts, and lighting demos. Our Team Lead and I contributed to the continuous discussions with the client.
It turned out that tasks mainly revolved around “Marketers” managing branding efforts from “Employees.” So, a consensus was reached - “Brandable’s platform is a branding effort management platform with insights from AI.”
Consolidate Platform Positioning
Visualization, Communication & Rapid Wireframing
Throughout the discussions and meetings, we realized that our client had difficulty understanding specific UX or feature-related concepts because our explanations were mostly word-based.
So, we adopted the “Lighting Demo” method to bridge this communication gap. Essentially, for all the core features and hanging matters, our researcher would gather examples from the competitor analysis she conducted or other products with similar functionalities.
Those examples helped immensely in visualizing concepts more quickly and ensured we were all discussing the same thing. In addition, they served exceptionally well in the later stage of rapid wireframing.
Insipre From Lighting Demo
Based on the concluded positioning, we defined with the client the core feature for each user experience and the sub-features as well as design considerations:
For “Marketers,” it’s the ability to manage employees’ branding activities and progress.
For “Employees,” it’s the ability to manage their branding-related tasks.
Complete Feature Sets
We have fulfilled the original requirement—cleaning up the current architecture and prioritizing features of the new MVP.
However, with only one week left, delivering a complete high-fidelity prototype and running tests was insufficient.
To ensure the client’s continued progress on the project, we decided to help them build the new MVP to a stage that their in-house UI designers could take on and produce the high-fidelity screens precisely.
Therefore, we divided the tasks into:
Evaluate Timeline & Divide Tasks
-
I will work on the low-fidelity screens for the Marketer’s platform to fill the essential architectural gaps. They needed to be created from scratch with no existing screens to refer back to.
-
He would update the high-fidelity screens and create some low-fidelity screens for the Employees’ platform based on improving on the existing applicable ones.
-
She would write out Research plans and create documents accordingly to lay out the path for user tests.
Incorporating Insights From UX Discussions Into Designs
Our client was not confident about how the discussions would aid the final designs and kept going back to the atom/molecule level of the design for specific screens.
Our solution demonstrated our wireframing proficiency over “Fixing Onboarding & Authentication Flow” since that part was solidified. It’d help alleviate the client’s doubt over the benefits of UX strategizing, so I made the necessary updates.
Following internal critique within the team, the design was refined and integrated into the official flow presented to our client. They were satisfied with how it turned out and acknowledged the importance of strategizing before going into design.
Update Onboarding Flow
Update by me (with team critic)
Through ongoing discussions and insights integration, we developed the Information Architecture for MVP 2.0, building on relevant aspects of the old MVP and using rapid prototyping to fill gaps with clean, updated screens.
Information Architecture 2.0
Official Flow presented to client
To create the entire “Marketer” platform…
Time to run a sprint🏃♀️💨
Week 4
Design Marketer Platform Experience
User Journey Mapping
Our insights, discussions, and research gave us a good idea of the tasks being accomplished. However, we still needed to visualize the actions and expectations after landing on each screen.
Additionally, my Team Lead and I thought it would be beneficial to include sub-features that we agreed on in the mapping as a bridge to guide between higher-level journeys (screen and process) and low-level actions (functionality and content).
Therefore, I created an Employee Management Red Route Journey Map and checked with our team before ideation.
Visualize Red Routes
Step 1 - Define
By creating a comprehensive screen layout with action states, I was prepared for the workload and identified the optimal starting point. Each screen was accompanied by a detailed feature list, ensuring the design met user needs and included all necessary content.
Rapid Wireframing
Step 2 - Deconstruct & Extract
As mentioned before, I drew inspiration from Lighting Demos collected by our Researcher to understand the standard design. Then, I deconstructed the designs to their elemental components and extracted relevant parts for the feature under ideation.
Step 3 - Sketch
Next, I rapidly ideated variations for the features, such as for the "Information" section in the "Individual Employee Profile" screen. This section needed to display multiple pieces of information, highlight the employee's Onboarding stage, and feature a CTA for resending invitations if necessary.
After several variations, I found it more logical to separate the highlighted information and CTA to keep the information section clean and make the highlight more apparent. So, I redesigned another variation accordingly.
Step 4 - Feedback & Iterate
After finishing the initial designs, I discussed them with our Team Lead to assess usability and space efficiency. With a fresh pair of eyes giving feedback, we decided which designs would be selected for the MVP.
To give a quick example, one of the functionalities required to be designed was the ability to invite employee individually, in bulk via csv. File or Outlook integration. To visualize inviting multiple employees on one screen, I created a space “Stack” to track invitation.
After finalization, I worked with our Team Lead to create wireflow diagram, and our team met with the client to ensure alignment with the new MVP and its repositioning as a branding efforts management platform.
Finalize Wireflow
Initial “Stack” Design
We quickly realized that breaking those into two flows/buttons (import CSV and invite employees) would confuse the Marketer and add unnecessary cognitive load for decision-making.
Therefore, I worked with our Team Lead to merge them into one action/button—invite an employee. Regarding the “Stack” concept, we agreed it was helpful to visualize the multiple invitations, but we refined it to occupy less space and be more straightforward to users.
Iterations
Final Designs
Final Version
We finalized the MVP with enhanced high-fidelity screens and essential low-fidelity screens, creating seamless task flows for both user groups through two consistently designed portals, and documented original screens separately for client reference.
Final MVP
Now, we came to …
Deliver Final Result 🎉
Hear Client’s & Teammates’ Comments 👍
Final Design Deliverables
A fully ideated MVP
complete master architecture
updated high-fidelity screens
essential low-fidelity wireframes that were sufficient to realize dev-ready screens
A design system with a component kit
Access to strategy & design files that may be inspirational
A complete research roadmap
Documentation of research reports
Next steps
Editable documents for testing
“We could’ve never done it (redesign of MVP) without your team…” — Client
This challenging project allowed our team to bond quickly. During our celebration, teammates mentioned their appreciation of my positivity and smile in chaos, which boosted team morale significantly. Our Team Lead also praised my strategic thinking, rapid prototyping, and good design presentation skills.
Our client was highly impressed and had minimal queries regarding the execution of the designs. They found our handoff meeting to be exceptionally comprehensive. They greatly appreciated our efforts and insights and praised how we have positively impacted their business.
“You singlehandedly designed the equivalent of an entire platform, and …” — Paxton
Takeaway
Looking back, things I’ve learnt are…
#1 - Good communication relies on yourself, the team, and the client. It’s essential to set up for it to flow.
Excellent communication is a buzzword that everyone talks about, but what does it mean when it falls on paper?
After this project, I came to a more grounded understanding: It means building a system that allows and encourages flowy discussion to agree on what & why to achieve and how to make it happen.
Within the team
We established a shared Slack channel, held weekly strategy meetings, set guidelines, and ensured timely progress updates. They prompted us to stay on top of our tasks and avoided delays or confusion, so we were able to brace through uncertainties and changes as a team.
With the client
It means managing their expectations. It’s crucial to clarify our understanding, explain clearly what we can do, and, importantly, what we can’t or do not think would be feasible/beneficial for the client.
Lastly, be creative with how you communicate, and don’t get discouraged when the communication seems to scuff at first. Fine-tuning the communication method based on who you work with is a necessary process 🙂
#2 - Strategization & Prioritization brings back focus & alignment in chaos.
When the project wants to focus on too many features or when the team feels overwhelmed to accomplish a task/goal, it is almost always most beneficial to look back at our strategy—what is the ONE most important thing both the design team and the client want to achieve, and what is the fastest way to make it happen?
The ONE thing is “to create an intuitive MVP for both Marketer & Employee user groups” in 2 weeks.
When this objective was made clear to the client and approved by everyone, it became simple to outline the necessary tasks and evaluate the progress because we were aligned to move towards the same destination.