Tapestry A.I.

A NanoGiants Hackathon Challenge

A data analysis solution that uses powerful A.I. to help standardize and parse both your qualitative and quantitative data in one easy to use space. Visualize and share insights as beautiful reports to help you make feedback driven decisions!

Landing page for tapestry AI

Context & Problem Space

NanoGiants — and many other companies — have access to overwhelming amounts of unstructured customer feedback — app store reviews, surveys, testing, etc. It’s difficult for researchers to know how to coordinate all of that data, what data is relevant, and when to stop collecting and start designing/developing.

The Hackathon Goal: use AI driven insights to deliver a user-centered experience for feedback data.

Visual of the status quo for information flow

Status Quo

Diagram illustrating the desired AI solution

Goal

As designers, we were asked to consider:

Our challenge:

Use UX Design processes to design a SaaS product that displays AI driven insights from unstructured customer feedback in a visual, easy to understand way, and provides a dashboard that is enjoyable to use.

We had 60 hours and a team of 5 intercontinental designers, meeting for the first time, to go through the design process and produce a clickable prototype.

PHASE 1: Initial Design Workshop & Research

Having never met before, extreme time constraints, and an 8 hour range in time zones, my team’s first need was to get on the same page with both the challenge, our process, and our tools. We made a google Jamboard, defining the problem statement in our own words, identifying the target user, and creating ‘how might we’ statements.

One teammate setup a kanban board and filled the “To Do” column with cards outlining the design process. Individuals added missing items, and we volunteered our leadership over phases of the process we felt strong in.

Kanban board for project

I volunteered to lead research. That included:

After research tasks were divided, I hustled to find and interview two people from my network who represented our user and were available for an interview asap. I landed interviews with a Head of Experience Design and a Data Scientist within two hours.

Jamboard documenting interview insights

I created slides on our jamboard to organize interview data — including: pains, needs, attitudes and behaviors, and quotes — and slides for competitor screenshots and notes. Once our time ended for generative research, we met and discussed the findings. I facilitated the discussion with the goal of having the data guide our next steps in designing solutions.

Our findings helped us complete our 5W’s

Persona

Persona card

Based on our interview data, I crafted a persona in our shared Figma file, so that all teammates could easily see and reference our target user’s needs and context.

Phase 2: Architecture & Flows

The competitor analysis gave us some common patterns and working solutions to pull from, while the interviews helped us dig into what was missing and how we could add value to our app. To maximize our limited time, some teammates began creating a simple UI style guide and wireframes based on existing patterns, while I worked on developing our architecture and flows based on needs and insights discovered in the interviews.

First, I combed our interview data for clear user goals/stories. Then, I completed a task analysis on each story.

Next, I developed those task analyses into user flows. These helped our team visualize the actual screens our app would need, as well as what key content was needed on each screen to complete a specific task. Additionally, the user flows helped us visualize when a user would need to make a decision or input data to continue the task. Again, these user flows were created on our shared Figma screen for easy and quick reference.

User flows

Now, teammates working on UI elements and wireframes were cross-referencing their wireframes with the user flows to make sure they were aligned. At the same time, I began creating a sitemap with a complex navigational structure to visualize the prototype.

site map

Phase 3: Prototyping & Final UI

Now we were down to our last hours. I took responsibility for turning the wireframes into a clickable interactive prototype. All my teammates had gone to sleep in their later time zones, so on my own I was prototyping and running into discrepancies between the wireframes and user flows. I made revisions as I connected the prototype and tested the flows myself.

In the last hours of the hackathon, my teammates dialed in the final UI and tested the prototype themselves to try and see if they could break it. Another teammate created a video pitch presentation of the product. And then, we were done!

Linked screens displaying the prototype
Landing page for tapestry AI

Takeaways

This hackathon taught me where my strengths lie, by seeing where in the process I naturally took leadership and responsibility. It also gave me confidence in my strengths seeing my teammates focus on other aspects, leaving research, information architecture, and prototyping open for me to lead. Seeing how other Product Designers go through the design process and what tools they use was also very insightful and gave me new tools to add to my toolbox. Lastly, the challenge of collaborating remotely and across the world is now a common context in the tech industry, so that experience introduced me to valuable collaboration tools and techniques. I recommend all designers participate in hackathons to grow their skills, affirm their strengths, learn new tools and approaches, and make friends.

TOP