A place for fans to purchase lifestyle brand merchandise • *[MiraiMart](https://miraimart.xyz)*

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2F07tWoWAPQvjOsDvSSpab%2Fc252b719-65b4-4f80-8aee-03b4cf655e69.png?alt=media&token=1b67ff4c-5dd9-4848-8fab-5423be6312ce","id":"c252b719-65b4-4f80-8aee-03b4cf655e69","width":2400,"height":1600,"filename":"hero cover.png","type":"image/png","caption":"MiraiMart storefront mockup","border":false}]}
```

Product Designer

10 days • Responsive web design for Shopify integration

Freelance • UX • UI

---

## **Measurable customer satisfaction**

While launching a merchandise website benefits growth in brand awareness and loyalty, keeping its fans satisfied with the products is also an important consideration for MiraiMart. A well-designed, on-brand virtual storefront is key to delivering a good user experience throughout the merchandise shopping. Despite the minimalist looks, the combination of powerful visuals and clear product details is expected to help MiraiMart achieve

### 90% conversion rate

### < 5% product returns or exchanges

---

## **Tokyo-based lifestyle brand Studio Mirai**

Studio Mirai promotes innovations in the crossroads of NFT, game-fi and culture. Under the brand umbrella, MiraiMart is their virtual storefront for official Studio Mirai lifestyle streetwear merchandise, which is scheduled to launch in 2024.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2F07tWoWAPQvjOsDvSSpab%2F40089471-01dc-4bba-967c-a7364d21b241.png?alt=media&token=07e3a171-1043-4cd4-8140-105ab8b2095c","id":"40089471-01dc-4bba-967c-a7364d21b241","width":2688,"height":1729,"filename":"screens.png","type":"image/png","caption":"Studio Mirai's online presence","border":false}]}
```

---

## **MiraiMart, the merchandise storefront**

With the official launch approaching, Studio Mirai needs a website to allow the community to view and purchase the merchandise and the team to integrate with the Shopify platform.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2F07tWoWAPQvjOsDvSSpab%2Ff0c72f33-2752-47ba-813f-7459a966e3af.png?alt=media&token=0fbb1ec3-a4f1-44f3-b4fe-40cc2733dbbc","id":"f0c72f33-2752-47ba-813f-7459a966e3af","width":5888,"height":3909,"filename":"home catalog.png","type":"image/png","caption":"MiraiMart: lifestyle streetwear merchandise home and catalog page","border":false}]}
```

---

## **Ready for launch**

With a clean layout and intuitive navigation, users can easily find the perfect item. High-quality product photos paired with detailed descriptions and size charts address concerns about fit and prevent abandoned purchases.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2F07tWoWAPQvjOsDvSSpab%2Fbc3efd54-f165-41cb-886c-4a7603651edc.png?alt=media&token=04349f74-df68-4694-9de8-5fe201ed4278","id":"bc3efd54-f165-41cb-886c-4a7603651edc","width":5693,"height":3788,"filename":"product.png","type":"image/png","caption":"Merchandise catalog of your new favorite streetwear","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2F07tWoWAPQvjOsDvSSpab%2Fa541663e-b293-4553-886f-964b52811432.png?alt=media&token=d6732373-7db4-4b2a-ae05-01f3d8c55437","id":"a541663e-b293-4553-886f-964b52811432","width":5692,"height":3788,"filename":"ui.png","type":"image/png","caption":"Confirmation opportunities to double check your add-to-basket action, size, and purchase before you checkout","border":false}]}
```

---

## **Future collections**

As MiraiMart prepares for launch, I'm eager to potentially continue collaborating with the Studio Mirai team to optimize the user experience and drive customer satisfaction. Recognizing the brand's potential in the NFT community, I believe MiraiMart can cater to a growing fanbase and evolve into a truly robust merchandise store. Features like a curated style lookbook and personalized shopper accounts with rewards programs and purchase tracking are just a glimpse into the exciting possibilities ahead.

Responsive streetwear storefront for Shopify integration • MiraiMart

A cross-platform productivity tool to organize life, write things down, and remember more • *[Twos](https://twosapp.com/home)*

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FCOKGFbNjlIiBz8JeaEsc%2F6acb5fb9-0f76-4906-b655-873c5f5c31ec.png?alt=media&token=32518459-5b22-484d-abe4-6d9932dce0bc","id":"6acb5fb9-0f76-4906-b655-873c5f5c31ec","width":2400,"height":1600,"filename":"hero mock 6.png","type":"image/png","caption":"Twos MacOS app mockup","border":false}]}
```

Product Designer • Collaborated with Founder-Developer

6 weeks • Feature add to existing web/desktop app

Freelance • UX • Product Strategy

---

## **Boosting productivity and market edge with split view**

Split view feature is expected to significantly improve experience by allowing users to seamlessly view and edit information in two separate panes, boosting efficiency. This isn't just a cool feature, it positions Twos as a strong contender in the ever-growing PKM and productivity space, while sticking to its pledge to remain free forever.

In the first 3 months of shipping the split view, Twos experienced

### ⬆ 30% DAU   •   ⬆ 40% WAU   •   ⬆ 20% MAU

---

## **Split view feature release video**

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

---

## **First reactions from Twosers:**

> "Wowzer! This is terrific...already lovin' it"
>
> "This is another game-changing update…"
>
> "One of the best new features released recently"
>
> "I use it every day. It's easy to understand and navigate"

*Twosers' initial feedback to split view from [feature release video](https://www.youtube.com/watch?v=2ChHFa64reI), Twos' World, and Discord community*

---

## **Addressing Twosers needs for better organization on desktop**

Twos App, launched in 2015, leverages the singularity of things, individual pieces of information, to empower users to capture information easily and share it privately or publicly. While Twosers, the app's users, enjoy capturing things on the go with the mobile app, the current single-list view in the web and desktop app hinders efficient organization. This research identified the need for better organization features to meet Twosers needs for deep work and managing their captured information.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FCOKGFbNjlIiBz8JeaEsc%2F428627d2-e795-4302-9c7f-111da19a9aab.png?alt=media&token=e06d63a8-4147-4c97-b959-5154c90b4f24","id":"428627d2-e795-4302-9c7f-111da19a9aab","width":10000,"height":5800,"filename":"split.png","type":"image/png","caption":"Split view with Today and \"mammoth trip\" list","border":false}]}
```

---

## **Evolve beyond capture to prioritize efficient organization features**

Twos has thrived on primarily building around capture, especially on mobile. However, to truly empower users and unlock the potential of their knowledge, efficient organization features are crucial. Capturing ideas is just the first step. Twos must evolve to become a great tool for not just capture, but also organization.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FCOKGFbNjlIiBz8JeaEsc%2F1b285359-7049-4285-8b34-f7d270685185.png?alt=media&token=6f8d65f9-31fb-4068-8438-1921a5f10672","id":"1b285359-7049-4285-8b34-f7d270685185","width":6375,"height":4460,"filename":"mobile capture.png","type":"image/png","caption":"Key iOS mobile app screens: Today and Lists","border":false}]}
```

---

## **User-centric collaboration to design a multi-content view to break the single-list barrier**

Single-list view limits the experience. While exploring multi-content options in other tools, I realized a problem: the reliance on parent-child relationships. Twos prioritizes the "singularity of things," meaning information functions independently, sometimes irrelevant from others. This requires search capability for the split pane.

Close collaboration with the founder-developer streamlined decision-making, allowing us to prioritize user needs while navigating technical limitations. Through research analysis and exploration with mid-fidelity wireframes, we identified a pragmatic solution: a split view feature for dual-content view. This design directly addresses user requirements and paves the way for a smoother workflow.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FCOKGFbNjlIiBz8JeaEsc%2Fbccbb5a3-31d0-448f-80e6-19eb2e5eaea7.png?alt=media&token=7e6ab126-545c-49b4-8e92-6b3a4c4ae344","id":"bccbb5a3-31d0-448f-80e6-19eb2e5eaea7","width":4680,"height":3440,"filename":"split action.png","type":"image/png","caption":"To align with Two's minimal UI, we chose the right-most FAB option with an appear-on-hover card peek","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FCOKGFbNjlIiBz8JeaEsc%2F7ee8c4a2-c0c1-4d83-8eea-ee7ea7476372.png?alt=media&token=e9f5691d-23ba-46f3-bec1-1f32d3e00138","id":"7ee8c4a2-c0c1-4d83-8eea-ee7ea7476372","width":4640,"height":3440,"filename":"sidebar options.png","type":"image/png","caption":"Keeping the original sidebar navigation menu allows for faster build and zero disruption to Twosers' workflow","border":false}]}
```

---

## **Twosers embracing split view with soaring usability scores**

All Twosers who participated in an interactive prototype testing rated the split view feature a perfect 5/5 for ease of use, usefulness, and expected use frequency. While feedback included minor UI tweaks, Twosers call for clearer in-app guidance and user education on features.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FCOKGFbNjlIiBz8JeaEsc%2Fa15d798c-3ad5-49ca-9d14-1d8885c144cd.png?alt=media&token=ffcb8f41-8f13-4bb7-9fd9-6e77d7ed483d","id":"a15d798c-3ad5-49ca-9d14-1d8885c144cd","width":2760,"height":480,"filename":"header.png","type":"image/png","caption":"Top: list header before feedback • Bottom: list header after feedback with more distinctive quick action buttons for quick open and add split view","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FCOKGFbNjlIiBz8JeaEsc%2Ff7fd1457-1938-4ff0-823b-4e0a729b1984.png?alt=media&token=88027a8c-4645-4355-8990-736365174058","id":"f7fd1457-1938-4ff0-823b-4e0a729b1984","width":5080,"height":3040,"filename":"split modal.png","type":"image/png","caption":"Left: Split modal before feedback • Right: Split modal after feedback with clearer copy","border":false}]}
```

---

## **Twosin' with split view**

With the split view feature, Twosers are now able to work with two content panes side-by-side. Each pane offers independent navigation and search, maximizing screen space and minimizing context switching. Activate split view. Say goodbye to tab juggling and hello to enhanced information management.

#### **Opening split view by hovering to the right of central pane to access FAB**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FCOKGFbNjlIiBz8JeaEsc%2F6d7c83d0-f3f7-403e-8b97-67234c169250.png?alt=media&token=2b3b1d64-3414-4fb5-bfee-a4fb6d425b24","id":"6d7c83d0-f3f7-403e-8b97-67234c169250","width":10000,"height":5800,"filename":"before split.png","type":"image/png","caption":"Hover to the right the central pane for FAB to open split view","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FCOKGFbNjlIiBz8JeaEsc%2F38f52820-a4a2-4a8e-ba79-217301e1ec8f.png?alt=media&token=7b19c167-a0cd-42e1-b918-c613ecb3bb43","id":"38f52820-a4a2-4a8e-ba79-217301e1ec8f","width":10000,"height":5800,"filename":"splitting.png","type":"image/png","caption":"Split view modal, a variation of the current move modal, prompts Twosers to choose which list to view","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FCOKGFbNjlIiBz8JeaEsc%2Ff6c165eb-bd96-459e-9899-896545f97a14.png?alt=media&token=14d1d80c-4e10-4121-b190-949cd45b83a6","id":"f6c165eb-bd96-459e-9899-896545f97a14","width":10000,"height":5800,"filename":"split.png","type":"image/png","caption":"Split view with Today and \"mammoth trip\" list","border":false}]}
```

#### **Adjustable width for view panes**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FCOKGFbNjlIiBz8JeaEsc%2F17038131-1717-4c10-8058-be90ab578c88.png?alt=media&token=71566010-ac5d-4b18-8a1e-8ea60cf7e794","id":"17038131-1717-4c10-8058-be90ab578c88","width":11800,"height":7500,"filename":"adjust width.png","type":"image/png","caption":"Drag handle to adjust the split panes' width","border":false}]}
```

#### **Split directly from lists' quick action buttons**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FCOKGFbNjlIiBz8JeaEsc%2F3ba14031-d799-4bf9-a867-fce7462343dc.png?alt=media&token=6c532f8e-ee2b-4dea-8e2f-e493c17c2697","id":"3ba14031-d799-4bf9-a867-fce7462343dc","width":11800,"height":7500,"filename":"quick split.png","type":"image/png","caption":"Adding split view to the existing quick action buttons for lists and sublists for quick split","border":false}]}
```

---

## **Equipping Twosers with feature knowledge to maximize the app's value**

To ensure Twosers discover and understand Two's full potential, Twos team should prioritize improving update communication within the app as the next step. The more Twosers know, the more they'll use it, stick around and help Twos grow even bigger. Win-win!

Upgrading organization efficiency with split view • Twos

A local community-building cross-platform tool for neighbors with shared interest and purpose • *[Bailiwik](https://www.bailiwik.com/)*

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2F2d67389b-41c7-47a3-b0b4-25b4e4da0d18.png?alt=media&token=2c68a108-8b49-46bc-9811-ffda7f6b4de5","id":"2d67389b-41c7-47a3-b0b4-25b4e4da0d18","width":2401,"height":1601,"filename":"hero mock 6.png","type":"image/png","caption":"Bailiwik landing page mockup","border":false}]}
```

Product Designer • Collaborated with 1 PM & 1 Lead Engineer

6 weeks • Onboarding redesign for web app

Freelance • UX

---

## **Cultivating a stronger sense of community in the neighborhood**

While the project was not implemented due to external factors, the redesigned flow showed promise. The proposed onboarding experience for hosts is now more intuitive and engaging. Upon implementation, there is a potential to

### ⬆ 2x active communities

### ⬇ 150% churn

---

## **A community-building tool lacking community**

Bailiwik launched as a cross-platform tool in 2015 to help neighbors connect and build purpose-driven communities. The client, one of Bailiwik's co-founders, revealed a troubling situation: a high churn rate and numerous inactive communities and members, putting the platform's growth and future at risk.

Aiming to better understand the client's concern, I explored the platform and noticed a limited number of communities with consistent activity. While this is not quantifiable data, it aligns with the client's concerns about user engagement.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2F83c2960b-fe6f-40e9-be15-aab488b55619.png?alt=media&token=8896911f-b263-4aca-8afa-69e0f8ddf7ad","id":"83c2960b-fe6f-40e9-be15-aab488b55619","width":5120,"height":5120,"filename":"final screen 1.png","type":"image/png","caption":"Final design of key screens for host onboarding","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2F09cdea36-5171-4d0e-a544-75720fab8853.png?alt=media&token=33374640-e1f9-4fd3-9ac0-22ec51b1ddd3","id":"09cdea36-5171-4d0e-a544-75720fab8853","width":5120,"height":5120,"filename":"final screen 2.png","type":"image/png","caption":"Final design of optional prompt to create community event","border":false}]}
```

---

## **Data gaps and limited resources led to additional focused research effort**

A recent UX research with past members revealed that Bailiwik struggled to meet users' needs for connecting over shared interests and building meaningful relationships. To make matters worse, the platform experience was not very pleasant. The research, however, never addressed users’ motivation to use community-building tools.

To learn about the why’s and how’s, I studied the competitors and conducted a quick poll with potential users, which uncovered the users’ desire for a more personalized experience based on interests and proximity.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2F8d6a37b9-5f97-411a-a87b-de6ea7f6c39d.png?alt=media&token=22e1c030-0e9e-4b77-a1a7-dc71f2afc4c7","id":"8d6a37b9-5f97-411a-a87b-de6ea7f6c39d","width":2551,"height":2947,"filename":"affinity.png","type":"image/png","caption":"Quick poll sticky notes affinity map ","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2F6f58b8fb-4c41-4218-bde9-8b438ffb13c0.png?alt=media&token=4060c04e-f846-4105-8fc2-12e1fd9da180","id":"6f58b8fb-4c41-4218-bde9-8b438ffb13c0","width":3261,"height":2112,"filename":"heylo.png","type":"image/png","caption":"Heylo main onboarding screens on iOS","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2Ff2dbcc0a-cbfb-4ea4-ac53-d0f747c216d1.png?alt=media&token=f087352a-81c3-4d3b-ad37-b139a327ce1d","id":"f2dbcc0a-cbfb-4ea4-ac53-d0f747c216d1","width":3256,"height":2112,"filename":"nextdoor.png","type":"image/png","caption":"Nextdoor main onboarding screens on iOS","border":false}]}
```

---

## **A more intentional onboarding flow for a more personalized experience**

Based on the research, there are 2 major user groups on Bailiwik, the community members and the hosts. Members want to connect over shared-interests like hobbies, while hosts over shared-purpose like raising awareness for a cause. For Bailiwik’s founder, purpose is powerful in bringing people together to build meaningful communities. However, these incentives are currently missing.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2Fd63b10c6-1f87-4e48-923e-f3620d4e6a87.png?alt=media&token=398b90ce-d4f2-4305-83db-26887a49ca34","id":"d63b10c6-1f87-4e48-923e-f3620d4e6a87","width":5509,"height":1515,"filename":"host.png","type":"image/png","caption":"Simplified host user flow (happy path) from signing up to creating own group","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2Fde92c70f-71c5-48d9-817a-1fdcddf127aa.png?alt=media&token=7b308f4f-8b4f-45c8-ad0f-4e930b7976c2","id":"de92c70f-71c5-48d9-817a-1fdcddf127aa","width":5433,"height":1763,"filename":"member.png","type":"image/png","caption":"Simplified member user flow (happy path) from signing up to joining groups","border":false}]}
```

---

## **Boosting host onboarding for maximum impact with limited resources**

Sharing early and often for stakeholder feedback has always been part of my design process. Faced with the scarcity of time and resources, the client wanted to maximize the project impact while scaling down effort. Believing that hosts as a key to strong communities, the client suggested to aim our attention to improving the web-to-app onboarding experience only for hosts.

While all user groups are equally important, focusing on hosts offered several strategic advantages. Optimizing their experience could potentially trigger a positive ripple effect, attracting more members and building stronger communities. Additionally, given the resource constraints, it allowed us to deliver a high-impact solution within the project scope. With that, the team and I agreed to move forward with host onboarding. Aligned with the client's vision of “If you build it, they will come” mentality, I dove into analyzing the existing flow.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2Fdcad10b7-a9d9-4cd4-8ced-39caaf4d84e4.png?alt=media&token=305dff69-9f94-4b61-8e77-95581075633e","id":"dcad10b7-a9d9-4cd4-8ced-39caaf4d84e4","width":9780,"height":3568,"filename":"midfi.png","type":"image/png","caption":"Key mid-fidelity screens from member and host onboarding flows that never made to final designs","border":false}]}
```

---

## **Reducing frustration with a clear onboarding flow**

Currently, the lengthy web-to-app transition has over 12 screens and unclear instructions. This could negatively impact user engagement and churn.

I streamlined the flow to 6 clear steps, including a prominent "Create a Community" call to action on the landing page. Additionally, as a “one more thing”, I incorporated 2 optional screens to encourage early community building to emphasize the platform’s value to its users.

#### **Sign up in 2 steps, create a Bailiwik in 3**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2F659fc667-dd73-4478-9e30-5e7c5c447c57.png?alt=media&token=4c5d7896-38e5-452c-9d18-ffc9ebb8f226","id":"659fc667-dd73-4478-9e30-5e7c5c447c57","width":3456,"height":3638,"filename":"sign up.png","type":"image/png","caption":"Sign up","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2F0ce5e82d-f1cb-4627-81c5-633d23ff88ae.png?alt=media&token=d0723cdb-a9ee-4bf3-80f9-3181172533fd","id":"0ce5e82d-f1cb-4627-81c5-633d23ff88ae","width":3456,"height":3638,"filename":"create.png","type":"image/png","caption":"Create account","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2F28415e13-8997-4341-8f5d-76e4112ea8e9.png?alt=media&token=6c47e637-b4a0-48a4-b905-e254c29b8bdc","id":"28415e13-8997-4341-8f5d-76e4112ea8e9","width":3456,"height":3638,"filename":"bw.png","type":"image/png","caption":"Enter Bailiwik details","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2Ff35cb54b-21ef-4b48-a367-8e7bdac91e11.png?alt=media&token=013ab585-8c17-4c68-8344-5b46794a5b96","id":"f35cb54b-21ef-4b48-a367-8e7bdac91e11","width":3456,"height":3638,"filename":"location.png","type":"image/png","caption":"Set location","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2F807e37f2-3f21-4ecb-b157-887251eab7bc.png?alt=media&token=af063be2-ec80-4f1a-9d9e-51d0f7f8417e","id":"807e37f2-3f21-4ecb-b157-887251eab7bc","width":3456,"height":3638,"filename":"color.png","type":"image/png","caption":"Customize Bailiwik colors","border":false}]}
```

#### **One more thing: Connect and celebrate**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2F28b1f67b-6ef6-47c6-b3d8-d3b9fa38dd78.png?alt=media&token=fb591361-050d-45ec-b861-d031675d22b1","id":"28b1f67b-6ef6-47c6-b3d8-d3b9fa38dd78","width":3456,"height":3638,"filename":"invite.png","type":"image/png","caption":"Optional prompt to invite members in creation flow","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FFtSRmaAFiAlGyiJmhHnU%2F220944ca-89d4-4f97-a03d-b7c384af9ec0.png?alt=media&token=82fddcf9-eb43-4a18-9e68-562c7bf38bce","id":"220944ca-89d4-4f97-a03d-b7c384af9ec0","width":3456,"height":3638,"filename":"event.png","type":"image/png","caption":"Optional prompt to create first community event in creation flow","border":false}]}
```

---

## **Lesson: Proactively explore diverse angles for well-rounded insight**

Every project is a growth opportunity. What I learned is to not be afraid to dive deeper on client’s perspective by asking more thought-provoking questions to help them realize the real top priority. The sooner the utmost must-do is figured out, the more efficient the project work can be.

When resources become available again, I would redesign the member's “Join a Community” flow and finally add the “Interests” feature for members and hosts to enhance community recommendations based on member’s interests.

Reducing churn with simplified host onboarding • Bailiwik

A recipe AI that saves money and time for health, eco-friendly individuals • Chefie

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FkgzgFWbFGJNnarHPG3hN%2Ff1b645a5-0010-4a73-8be3-af392545ea7d.png?alt=media&token=7bf5173d-5cf6-427f-a241-62749568624f","id":"f1b645a5-0010-4a73-8be3-af392545ea7d","width":2400,"height":1600,"filename":"hero cover.png","type":"image/png","caption":"Chefie iOS mockup: home screen","border":false}]}
```

Product Designer

3 weeks • End-to-end iOS app design

Concept • UX • UI

---

## Less food waste, more yumminess

By recommending recipes based on available ingredients, Chefie reduces food waste, leading to fresher meals, a positive impact on the environment, and less money spent on groceries. Additionally, the easy-to-use image recognition saves users time on recipe selection. Chefie is targeted to

### ⬇ 80% food waste at household level

### ⬇ 80% time to select ingredients

---

## **30% of food wasted annually**

Food is inevitably a major part of our lives. For those who are fortunate, they eat a wide variety of foods, multiple times a day. However, for those unfortunate individuals, food can sometimes be a luxury. There are millions and millions of people suffering from hunger and undernourishment every year. Food waste is not just an environmental issue, it is a societal problem.

---

## **HMW make it easier for young adults to cook more sustainably and smoothly?**

For young adults like myself, who are often navigating newfound independence and budget constraints, minimizing food waste becomes a personal challenge too. We strive for healthy, cost-effective home cooking, but good intentions often clash with reality.

Through interviews with young adults, I discovered a common theme, inconsistent cooking skills and poor planning resulted in frequent food waste and feeling guilty. 6 out of 6 participants reported throwing away ingredients at least once a week due to impulsive purchases, bulk buying, and forgetfulness, and sometimes, just the spontaneity of life.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FkgzgFWbFGJNnarHPG3hN%2Fc8b469e3-768c-4534-b36e-ee6e08a6e285.png?alt=media&token=4f148561-4540-4bf3-8621-cd9bd8f5f6e6","id":"c8b469e3-768c-4534-b36e-ee6e08a6e285","width":2616,"height":3835,"filename":"mockpair 1.png","type":"image/png","caption":"Final design of key screens: onboarding","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FkgzgFWbFGJNnarHPG3hN%2F810167e9-2eff-4dc8-9643-4f624e8d6e40.png?alt=media&token=de79bab9-c47e-4a43-8b75-4a45f0028a9b","id":"810167e9-2eff-4dc8-9643-4f624e8d6e40","width":2616,"height":3835,"filename":"mockpair 2.png","type":"image/png","caption":"Image recognition","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FkgzgFWbFGJNnarHPG3hN%2Faa727603-8359-426c-868f-195a99e755e1.png?alt=media&token=a97bdef8-9f7a-44d2-8064-8f9b7bd8b9ea","id":"aa727603-8359-426c-868f-195a99e755e1","width":2617,"height":3835,"filename":"mockpair 3.png","type":"image/png","caption":"Receipe selection","border":false}]}
```

---

## **Differentiating tool with personalization and image recognition as USP**

Tools with recipe finders, meal planners, and pantry trackers are everywhere. However, young adults need a flexible tool that adapts to the ingredients they already have at home. No more strict meal prep or unnecessary grocery trips. What if they can simply take photos of the ingredients with their phone and instantly get recipe recommendations?

By introducing personalization and image recognition to a recipe tool, users save time and effort getting tailor-made recommendations that fit their taste buds while also using every last bits of their available ingredients, ultimately, reducing food waste. This combination not only makes cooking more sustainable but also more enjoyable and convenient.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FkgzgFWbFGJNnarHPG3hN%2F510554bf-74d6-41b7-9e84-18335c87102d.png?alt=media&token=8f82ed83-30bb-4cd1-933f-37ebbbc6ff51","id":"510554bf-74d6-41b7-9e84-18335c87102d","width":6784,"height":3632,"filename":"midfi.png","type":"image/png","caption":"Selected midfi wireframes of key screens","border":false}]}
```

---

## **Back-of-house look at the branding and component library**

Chefie's design language reflects the guiding principles of fun and excitement for a mobile app, and green for a sustainability solution. The app boasts a bright, playful color palette with cheerful illustrations throughout. This creates an inviting and engaging experience for young adults, making sustainable cooking feel less like a chore.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FkgzgFWbFGJNnarHPG3hN%2F68e35744-959e-4ecb-9a36-b03396af6a3e.png?alt=media&token=d1a37c0e-f7b9-4336-b24c-ac2f78c86e6e","id":"68e35744-959e-4ecb-9a36-b03396af6a3e","width":6614,"height":3035,"filename":"branding.png","type":"image/png","caption":"Selected brand assets: logo, typography, colors, icons, and components","border":false}]}
```

---

## **Positive concept validation with potential users**

During usability testing with young adults, Chefie made a strong first impression. Users found it fun and easy to use, particularly appreciating its intuitive interface and image recognition technology. They recognized the tool's value in helping them reduce food waste and discover new recipe ideas. However, some suggested adding onboarding tips for first-time users and enhancing the interaction of specific components for a more engaging experience. These feedback were incorporated into the next iteration.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FkgzgFWbFGJNnarHPG3hN%2F49f42ed8-4059-44d7-985d-0a7f29c5ede1.png?alt=media&token=34fcdb73-f579-4d50-afa1-c0e16bd4008d","id":"49f42ed8-4059-44d7-985d-0a7f29c5ede1","width":5128,"height":3632,"filename":"tweaks.png","type":"image/png","caption":"Visuals enhancing tweaks based on feedback from user testing","border":false}]}
```

---

## **Snap. Cook. Enjoy.**

Chefie is an AI-powered tool that scans users’ fridge and pantry, suggesting suitable dishes based on their exact ingredients. No more wasted groceries or endless recipe searches. With each use, Chefie learns the users’ preferences, recommending dishes they will enjoy.

#### **Onboarding with personalizing by creating a Chefie profile**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FkgzgFWbFGJNnarHPG3hN%2Fed223a49-21d7-4530-9ff6-c54a2c2e76b0.png?alt=media&token=e8c393df-e91c-4215-83a5-d407f25b92ca","id":"ed223a49-21d7-4530-9ff6-c54a2c2e76b0","width":3473,"height":3632,"filename":"onboarding 1.png","type":"image/png","caption":"User select skill level","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FkgzgFWbFGJNnarHPG3hN%2F44167c1e-a8a6-4c79-83b9-6490c4bc94cb.png?alt=media&token=464762eb-34eb-4b75-b1c3-fbd5272baeeb","id":"44167c1e-a8a6-4c79-83b9-6490c4bc94cb","width":3472,"height":3632,"filename":"onboarding 1a.png","type":"image/png","caption":"And preferences in onboarding flow for a personalized Chefie experience","border":false}]}
```

#### **Eliminate the need to input pantry staples for every recipe search**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FkgzgFWbFGJNnarHPG3hN%2Ff9de0b76-afbb-4812-bd02-1cf98fa00615.png?alt=media&token=2fea0be2-1f1d-4f9a-9246-81e3d1cf02c9","id":"f9de0b76-afbb-4812-bd02-1cf98fa00615","width":3472,"height":3632,"filename":"onboarding 2.png","type":"image/png","caption":"Second half of onboarding prompts users to enter pantry staples","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FkgzgFWbFGJNnarHPG3hN%2F15df41e0-9499-4304-99c8-fae398ab66d0.png?alt=media&token=82c81dcd-4295-403f-86aa-c85acb9d98db","id":"15df41e0-9499-4304-99c8-fae398ab66d0","width":3472,"height":3632,"filename":"onboarding 2a.png","type":"image/png","caption":"App remembers the staple items until Chefie makes changes","border":false}]}
```

#### **Recipe results based on what is available and preferred**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FkgzgFWbFGJNnarHPG3hN%2F51b5adba-58b2-4915-9610-1b7ca93afe89.png?alt=media&token=523e746b-6bf1-4bef-8a22-8e53d1aaf4a0","id":"51b5adba-58b2-4915-9610-1b7ca93afe89","width":3472,"height":3632,"filename":"meal 1.png","type":"image/png","caption":"Recipe finder: Chefies find recipes based on the ingredients they entered","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FkgzgFWbFGJNnarHPG3hN%2F60b6efd2-f5cf-471b-b39a-2de0ef63a556.png?alt=media&token=e0e5b12f-7ba9-48e0-85f5-4eda458c4b2a","id":"60b6efd2-f5cf-471b-b39a-2de0ef63a556","width":3472,"height":3632,"filename":"meal 2.png","type":"image/png","caption":"Recommended recipes for Chefies to choose from","border":false}]}
```

---

## **Strategic value-add features on the product roadmap**

While the MVP focuses on the recipe finder, the product roadmap includes additional features to further improve the user experience. Considering the user feedback in the initial testing, I will likely explore and prioritize incorporating cooking demo videos and recipe ratings and reviews and introducing Mix, an online community for Chefies to connect, share recipes, and possibly cook together.

Personalizing sustainable cooking with image recognition • Chefie

An in-app community for fitness lovers • Gymshark Training

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FqcP4BZRtXtN4XR7ngvpr%2F7e64eb0c-9c03-435a-95b7-ace71a05e616.png?alt=media&token=d52872b6-ba54-4320-9d79-54cbf2413101","id":"7e64eb0c-9c03-435a-95b7-ace71a05e616","width":2400,"height":1600,"filename":"hero cover.png","type":"image/png","caption":"Gymshark Training iOS mockup","border":false}]}
```

Product Designer

3 weeks • Feature add to existing mobile app

Concept • UX • UI

---

## **A stronger, more solid community**

The ability to connect and build a support system within the app empowers users to cheer each other on, share victories, and overcome challenges together, supercharging motivation, both internal and external, to crush their fitness goals while enjoying the process. The new social features aim to

### ⬆ 80% DAU

### ⬆ 80% number of fitness buddies

### ⬆ 60% quicker to break PB's

---

## **Gymshark is a fitness apparel brand with a vision to unite the fitness community**

Since launched in 2012, England-based Gymshark thrived with their robust social media marketing with the help of influencers, athletes, and fitness icons, building up a massive following across all platforms. Building on top of their success, Gymshark released their own training app in August 2019 to offer an extensive library of workouts, workout tracking, training tips and fitness plans. As a brand who takes pride in community, surprisingly, the training app absolutely failed their fans. Where’s the community in the app?!

---

## **Connect, motivate, and compete**

To integrate social features without disrupting the existing focus on workouts, I designed the 'Community' menu, offering a 'Feed' for social interactions, a 'PBs' tab for motivation and progress tracking, and a 'Challenge' tab for friendly competitions, all while maintaining a clean and intuitive UI and experience.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FqcP4BZRtXtN4XR7ngvpr%2Fe71aa6b5-9855-4fac-b66c-08f906118577.png?alt=media&token=4a0a417c-d139-41b3-aa7b-97d8e916e14a","id":"e71aa6b5-9855-4fac-b66c-08f906118577","width":3558,"height":2368,"filename":"community full.png","type":"image/png","caption":"See detailed updates of your friends and challenges in the new community menu, or catch quick community highlights in the original Explore home menu","border":false}]}
```

---

## **Train together. Win together.**

“Fitness is a very social thing!” Build fitness circles with workout buddies.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FqcP4BZRtXtN4XR7ngvpr%2F19746cd9-7447-4531-8df6-bb9c4a0a4130.png?alt=media&token=fb39e0cc-21b3-4dd5-bdb5-20b573764d70","id":"19746cd9-7447-4531-8df6-bb9c4a0a4130","width":3558,"height":2368,"filename":"friends full.png","type":"image/png","caption":"Add friends via contacts, social media accounts, or the Gymshark QR code. Star those special buddies make them your top friends to see their updates first in your feed","border":false}]}
```

---

## **Battling it out with friends**

From what I heard in the user interviews, participating in fitness challenges with friends is immensely beneficial in both building a community and providing the extra push to run faster, climb higher, and bike further.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlE3nrBy8BScn5Dt9FvnV8Brp2VQ2%2FqcP4BZRtXtN4XR7ngvpr%2F09b29390-f1a2-41cd-93e1-8dcf3b8adfea.png?alt=media&token=5cf20617-9ee9-41b3-b235-7e89f03d98d4","id":"09b29390-f1a2-41cd-93e1-8dcf3b8adfea","width":3558,"height":2368,"filename":"challenge full.png","type":"image/png","caption":"Join a community challenge, create your own with customize sets, or do both! Don't foget to track everyone’s progress!","border":false}]}
```

---

## **Merging the gym with the app**

The next step in nurturing a community is to enable users to have more different interactions with others and with the app. I would like to explore features that expand user profiles, provide live streams of communities activities, and facilitate workout sessions scheduling among communities. I’m interested to collaborate with Gymshark to bring this concept work to life if the opportunity arises. After all, this is what community is about.

Building fitness community with social app features • Gymshark Training

2025 is the year! Let's go! Good vibes only!