```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fliverec%2F85d2a2ad-1255-445f-9aa0-0a880b27fa7d.png?alt=media&token=91755cf8-1357-4a28-a2cd-39b6cc874fb1","id":"85d2a2ad-1255-445f-9aa0-0a880b27fa7d","width":947,"height":722,"filename":"a1.png","type":"image/png","caption":"","border":false}]}
```

---

### **Have you ever dreamed of composing music with the sounds around you?**

I did. Inspired by this vision, I designed **Live Rec**, an experimental app concept for the Apple Watch. This app empowers users to capture the sounds of their world, edit them, and transform them into creative samples that integrate seamlessly with their favorite VST (Virtual Studio Technology) manager.

While the technology for such a tool is still catching up to the dream, Live Rec represents a bold step toward a more immersive and spontaneous music composition experience.

---

### **The Concept**

Live Rec was born from a simple idea: music is everywhere, and inspiration often strikes when we least expect it. From the rhythm of raindrops to the hum of city life, the world is filled with sounds waiting to be turned into music. Live Rec harnesses the portability of the Apple Watch to enable musicians to:

1. **Record Sounds Anytime, Anywhere**\
   With just a tap on your Apple Watch, you can instantly record ambient sounds and save them as high-quality audio samples.

2. **Edit on the Go**\
   The app includes intuitive touch-based editing tools, allowing users to trim, loop, and tweak their recordings directly from their wrist.

3. **Store and Sync**\
   Samples are stored locally and can be synced effortlessly to your VST manager for integration into your digital audio workstation (DAW).

---

## **Designing Live Rec**

#### **Empathy and Ideation**

To design Live Rec, I focused on understanding the challenges and needs of musicians who seek spontaneity in their creative process. Key insights revealed:

* Musicians want to capture ideas before they fade.

* Portability and simplicity are essential for on-the-go creativity.

* Seamless integration with existing tools like VSTs is critical for professional workflows.

#### **Prototyping and Interaction Design**

The Apple Watch’s small screen posed an exciting challenge for interaction design. I prioritized:

* **Minimalist UI:** Clear, intuitive controls for recording and editing, ensuring functionality without overwhelming the user.

* **Haptic Feedback:** Enhancing the tactile experience with vibrations for actions like start/stop recording.

* **Gestural Controls:** Using gestures like swipes and taps for navigation and editing.

#### **Key Features**

* **Real-Time Waveform Display:** Visual feedback of the recording helps users monitor audio levels.

* **Preset Effects:** Quick filters for adjusting tone and texture on the fly.

* **Cloud Integration:** Samples are backed up to the cloud for easy access across devices.

---

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fliverec%2F306702fa-921d-4083-a14c-a0883bec539d.png?alt=media&token=288201c5-1ce7-43f3-bc3e-0413286a137d","id":"306702fa-921d-4083-a14c-a0883bec539d","width":947,"height":620,"filename":"a2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fliverec%2F66f849b2-fe59-4fbc-a666-c50289efabaa.png?alt=media&token=1081f17f-7cde-4333-9f6a-963702716547","id":"66f849b2-fe59-4fbc-a666-c50289efabaa","width":947,"height":619,"filename":"a3.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fliverec%2F275a4a7f-6bc2-4a31-855d-551b1e66e4a6.png?alt=media&token=8e758a54-c0ef-4f6c-9f59-ffafbea17019","id":"275a4a7f-6bc2-4a31-855d-551b1e66e4a6","width":947,"height":619,"filename":"a4.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fliverec%2F658c1c29-cd84-46ed-9a84-3893b4de0eb5.png?alt=media&token=d502dfd5-55d1-42dd-bcb7-89e81576ce20","id":"658c1c29-cd84-46ed-9a84-3893b4de0eb5","width":947,"height":619,"filename":"a5.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fliverec%2F90e96c80-9b86-4b20-93a7-78609799e46c.png?alt=media&token=df2f7904-d61a-4d21-8cbc-399bfd01341d","id":"90e96c80-9b86-4b20-93a7-78609799e46c","width":947,"height":619,"filename":"a6.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fliverec%2Fafe12944-60dc-4124-864b-57d0698c6628.png?alt=media&token=5b6a3570-85c2-44e2-b7b7-b6d058f46fbd","id":"afe12944-60dc-4124-864b-57d0698c6628","width":947,"height":1240,"filename":"a7.png","type":"image/png","caption":"","border":false}]}
```

---

### **Challenges and Future Opportunities**

Developing an app for the Apple Watch introduces unique constraints, from screen size to processing power. While Live Rec is a design concept today, the next step involves collaboration with an iOS Engineer to bring this idea to life.

Additionally, as audio processing technology continues to advance, there’s potential to integrate AI for automatic sound categorization and enhanced editing capabilities.

---

### **Imagine the Possibilities**

Live Rec transforms the way musicians interact with the world, turning everyday sounds into instruments of creativity. Whether you’re a producer searching for unique textures or a songwriter capturing fleeting inspiration, Live Rec makes the world your studio.

Are you ready to bring this idea to life? Let’s collaborate and make music more accessible, intuitive, and spontaneous than ever before.

---

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fliverec%2Fa818242c-97a7-4f89-995e-8ac52ee0a023.png?alt=media&token=3a593d05-cbc1-449c-a45d-558ad7dde4cd","id":"a818242c-97a7-4f89-995e-8ac52ee0a023","width":947,"height":947,"filename":"a8.png","type":"image/png","caption":"","border":false}]}
```

Live Rec – Redefining Music Composition with Everyday Sounds

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fpicea%2F8136c0ed-331a-4cc7-91ec-a89e33d8356d.png?alt=media&token=d257d6f7-0a2e-4a38-9bbd-0210941f4918","id":"8136c0ed-331a-4cc7-91ec-a89e33d8356d","width":3908,"height":2051,"filename":"Group 41.png","type":"image/png","caption":"","border":false}]}
```

---

* **MY ROLE:** UX Design, UI Design, Prototyping, User Research, User Testing.

* **METHODS:** Desk Research, Contextual Inquiry, User Interviews, Usability Testing.

* **DELIVERABLES:** B2C iPad App, Design Documentation.

---

## 1. Discover: Understanding the Challenge

“Healthy, Green, Highly Efficient”—this is the motto of **HPS**, a forward-thinking power supplier based in Berlin. Their vision is ambitious: make renewable energy accessible to every home.

In 2021, Germany’s new building laws required all new constructions to meet very low-energy standards. Living in a ‘60s-era flat myself, I was captivated by the idea of upgrading to a home that could generate clean energy autonomously.

During my first meeting with HPS, I learned about their groundbreaking energy system. It includes:

* **Energy Storage:** A compact unit with batteries, electronic components, ventilation, electrolyzer, a fuel cell, and an energy manager.

* **Hydrogen Storage:** A unit that stores solar energy collected in summer to use during winter.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fpicea%2F66e5c7d2-8599-450c-8af6-4cfcc43b4f29.mov?alt=media&token=2c5fa28f-4958-4364-9bc8-e69f1dff49e0","id":"66e5c7d2-8599-450c-8af6-4cfcc43b4f29","width":1500,"height":1256,"filename":"Hardware.mov","type":"video/quicktime","caption":"The HPS prototype photographed in the company's labs.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fpicea%2F02ed1d37-f289-43d6-ab8c-202f831e4b15.png?alt=media&token=2069c070-4430-4031-b0a9-da108c739583","id":"02ed1d37-f289-43d6-ab8c-202f831e4b15","width":441,"height":881,"filename":"1.png","type":"image/png","caption":"Hydrogen Storage.  This unit stores the solar energy from the summer to make it available in the winter.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fpicea%2Fbc54cdf9-4e43-47aa-9047-6f0c8c5314f8.png?alt=media&token=36b82ad3-05df-4a59-99fe-21ac2cfa5e12","id":"bc54cdf9-4e43-47aa-9047-6f0c8c5314f8","width":573,"height":654,"filename":"2.png","type":"image/png","caption":"Energy Storage. This combined unit includes batteries, electronic components, ventilation, electrolyzer, fuel cell and an Energymanager. ","border":false}]}
```

This tech promises a future where we can generate, store, and control our energy at home. What blew me away was its “transparent efficiency”—heat generated during the process is reused for water and heating, and users only need to set their preferences based on the season or time of day.

---

## 2. Define: Focusing on the Users’ Needs

After diving into technical documentation and talking with HPS stakeholders, it was clear that this system needed a way to visualize its complexity in a simple, user-friendly way. That’s when we started designing **Picea**, an iPad app that lets users monitor and control the energy system right from their walls.

But we had to solve a few big challenges first:

1. **Price & Target Audience:** This advanced technology targets a niche market, so the app needed to feel premium and worth the investment.

2. **Making Data Useful:** Users should be able to ask questions like:

   * “How much energy can I save this month? How much money?”

   * “Can Picea adjust itself automatically when I’m not home?”

---

## 3. Ideate: Exploring the Solution

### Key Features Emerge

Through interviews with HPS researchers, engineers, and stakeholders, we identified two essential new sections for the app:

* **History:** A timeline of energy production and usage to help users understand patterns over time.

* **Settings:** A space to group key controls, with options for automated adjustments based on user needs.

To make the app approachable, we also added **info panels** that could hide or show definitions of technical terms like “electrolyzer.” This made the app accessible to all users, regardless of their tech knowledge.

### Early Wireframes

Collaborating with the client, we produced the first low-fidelity wireframes to define the app’s three main sections:

1. **Overview:** Real-time system monitoring.

2. **History:** Energy usage over time.

3. **Settings:** Customizable controls for the hardware.

These early sketches helped us visualize the app’s flow and ensure that the design matched the needs of both HPS and the end users.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fpicea%2F169eae58-0da9-4bf6-b9f3-8f7928a81719.png?alt=media&token=e9355cfb-b0f9-45e0-8c36-378373a8443e","id":"169eae58-0da9-4bf6-b9f3-8f7928a81719","width":2768,"height":1964,"filename":"Group 42.png","type":"image/png","caption":"","border":false}]}
```

---

## 4. Prototype: Designing and Testing

This step took a little longer than usual because of how unique the product is. But the client had a great suggestion: explore two distinct design directions.

### Design Directions

1. **Minimalist Approach:** Clean, simple visuals focusing on symbolic representation.

2. **Illustrative Approach:** Detailed graphics and visually rich elements.

The biggest challenge? Creating an intuitive interface for such a high-tech system. It had to feel easy to use while still showcasing the beauty of the technology.

### Testing Both Versions

We tested both designs with the HPS team and real users. Feedback helped us refine the app to balance simplicity and functionality. The final design combined the best of both worlds, with a clean layout and rich interactions where it mattered most.

---

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fpicea%2F8170b0f9-8b1f-4056-b2bf-bfb877495e64.mov?alt=media&token=2225ebe0-8b7a-46a5-bca6-fc6850724a1a","id":"8170b0f9-8b1f-4056-b2bf-bfb877495e64","width":2118,"height":1348,"filename":"demo.mov","type":"video/quicktime","caption":"","border":false}]}
```

## 5. Test: Real-World Feedback

### Usability Testing

To make sure the app worked well for users, we conducted usability tests with both HPS stakeholders and potential customers. Here’s what we learned:

* Users loved the **History** section for tracking patterns but wanted clearer graphs.

* **Info panels** made the app more approachable for non-technical users.

* Automation settings in the **Settings** section were a hit—they simplified energy management for busy households.

### Iterating Based on Feedback

We refined the app based on feedback:

* Improved navigation to make switching between sections smoother.

* Enhanced visual hierarchy for data displays, making key stats stand out.

* Tweaked the onboarding process to introduce features gradually.

---

## 6. Deliver: The Final Picea App

The final version of Picea is a sleek, user-friendly app that brings cutting-edge energy management to everyday users.

* **Overview Section:** Provides real-time data at a glance.

* **History Section:** Offers detailed insights into energy trends.

* **Settings Section:** Lets users customize and automate their energy usage.

We even created an **interactive info card** feature to explain complex system components, making the app educational as well as functional.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fpicea%2F84d4d3e2-acfb-4b7f-8f1b-3bdab9ef3194.png?alt=media&token=4138173f-5556-4fd7-bd63-5993a14cbfcb","id":"84d4d3e2-acfb-4b7f-8f1b-3bdab9ef3194","width":10906,"height":5192,"filename":"Group 43.png","type":"image/png","caption":"","border":false}]}
```

---

## Final Thoughts

Working on Picea was an inspiring journey. It wasn’t just about designing an app—it was about making renewable energy technology accessible and engaging.

The final product strikes the perfect balance between technical sophistication and user-friendliness, proving that even the most advanced systems can be simplified with the right design approach.

By collaborating with HPS and iterating based on user feedback, we created an app that empowers users to take control of their energy while embracing a greener future.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fpicea%2F1dce1655-1eb0-491c-89a5-216a956ea184.png?alt=media&token=7eef5db4-834e-40e2-9434-30074cff2bce","id":"1dce1655-1eb0-491c-89a5-216a956ea184","width":2645,"height":540,"filename":"Group 42(2).png","type":"image/png","caption":"","border":false}]}
```

Picea - Monitoring Renewable Energy at Home

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2F9a908a5c-3c40-4e21-a6ff-58eaedac43b3.png?alt=media&token=3d199e1f-b393-449f-a232-478bc58a0fef","id":"9a908a5c-3c40-4e21-a6ff-58eaedac43b3","width":3943,"height":2549,"filename":"MacBook Pro 16_ - 2.png","type":"image/png","caption":"","border":false}]}
```

---

* **MY ROLE:** UX Design, UI Design, Prototyping, User Research, User Testing.

* **METHODS**: Competitive Analysis, Desk Research, Contextual Inquiry, User Interviews, Usability Testing.

* **TECHNOLOGY:** Ionic Framework.

* **DELIVERABLES:** Responsive Admin UI, Cross-device mobile app.

---

## 1. Empathize: Getting to Know the Problem

When I first heard about indoor positioning, I thought it was just like GPS, but indoors—no big deal, right? Well, I was so wrong. The client’s vision was much more exciting:

* Real-time tracking of multiple people inside a venue.

* Adding social features like messaging, friend requests, and even group games.

This felt like something out of a sci-fi movie, so I dove deep into research. That’s when I discovered **IndoorAtlas**, a platform that uses geomagnetic fields for indoor tracking. It even offered tools for deploying custom apps for specific venues.

We pitched the idea of a **Control Panel** to help venue owners monitor foot traffic in real time, and the client loved it.

Workshops, brainstorming, and user research sessions helped us shape the app’s identity. We called it **inFi**, inspired by “indoor” + “fidelity.”

And since the client was a big FC Bayern fan, the very first non-negotiable request was that we used their iconic colors for the branding, while the rest was inspired by maps and navigation softwares iconography.

Below you can check the process from pencil to vector, and some color tests:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2F81b4dded-1ccb-4f44-acc6-f15a08fb829d.png?alt=media&token=ec5b6cfb-08c8-4d9f-a989-df40b4792326","id":"81b4dded-1ccb-4f44-acc6-f15a08fb829d","width":12200,"height":6200,"filename":"Group 11(1).png","type":"image/png","caption":"","border":false}]}
```

---

## 2. Define & Ideate: Coming Up with Solutions

We wanted inFi to be the ultimate companion for anyone exploring airports, museums, or conference halls for the first time. To get there, we focused on three big things:

### Building Personas & User Flows

We imagined how different people would use inFi and sketched out their journeys, like:

* Finding their way using indoor maps.

* Checking into venues.

* Exploring points of interest (POIs).

* Seeing nearby users and connecting with them.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2Fd3879272-fb11-4def-8587-f9baedae8fb2.mov?alt=media&token=fcbe5942-605b-4382-842e-e605638e12a8","id":"d3879272-fb11-4def-8587-f9baedae8fb2","width":2024,"height":1436,"filename":"0_Jira.mov","type":"video/quicktime","caption":"Agile Board with the first use cases collected.","border":false}]}
```

---

### Handling Privacy the Right Way

Privacy was a huge concern. We didn’t want it to feel like a creepy “Big Brother” app where admins could spy on everyone. Instead, I came up with a **mutual visibility switch**: you can only see someone’s location if they’ve shared theirs with you. It created trust and gave users control.

### Keeping Admins Happy Too

For venue admins, we designed tools to make their lives easier, like:

* Sending bulk messages.

* Viewing real-time traffic on floor plans.

This way, we made sure both users and admins got what they needed.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2Fdd032dcf-a104-4af8-b5a5-a3588494a126.mov?alt=media&token=27110f1b-353d-4cda-bdf2-b10707fc9fa5","id":"dd032dcf-a104-4af8-b5a5-a3588494a126","width":1772,"height":726,"filename":"carte.mov","type":"video/quicktime","caption":"Visibility switch tests","border":false}]}
```

---

## 3. Prototype: Bringing Ideas to Life

Here’s where the fun really started—turning our ideas into something we could actually test.

### Sketching It Out

I started with **low-fi wireframes**, keeping everything simple. This let us focus on how things worked, not just how they looked. Mapping out interactions and catching errors early saved us tons of time later.

### Teaming Up with Developers

Since we were using **IndoorAtlas**, we chose the **Ionic Framework** for the app—it’s perfect for building cross-platform solutions. For the admin side, we went with the **Foundation Framework** to keep things stable and responsive.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2F2e38fb3e-b70b-4ead-a637-6f39c5477235.jpg?alt=media&token=4f09a988-e35b-47fd-986f-72491f98b039","id":"2e38fb3e-b70b-4ead-a637-6f39c5477235","width":1600,"height":1200,"filename":"1.jpg","type":"image/jpeg","caption":"Active floorplan live view","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2Fdfd6d36e-ee59-45cb-aacf-7268a676e481.jpg?alt=media&token=084039c2-2311-4bed-811c-aa0dfc3bb47e","id":"dfd6d36e-ee59-45cb-aacf-7268a676e481","width":1600,"height":1200,"filename":"2.jpg","type":"image/jpeg","caption":"Venue account settings","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2Fd3b9b10b-da97-4713-8e39-6cc3e033820f.jpg?alt=media&token=142c07ef-3b01-4760-b723-024d8dab7a5f","id":"d3b9b10b-da97-4713-8e39-6cc3e033820f","width":1600,"height":1200,"filename":"3.jpg","type":"image/jpeg","caption":"Staff members managment","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2Fed541c00-2738-4fb5-82e5-3ded33dc2ee9.jpg?alt=media&token=05695142-4476-4656-abe1-cd93021fb6a0","id":"ed541c00-2738-4fb5-82e5-3ded33dc2ee9","width":1600,"height":1200,"filename":"4.jpg","type":"image/jpeg","caption":"Edit staff memeber modal","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2F710558a5-3cfa-4cb1-990b-e3884c78cc31.jpg?alt=media&token=4ff74eb5-fb9c-4476-9d53-8e5c17edf675","id":"710558a5-3cfa-4cb1-990b-e3884c78cc31","width":1600,"height":1200,"filename":"5.jpg","type":"image/jpeg","caption":"Visitors managment","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2F90c4adf6-dd8b-44dd-a472-f9d5e97c46cf.jpg?alt=media&token=962ff328-c72b-423a-ab6a-d801c62fd503","id":"90c4adf6-dd8b-44dd-a472-f9d5e97c46cf","width":1600,"height":1200,"filename":"6.jpg","type":"image/jpeg","caption":"Edit visitor type modal","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2F91282e49-4502-45b7-ae35-1a17d0f0ca49.jpg?alt=media&token=0d7378df-2f29-4062-95cc-176a4c02a8fe","id":"91282e49-4502-45b7-ae35-1a17d0f0ca49","width":1600,"height":1200,"filename":"7.jpg","type":"image/jpeg","caption":"Venue description and opening times","border":false}]}
```

---

### Testing the Prototype

Using **Sketch** and **InVision**, I created clickable prototypes. We handed them to stakeholders to play around with on their devices. The feedback was super helpful for refining the design and fixing any hiccups.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2Fd33cc6a8-d015-480c-9ec9-cc95dc0eae67.mov?alt=media&token=7e772441-a25b-43dc-b8c2-6303c404d93e","id":"d33cc6a8-d015-480c-9ec9-cc95dc0eae67","width":2230,"height":1458,"filename":"Demo_prototype.mov","type":"video/quicktime","caption":"Initial wireframed prototype","border":false}]}
```

---

## 4. Test: Making Sure It Works for Real People

User testing was key to making inFi something people would actually want to use. Here’s how we approached it:

### Usability Testing

We brought in people to test the app in realistic scenarios, like navigating an airport or exploring a museum. Here’s what we learned:

* Navigation was mostly intuitive, but first-time users needed clearer onboarding.

* The **mutual visibility switch** was a hit—it made people feel in control and safe.

* Fun touches like the proximity compass made the app feel more engaging.

### A/B Testing

We also tested different versions of key features, like how to guide users to Points of Interest (POIs). The results? Minimalist cues and helpful text worked best, boosting success rates by 23%.

### Iterating on Feedback

We took everything we learned and made changes. For example:

* Adjusting font sizes to make them readable in dimly lit venues.

* Adding tooltips to make admin features easier to learn.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2F8c68d68c-fc59-4af7-a907-7b402c7c2b37.png?alt=media&token=9cb1c3aa-d911-4cde-9587-cc2cba925ab0","id":"8c68d68c-fc59-4af7-a907-7b402c7c2b37","width":1506,"height":261,"filename":"Frame 1.png","type":"image/png","caption":"","border":false}]}
```

---

## 5. Design: Making it Beautiful and Easy to Use

inFi was a tricky balance—it had to be both a navigation tool and a social app.

### Gamifying the Experience

We added playful touches to make it fun, like:

* Proximity compasses for nearby users.

* Navigation elements inspired by dating apps (yes, swiping works for more than just matchmaking!).

### Keeping It Simple

I followed Steve Krug’s golden rule: *“Don’t make me think.”* Everything—from colors to button placement—was designed to feel intuitive. If you didn’t have to stop and think, I knew I did my job right.

### Polishing the Details

We took inspiration from FPS games to offer users familiar views, like:

* First-person perspectives.

* Bird’s-eye layouts.

This mix of familiarity and innovation made the app feel just right.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2F8afac469-288e-471e-bbff-110a05077ec0.png?alt=media&token=361e392d-1fb4-4d9c-8653-e7e9728f4096","id":"8afac469-288e-471e-bbff-110a05077ec0","width":686,"height":1398,"filename":"1.png","type":"image/png","caption":"Splash screen","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2Fe073f3ee-035a-471d-b06f-d97364012f1a.png?alt=media&token=9e3dae60-e67d-4a7e-acde-4886f6e39e16","id":"e073f3ee-035a-471d-b06f-d97364012f1a","width":686,"height":1397,"filename":"3.png","type":"image/png","caption":"Walkthrough","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2F6e7737f3-ed8e-464f-a084-0d16f9ce0aa3.png?alt=media&token=e10796c3-4305-4e5e-883a-bde36c65f25d","id":"6e7737f3-ed8e-464f-a084-0d16f9ce0aa3","width":686,"height":1398,"filename":"2.png","type":"image/png","caption":"Active floor live","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2F84e5655f-2def-4a0f-be91-70742c62fa77.png?alt=media&token=3a24d49b-a693-4f84-bba9-8b9729dbd96b","id":"84e5655f-2def-4a0f-be91-70742c62fa77","width":686,"height":1397,"filename":"4.png","type":"image/png","caption":"Social locator","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2F17ea0c74-010f-4e96-a1e4-15a4778165c0.png?alt=media&token=d6f4d6cf-25a2-4670-8647-b761180bac7a","id":"17ea0c74-010f-4e96-a1e4-15a4778165c0","width":686,"height":1397,"filename":"5.png","type":"image/png","caption":"Social filter","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2F82961700-38b4-40e1-bd43-d0a98a886e9e.png?alt=media&token=8cedac0d-d1ea-4d89-bd4a-e00b06f2cb29","id":"82961700-38b4-40e1-bd43-d0a98a886e9e","width":686,"height":1398,"filename":"6.png","type":"image/png","caption":"Venue infolayer","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2Fb6eb538a-ec8b-43dd-96cc-18ac560d364d.png?alt=media&token=9848f773-f491-4a6d-8cb2-2ff62bf9c930","id":"b6eb538a-ec8b-43dd-96cc-18ac560d364d","width":686,"height":1398,"filename":"8.png","type":"image/png","caption":"Messages","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2Fcb057886-7952-487d-a5b4-8cdc5ad0fdcd.png?alt=media&token=5656572a-4674-46b9-b961-cd5d3d75fb2c","id":"cb057886-7952-487d-a5b4-8cdc5ad0fdcd","width":686,"height":1398,"filename":"9.png","type":"image/png","caption":"Notifications","border":false}]}
```

---

## 6. Implement: Helping Developers Get It Right

### Building a Style Guide

To keep everyone on the same page, I documented:

* Components and their states.

* Typography and color hierarchies.

This worked great for our team, but when the client wanted to scale inFi globally, we needed something even more robust.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2Fc8e6f11c-9580-47db-85e0-8a64a2908e65.jpg?alt=media&token=2dfed238-dfb1-4c89-a1a3-27282d3816a1","id":"c8e6f11c-9580-47db-85e0-8a64a2908e65","width":1440,"height":3039,"filename":"0_Infi_App_Styleguides.jpg","type":"image/jpeg","caption":"","border":false}]}
```

---

### Introducing Interactive Guidelines

Thanks to an open-source plugin, I created an **HTML-based style guide**. Developers could see every detail—sizes, colors, interactions—all in one place. It saved tons of time and reduced mistakes.

```cv
youtube
{"url":"https://www.youtube.com/watch?v=syVLyahbOZ4","width":200,"height":150,"thumbnail":"https://i.ytimg.com/vi/syVLyahbOZ4/hqdefault.jpg"}
```

---

## Final Thoughts

The journey to build inFi wasn’t just about creating a navigation app—it was about designing something that connects people and makes exploring fun.

By focusing on user needs, testing our ideas, and collaborating closely, we turned a futuristic vision into something practical and user-friendly.

Check out the interactive prototype and final designs to see how inFi brings people together in new and exciting ways!

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Finfi%2F5417e0b1-6346-43c6-8552-6e28c3211404.mov?alt=media&token=0e025b91-25a8-4d3d-8552-f00e449eae03","id":"5417e0b1-6346-43c6-8552-6e28c3211404","width":2230,"height":1458,"filename":"infi_demo_designed.mov","type":"video/quicktime","caption":"","border":false}]}
```

inFi - Indoor Navigation App

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2FuUYmyogvunOAnDfxXLro%2Fa80727ec-275d-419b-97e5-d21c17187d07.png?alt=media&token=0573a35e-642c-4fe0-b5c6-2823eb152693","id":"a80727ec-275d-419b-97e5-d21c17187d07","width":2000,"height":1320,"filename":"Image_BE_0603-ACE_X32_Right_XL.png","type":"image/png","caption":"X32 Behringer Digital Mixing Console","border":false}]}
```

---

### As part of my work as a UX/UI Designer, I had the opportunity to conceptualize a modern update to [Behringer’s X32 console](https://www.behringer.com/product.html?modelCode=0603-ACE). The focus was on integrating a touch screen interface to enhance accessibility and efficiency for users, while also delivering a sleek, visually refined interface that aligns with contemporary design standards.

---

## **Design Process and Key Highlights**

#### **Empathize and Define**

To ensure the redesign addressed real user needs, I conducted a deep dive into the workflows of audio engineers and musicians. This process revealed pain points in the existing interaction model, particularly around the precision and speed required for Equalizer (EQ) adjustments.

> Based on these insights, I defined a clear design goal:\
> *"Create an intuitive and efficient touch-based interface that improves user experience and simplifies parameter adjustments."*

---

#### **Ideation and Prototyping**

Starting with a hand-drawn wireframe, I explored the idea of a touch-enabled EQ graph that allows users to manipulate audio parameters directly. This led to the development of clear **signifiers**—visual indicators that guide users in interacting with controls like gain, frequency, and Q-factor.

To optimize usability, I designed two layout variations for the controls panel:

1. **Version A:** Placing parameter controls at the top of the screen for quick visibility.

2. **Version B:** Moving the controls to the bottom for a more ergonomic touch experience.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2FuUYmyogvunOAnDfxXLro%2Fa67e2f16-940d-4952-bcb0-59a64dcb26e8.jpg?alt=media&token=35bde0be-83ad-46dd-9576-80c329b3cfc5","id":"a67e2f16-940d-4952-bcb0-59a64dcb26e8","width":1101,"height":830,"filename":"Artboard-3_1101.jpg","type":"image/jpeg","caption":"","border":false}]}
```

---

#### **Testing and Iteration**

Through **A/B testing**, I evaluated both layouts, measuring their impact on user performance and satisfaction. These iterative cycles informed key refinements, ensuring the interface was not only functional but also delightful to use.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fx32%2F23bc9cdf-df29-407d-8914-7c91bb8b8919.jpg?alt=media&token=104a79e1-826b-4bcb-8d4c-cbefdd5e7f9e","id":"23bc9cdf-df29-407d-8914-7c91bb8b8919","width":1500,"height":918,"filename":"Artboard_1500.jpg","type":"image/jpeg","caption":"vA for A/B testing","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fx32%2Ff4fc2344-bd4d-4927-817b-6fa672012bd6.jpg?alt=media&token=693a39c2-ce52-4cb0-a826-39aaa8e31f1d","id":"f4fc2344-bd4d-4927-817b-6fa672012bd6","width":1500,"height":918,"filename":"Artboard2_1500.jpg","type":"image/jpeg","caption":"vB for A/B testing","border":false}]}
```

---

#### **High-Fidelity Prototype and Use Cases**

Using **MarvelApp**, I developed a high-fidelity prototype that illustrated key scenarios, such as:

* Dragging and adjusting EQ parameters in real-time.

* Resetting and saving custom presets.

* Seamless navigation across multiple audio channels.

These use cases were crucial for validating the design’s effectiveness and ensuring a seamless user experience across various workflows.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2FuUYmyogvunOAnDfxXLro%2Ff5fb455a-b4af-4b71-8ebb-43ba71f3f3a3.jpg?alt=media&token=f773feca-ba83-41be-875f-0c5b83e9332f","id":"f5fb455a-b4af-4b71-8ebb-43ba71f3f3a3","width":2048,"height":1256,"filename":"00 Copy 10@2x.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2FuUYmyogvunOAnDfxXLro%2F72487ec9-3ded-4226-8f83-7d04d6226714.png?alt=media&token=67be64b3-4016-4f70-995a-446992558072","id":"72487ec9-3ded-4226-8f83-7d04d6226714","width":1239,"height":1024,"filename":"Desktop - 1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2FuUYmyogvunOAnDfxXLro%2Feaf2577e-17ca-41ce-b463-88d0172c70a8.png?alt=media&token=a87a200c-aaf1-474b-b32c-9bb2b2d69e87","id":"eaf2577e-17ca-41ce-b463-88d0172c70a8","width":1239,"height":1024,"filename":"Desktop - 2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2FuUYmyogvunOAnDfxXLro%2Fc031f1c6-9757-436c-9b56-f252e3f0a4d4.png?alt=media&token=f9c8b162-8445-4f1c-a7ef-56521a4ca6a4","id":"c031f1c6-9757-436c-9b56-f252e3f0a4d4","width":1239,"height":1024,"filename":"Desktop - 4.png","type":"image/png","caption":"","border":false}]}
```

---

This project showcases my ability to combine user research, interaction design, and visual design to create innovative solutions for complex systems. I’d love to hear your thoughts—feel free to explore the prototypes and share your feedback!

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwMys4ZM3UAQWN0vilHO24bWIWn12%2Fx32%2Fb1283585-6c13-4a04-bc6e-b307aa5be100.mov?alt=media&token=6d201151-1f52-4f3d-9330-d6ddf2a49c92","id":"b1283585-6c13-4a04-bc6e-b307aa5be100","width":2046,"height":1254,"filename":"Registrazione schermo 2024-12-26 alle 12.42.17.mov","type":"video/quicktime","caption":"","border":false}]}
```