MarkUp

MarkUp is a design collaboration web application for designers, clients, and consultants.

Platforms: Web Application
Role: Co-founder, Head of Product Design 

MarkUp

MarkUp is a web application specifically designed for design collaboration among designers, clients, and consultants in the architecture industry. It aims to streamline workflows and minimize errors caused by manual processes.

The goal is to solve a design review workflow problem in the architecture industry. My responsibilities encompassed conducting research, generating ideas, idea validation, design, and developing the minimum viable product (MVP).

My Role

My role as the Co-founder, Head of Product Design includes:

Product management
Product discovery
Product/UX/UI design
Product road mapping
Hiring an overseas development team
Management of the development team
Conducting market research and user analysis
Establishing workflow and structure
Creating Figma components library and design system
Product quality assurance and testing

The Process

The above diagram detailed the overview of the process employed. Although the diagram suggests a linear progression, various steps were executed concurrently. The research, analysis, design, and iteration stages form a feedback loop that adapts and evolves based on new information and ideas as the product advances.

01. Identifying The Problem

In this project, we engaged with and interviewed professionals from the architectural industry to understand their workflow, daily pain points, current software and physical systems, and associated challenges.

The Problem

The primary issue we discovered is that most architectural practices heavily rely on email for design collaboration and communication. This manual process results in slow, inefficient workflows that are prone to human error. Below are the pain point themes identified.

Fragmented communication
One directional communication
Limited collaboration - No real-time communication and interaction
Manual tracking - Prone to human error
Lack of a centralized communication trail due to the nature of email exchanges
No single source of truth

After the main pain point themes were identified, we conducted surveys and interviews to further understand the priority of the pain points and to dive deeper into the problem areas.

Competitors

Existing architecture design collaboration applications are designed for large-scale complex projects, construction documentation focused. These applications and platforms are often overloaded with complicated project and company settings and features, making them inaccessible, and difficult to set up, learn and utilise for most users.

Identifying the User

It was important to identify the specific user group we aimed to serve, considering that different users have distinct needs. Based on our research conducted, we identified the market challenges and opportunities, we determined that our target users would be small to medium architecture studios.

02. Solutions Generation

After understanding the pain point users are having with their current systems, we initiated brainstorming sessions to generate product ideas that could address the issues. We broke down the existing business structures and workflows to identify inefficiencies and start to reimagine, design and map out workflows that a product could provide to enable a more efficient and simple process. Applications from inside and outside of the architecture industry were used as inspirations, the goal was to bring the efficiency and product design principle and processes of the tech industry into the architecture industry.

Below are the themes we have identified to generate solutions for:

Improved / innovative/efficient workflow
Focus on “speed & fundamentals”
Centralised communication & collaboration
Tackable actions/drawing activity
Document version control
Easy-to-use markup tools
Easy to access via web
Easy to share and collaborate

03. Product Ideation

In the product ideation phase, we formalise the different high-level solutions we have generated, consolidating and discussing the merit and feasibility of each idea. Diagrams and wireframes, user flow maps were used to give the ideas a form for better discussion and collaboration. This process allowed us to pinpoint the area where we want the product to focus on, before getting into high-fidelity designs.

Development Strategy

The development strategies were discussed as the product idea became more crystallised. Development staging, timeline and cost were part of the discussion to understand the viability of the idea.

Defining the MVP (High-level)

During this stage, we deliberated on the high-level features and constraints of the Minimum Viable Product (MVP). We compiled a list of desired features, categorizing them as "Nice to haves," "Should haves," and "Must-haves." It was essential to be stringent in determining which features belonged to the "Must-haves" category, as every additional feature would increase design and development time and cost. We prioritized refining the fundamental aspects (speed, stability, and usability) and core features of the application.

04. Product Market Research

As the idea of the product starts to take form, research was conducted to assess the product-market fit and explore potential market strategies. The following research and analysis were performed for MarkUp to gain a comprehensive understanding of the app's potential, as well as the challenges and opportunities present:

Market size
Competitors analysis
Market strategy
Revenue model analysis
Cost breakdown

05. Validating the Idea

To ensure the viability and alignment of our ideas with the needs of the architecture industry, we actively engaged in surveys and user interviews throughout the product ideation process. These interactions allowed us to discuss, prioritize, and validate solutions and ideas with professionals in the architecture industry. By gathering valuable feedback at this early stage, we obtained crucial insights into the desired direction of the product and used this information to shape our product roadmap.

06. High-Fidelity Design for Development

Following the agreement on the product idea and direction, we proceeded to create high-fidelity designs to establish a concrete representation of the concepts. These designs, characterized by their precision and attention to detail, helped solidify the visual and functional aspects of the product, serving as a basis for the development phase.

07. Development

Simultaneously with the design phase, we initiated the planning and development process and hiring of the development team. We opted to outsource the development to an overseas team due to the cost benefits, I assumed the responsibility of recruiting, managing, and establishing the necessary development processes in collaboration with the development team.

08. Proof of Concept

To validate the core idea and assess the user experience of the application, we designed and mapped out a user journey sequence as part of the proof of concept. The primary objective of this demo sequence was to showcase the fundamental functionality, information architecture and flow of the application, providing us with valuable insights and identifying potential issues at an early stage.

The proof of concept sequence we developed consisted of the following steps:

Sign up
Create project
Inviting a document collaborator
Upload document and revisions
Markup document
Export document

This demo sequence was presented to users for testing and feedback gathering. By observing how users interacted with the sequence, we were able to identify points where they encountered difficulties or confusion. Such feedback helped us pinpoint areas where the design lacked clarity or intuitiveness, allowing us to make necessary adjustments and improvements to enhance the overall user experience.

09. MVP & Development

Following the successful validation of the proof of concept, we proceeded to refine the design based on the feedback received and subsequently defined the scope of MVP to develop. The revised designs were then handed over to the development team for assessment of feasibility, effort, time, and cost required for implementation. Once the scope was agreed upon, development work commenced.

To maintain an iterative and agile approach, we adopted a weekly sprint cycle. After each sprint, a rigorous testing process was conducted to ensure that the development progress aligned with the intended direction. This testing phase served to identify any areas where adjustments to the design were necessary for optimal functionality and improved feature performance.

10. User Testing and Iterations

As the development progressed and the MVP took shape we conducted user testing sessions to gather feedback and identify design issues and bugs. Through interviews, questionnaires and direct observation, we gained valuable insights into user behaviour, preferences, and their interaction with the application, enabling us to make informed iterations and improvements to enhance the user experience during the development process.