**The Product**\
SMS Factory allows partners and resellers to white label a text messaging platform for their users.

**Project Duration**\
July 2021 - August 2021

**The Problem**\
With so many social media channels available, influencers don’t have a way to connect with followers all in one place.

**The Goal**\
Allow influencers to create a page that followers can use to opt-in and receive text messages from them.

**My Role**\
UX designer from conception to delivery.

**My Responsibilities**\
Create personas, user-journey mapping, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, iterating on designs, and developing design QA.

### **Understanding the user**

During my research in speaking with influencers, I empathized with the difficulties that they have reaching out to all their followers in various social media channels. It's an issue to bring followers from one social media platform to another, especially when followers are comfortable in a specific one. A fear is that these influencers will not be able to grow beyond their main social media channel being used. Influencers use services such as Linktree or create websites to put in their bios hoping to connect with their followers through other means. However, having a website or email list to update followers hasn't been successful enough for engagement.

**Persona: Problem Statement**

Erin is an influencer and podcast host who needs an affordable and easy way to reach out to her followers so they know exactly when new podcast episodes are released.

**Frustrations**

* Decreased follower engagement

* Is tough creating content for all social media platforms that is successful

* Not a clear understanding of why users unfollow

**Goals**

* Maintain podcast audience

* Grow podcast audience

* Communicate with followers in a single place

* Categorize the audience in a more granular way

### **User journey map**

Erin’s journey map revealed that adding an opt-in page feature would be ideal to help influencers bridge the gap between social media platform and text messaging.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7fBniACgelJ3ilph7eJJ%2F9053be16-d683-48e4-85c5-4fa85f322ad6.jpg?alt=media&token=d64ecd12-6980-4b58-ac75-b236740a9f9a","id":"9053be16-d683-48e4-85c5-4fa85f322ad6","width":912,"height":464,"filename":"Zight 2024-12-03 at 11.28.27 AM.jpg","type":"image/jpeg","caption":"","border":false}]}
```

**Ideation**

The drafts of each screen have specific elements with asterisks on the side signaling that they were used in the refined version shown on the right. The elements allow diminishing user pain points when creating an opt-in page

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7fBniACgelJ3ilph7eJJ%2F2471efa5-a678-4152-80b0-3561dd292802.png?alt=media&token=c3ff3bef-ade4-418a-a32b-efae8c0959b5","id":"2471efa5-a678-4152-80b0-3561dd292802","width":512,"height":488,"filename":"sms-wireframe-1 (1).png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7fBniACgelJ3ilph7eJJ%2Fdbd92d1a-6fc5-43e9-834f-af8763375170.png?alt=media&token=12478978-3fba-4e69-afa1-af61de133a4a","id":"dbd92d1a-6fc5-43e9-834f-af8763375170","width":512,"height":491,"filename":"sms-wireframe-2 (1).png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7fBniACgelJ3ilph7eJJ%2F4c6cdf2a-f422-46d9-a900-0f271e9e9e5e.png?alt=media&token=4a4787ba-05b8-4f1f-8090-e5cdae44f171","id":"4c6cdf2a-f422-46d9-a900-0f271e9e9e5e","width":487,"height":512,"filename":"sms-wireframe-3 (1).png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7fBniACgelJ3ilph7eJJ%2F90b5caff-ac3b-4f84-ad95-152a2617184a.png?alt=media&token=fea75eaf-dd09-4e87-94c2-97542198cbe1","id":"90b5caff-ac3b-4f84-ad95-152a2617184a","width":512,"height":511,"filename":"sms-wireframe-4 (1).png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7fBniACgelJ3ilph7eJJ%2Fbbac4636-41e8-4dc0-8e2a-0a9443773dc0.png?alt=media&token=8a6ed2f3-b14f-437e-8b9a-d2f1c8a66598","id":"bbac4636-41e8-4dc0-8e2a-0a9443773dc0","width":512,"height":474,"filename":"sms-wireframe-5 (1).png","type":"image/png","caption":"","border":false}]}
```

### **Starting the design**

**Digital wireframes**

Upon completing the ideation phase with paper wireframes, I moved on to crafting digital wireframes that center around enabling users to personalize their opt-in page.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7fBniACgelJ3ilph7eJJ%2Fa8fb0c65-c852-41db-b7bf-678610890f4f.png?alt=media&token=67136603-b495-4f2a-adf0-c176b563ee10","id":"a8fb0c65-c852-41db-b7bf-678610890f4f","width":512,"height":332,"filename":"sms-digital-1 (1).png","type":"image/png","caption":"","border":false}]}
```

This section focuses on adding the content of the page header, influencer image, CTA line, and additional fields.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7fBniACgelJ3ilph7eJJ%2F22422951-4a9b-4efc-bc18-0876a7de826d.png?alt=media&token=2fa175a0-7176-4067-86a1-80790dba1ec8","id":"22422951-4a9b-4efc-bc18-0876a7de826d","width":512,"height":332,"filename":"sms-digital-2 (1).png","type":"image/png","caption":"","border":false}]}
```

This section focuses on the option to add premade backgrounds or the ability to add your own.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7fBniACgelJ3ilph7eJJ%2Fafb6e0e0-64ee-431b-8c6d-238edb7be7fd.png?alt=media&token=eb026159-0fe9-4547-be76-697f44d911f9","id":"afb6e0e0-64ee-431b-8c6d-238edb7be7fd","width":512,"height":332,"filename":"sms-digital-3 (1).png","type":"image/png","caption":"","border":false}]}
```

This section shows a preview of the page customizations.

**Low-fidelity prototype**

The main purpose of my [low-fidelity prototype](https://www.figma.com/proto/5BGggJ2rW7JOhNrPTy2KfA/Opt-in-Page-Project?page-id=1%3A1473&node-id=1%3A1474&viewport=241%2C48%2C0.1&scaling=min-zoom&starting-point-node-id=1%3A1474) is to facilitate user-driven creation of their opt-in page by allowing them to customize its options.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7fBniACgelJ3ilph7eJJ%2Fe0f767a0-ab90-4224-ba6f-9ffeb792341a.png?alt=media&token=106bfaf7-fdea-4961-a504-4743ba81e776","id":"e0f767a0-ab90-4224-ba6f-9ffeb792341a","width":1426,"height":220,"filename":"sms-lo-fi-prototype.png","type":"image/png","caption":"","border":false}]}
```

### **Refining the design**

Based on stakeholder feedback, I made the following changes:

1. Removed additional CTA line

2. The pre-selected name and email field are now disabled by default

3. Added a delete icon for the uploaded image

4. Finalized the submission button as “Join my list.”

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7fBniACgelJ3ilph7eJJ%2Fa975d6c2-2f42-4ab2-9712-42e1a0bb673c.png?alt=media&token=8a7cd558-aa9f-4656-a7aa-65e1a9b0f91f","id":"a975d6c2-2f42-4ab2-9712-42e1a0bb673c","width":512,"height":332,"filename":"sms-final (1).png","type":"image/png","caption":"","border":false}]}
```

**High-fidelity prototype**

My [high-fidelity prototype](https://www.figma.com/proto/5BGggJ2rW7JOhNrPTy2KfA/Opt-in-Page-Project?page-id=3%3A3640&node-id=3%3A3643&viewport=241%2C48%2C0.11&scaling=min-zoom&starting-point-node-id=3%3A3643) iterates from stakeholder feedback.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7fBniACgelJ3ilph7eJJ%2F28fd123e-4944-414c-99d3-6d2f3ca2ce1f.png?alt=media&token=23de1ea9-bce1-4b46-b8af-f9eb1a2f0f1c","id":"28fd123e-4944-414c-99d3-6d2f3ca2ce1f","width":1362,"height":263,"filename":"sms-hi-fi-prototype.png","type":"image/png","caption":"","border":false}]}
```

### **Takeaways**

* **Sitemap:** The biggest challenge was to keep the page from scrolling as it would decrease the main action we wanted the follower to take, meaning fill out the form. This is why some options such as the submit button can’t be customized and there aren’t additional options for content. Yet, the user still can make the page their own. 

* **What I learned:** Defining which options were going to be customizable and which didn’t - without having the user realize - taught me the importance of how design can make things simple for users. Trusting that those design decisions would make the platform more efficient to use.

* **Teamwork:** It was a pleasure to work with our stakeholders in helping them bring this vision for their clients. They provided clear details which allowed me to go through the design thinking approach with ease and bring that to our development team. They were able to make this happen in a short time due to our team planning and organization.

### **Status**

The opt-in page, which was launched in August 2021, is catering not only to influencers but also to a diverse range of clients across various industries. This tool is utilized across different sectors, from doctor offices to real estate groups, to build a subscriber base. Its design highlights its adaptability and effectiveness in capturing the interest and engagement of audiences in diverse professional settings.

SMS Factory / Opt-in Page

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2Fdropxie-donation-drop-box-app%2F1f8d09e0-df22-4231-94e4-8ebddc567778.png?alt=media&token=e58f87f4-4ec5-4115-83b3-7dff8b6ce72d","id":"1f8d09e0-df22-4231-94e4-8ebddc567778","width":3746,"height":1696,"filename":"dropxie-header (1).png","type":"image/png","caption":"","border":false}]}
```

**The Product**\
Dropxie is an app and website focused on helping people find donation drop boxes for clothing near them.

**Project Duration**\
October 2021 - November 2021

**The Problem**\
Finding donation drop boxes near a location has become a hassle as there aren’t any easy-to-use apps or websites listing them.

**The Goal**\
Help visitors easily find donation drop boxes near them by offering an efficient user experience they can trust.

**My Role**\
UX designer of the Dropxie app and website from conception to delivery.

**My Responsibilities**\
Creating surveys, finding target users, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, building a design system, and iterating on designs.

### **Understanding the user**

During my research, users agreed that finding donation drop boxes could become a hassle when trying to donate their clothes. Even though many charity organizations have donation drop boxes near their locations, such as their parking lots, not all of them do. Users also said that an app would be useful, yet most of them would rather go to a website to find donation drop boxes.

**Persona 1: Problem Statement**

Lucia is a busy mom and school teacher who needs to donate clothes in a fast and easy way because she wants to help the needy while also using her schedule effectively.

Frustrations

* Can’t find donation drop boxes.

* Can’t waste time looking for donation drop boxes.

* Forgetting to have a bag when depositing clothes.

Goals

* Easy way to donate clothes.

* Use technology to find donation drop boxes.

* Make sure these drop boxes are from reliable charity organizations.

**Persona 2: Problem Statement**

Bruce is a print shop owner who needs to donate clothes near his store because he wants to help the needy while also running a business.

Goals

* Help those in need

* Find donation drop boxes fast

* Suggest where donation drop boxes are located

Frustrations

* Hates downloading apps for one purpose

* Has enough apps on his phone

* Driving around to find donation drop boxes

**Competitive Audit**

Our audit showed many missing opportunities from various competitors as well as improvements needed when it came to website navigation and organization.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2F328c9c1a-31a2-40e6-b13e-13438f124f5a.gif?alt=media&token=06f61119-e515-45b0-9a0f-f28c0df88152","id":"328c9c1a-31a2-40e6-b13e-13438f124f5a","width":798,"height":277,"filename":"dropxie-competitive-audit.gif","type":"image/gif","caption":"","border":false}]}
```

**Ideation**

I did a crazy 8’s exercise to come up with improvements based on the findings from the competitive audit. My focus was showing a donation drop box search field by location as soon as users visit the homepage.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2F1c2dd299-39c7-4adb-b639-ee36f8afec48.png?alt=media&token=d157426e-14ae-4fee-ac23-04221c4306bc","id":"1c2dd299-39c7-4adb-b639-ee36f8afec48","width":899,"height":688,"filename":"dropxie-ideation-crazy-eights.png","type":"image/png","caption":"","border":false}]}
```

### **Starting the design**

**Digital wireframes**

After ideating on paper wireframes, I created digital wireframes for the Dropxie app. These designs focus on helping users find a donation drop box as the main feature.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2F35caedda-bbd6-4efc-966f-ed1c10ee42b9.png?alt=media&token=43a43e9f-7464-491b-8674-1ed17c2c994e","id":"35caedda-bbd6-4efc-966f-ed1c10ee42b9","width":780,"height":1688,"filename":"dropxie-wireframe-1.png","type":"image/png","caption":"The section to look for donation drop boxes would be front and center.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2F91ab2759-7c47-4731-bb46-438b824c1ec6.png?alt=media&token=98cfdd1f-5118-4092-a8c0-755d90f17007","id":"91ab2759-7c47-4731-bb46-438b824c1ec6","width":780,"height":1688,"filename":"dropxie-wireframe-2.png","type":"image/png","caption":"Other features, such as the option to request a drop box, could be listed in this section.","border":false}]}
```

**Low-fidelity prototype**

My [low-fidelity prototype](https://www.figma.com/proto/N5aYMfOi3fzaQJni8N2ws6/Donation-Drop-Box?page-id=504%3A4191&node-id=504%3A4657&viewport=241%2C48%2C0.6&scaling=scale-down&starting-point-node-id=504%3A4657) focused on users searching for a donation drop box near them, selecting one, and leaving a review about their experience with the drop box chosen.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2F466804b1-523b-4d2d-b1f3-d8525c0df03d.png?alt=media&token=eefb1a7c-1680-4a50-9b4a-ec7cd603e184","id":"466804b1-523b-4d2d-b1f3-d8525c0df03d","width":928,"height":821,"filename":"dropxie-low-fidelity-prototype.png","type":"image/png","caption":"","border":false}]}
```

#### **Usability Study**

**Parameters**

Study type: Moderated

Participants: 5

Location: Remote

Length: 10 minutes

**Findings**

1. **Location:** Users were confused about the two options for submitting a location to find a donation drop box. Highlighting one option will make it easier for users to take action.

2. **Star-rated Reviews:** Having an option for users to leave a star rating for a donation drop box would make it more visual for other users to understand when reading these reviews.

3. **Review Anonymously:** Not all users want to share their name when leaving a review, thus having the option to submit one anonymously would be a good option.

### **Refining the design**

**Mockups**

Based on the insights from the usability study, I applied the design change to focus on having users enter their zip codes more prominently. The option to use the device’s location was kept but shown less prominent on the screen.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2F831f267b-d5ee-4fc2-9719-d4ea8fa8ffd9.png?alt=media&token=255a240e-0f4a-4f39-b4be-8832bd347465","id":"831f267b-d5ee-4fc2-9719-d4ea8fa8ffd9","width":436,"height":860,"filename":"dropxie-before-usability-study-1.png","type":"image/png","caption":"Before usability study","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2F6f1dc297-c671-45e6-832d-2901e793190a.png?alt=media&token=1984c434-9097-4521-a87a-2f5e6b19be00","id":"6f1dc297-c671-45e6-832d-2901e793190a","width":436,"height":860,"filename":"dropxie-after-usability-study-1.png","type":"image/png","caption":"After usability study","border":false}]}
```

Additional design changes were made in the review screen adding the option to submit a star rating and to add a review anonymously.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2Fff9ff134-e064-44b3-8713-4b0647267969.png?alt=media&token=2c6d647e-efb8-4b58-bded-511b8bdbc438","id":"ff9ff134-e064-44b3-8713-4b0647267969","width":436,"height":860,"filename":"dropxie-before-usability-study-2.png","type":"image/png","caption":"Before usability study","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2Fe438ff34-463b-4b17-985b-22958a16575d.png?alt=media&token=1628bafd-834c-4a33-a743-d416d93ccab5","id":"e438ff34-463b-4b17-985b-22958a16575d","width":436,"height":860,"filename":"dropxie-after-usability-study-2.png","type":"image/png","caption":"After usability study","border":false}]}
```

**Additional mockups**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2Fe5f85197-c8a3-4a5d-aefe-87751a659eac.png?alt=media&token=16a0a895-3478-4122-8297-9873a002c52d","id":"e5f85197-c8a3-4a5d-aefe-87751a659eac","width":436,"height":860,"filename":"dropxie-after-usability-study-3.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2Fafbad2df-48de-4699-be8e-baa02b507bb9.png?alt=media&token=8ecc7dab-0aef-432f-983b-4e7d022bb0ad","id":"afbad2df-48de-4699-be8e-baa02b507bb9","width":436,"height":860,"filename":"dropxie-after-usability-study-4.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2F4d026c78-b773-4316-ad03-f30913e1bfec.png?alt=media&token=119936d3-5d6d-479f-b329-d5a9a9c65c1d","id":"4d026c78-b773-4316-ad03-f30913e1bfec","width":436,"height":860,"filename":"dropxie-after-usability-study-5.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2F99966add-dbe8-4378-b344-8be3b79f76bf.png?alt=media&token=2519c56a-1d86-4d75-a32d-bbd9ddbe7e48","id":"99966add-dbe8-4378-b344-8be3b79f76bf","width":436,"height":860,"filename":"dropxie-after-usability-study-6.png","type":"image/png","caption":"","border":false}]}
```

**Design system**

A [design system](https://www.figma.com/file/N5aYMfOi3fzaQJni8N2ws6?embed_host=share&kind=file&node-id=207%3A2260&page-selector=0&viewer=1) was constructed to facilitate the creation of high-fidelity prototypes using different variants depending on the user interaction.

**High-fidelity prototype**

The [high-fidelity prototype](https://www.figma.com/proto/N5aYMfOi3fzaQJni8N2ws6/Donation-Drop-Box?page-id=243%3A3988&node-id=243%3A3989&viewport=241%2C48%2C0.59&scaling=scale-down&starting-point-node-id=243%3A3989) followed the same user flow as the low-fidelity prototype. It includes the changes gathered in the usability study.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2Ff1dade50-ef37-4c77-bda4-fe5c8246fd0c.png?alt=media&token=3dd57daf-d69a-4948-9c03-7da423271ea2","id":"f1dade50-ef37-4c77-bda4-fe5c8246fd0c","width":482,"height":871,"filename":"dropxie-high-fidelity-prototype.png","type":"image/png","caption":"","border":false}]}
```

**Accessibility considerations**

1. The contrast was checked in different elements to be readable.

2. I used headings with different-sized text and fonts for a clear visual hierarchy.

### **Responsive design**

**Sitemap**

With the designs of the app ready, I started working on the responsive website. The sitemap focuses on having a consistent user experience with the website and app.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2F98e8e370-b355-4420-aa3d-bbf0e0c185df.png?alt=media&token=52e2ffd8-1693-4c89-910e-94b4eeacf175","id":"98e8e370-b355-4420-aa3d-bbf0e0c185df","width":7067,"height":2168,"filename":"dropxie-sitemap.png","type":"image/png","caption":"","border":false}]}
```

**Designs**

I designed different screen variations for the website including mobile, tablet, and desktop. Each of them is modified to fit the users’ needs.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2F938676cc-e401-4a4e-a927-3e96ac0bbd21.png?alt=media&token=b7ba271a-29fe-4a07-8687-3a797f184bc3","id":"938676cc-e401-4a4e-a927-3e96ac0bbd21","width":780,"height":3526,"filename":"dropxie-mobile-website.png","type":"image/png","caption":"Mobile Website","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2Fe503679d-23b2-4ec6-a5de-3075b175dbb2.png?alt=media&token=84bd19ea-7af5-4aa4-8bf8-da90ca95df1e","id":"e503679d-23b2-4ec6-a5de-3075b175dbb2","width":2048,"height":3434,"filename":"dropxie-tablet.png","type":"image/png","caption":"Tablet","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2F105b1c66-f07e-46b3-8ad8-50bdeef31092.png?alt=media&token=0f135941-da4f-475a-a1d2-71026d9f5c09","id":"105b1c66-f07e-46b3-8ad8-50bdeef31092","width":2880,"height":3540,"filename":"dropxie-desktop-website.png","type":"image/png","caption":"Desktop","border":false}]}
```

**In Action**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2F7rL9jkz4vfn1Vxcw7dpa%2F13f2b567-1045-4cc6-b3a3-e3d6d68c483b.mp4?alt=media&token=a58acfa3-60d8-4499-bc93-162c6e529e26","id":"13f2b567-1045-4cc6-b3a3-e3d6d68c483b","width":458,"height":894,"filename":"Screen Recording 2021-12-20 at 02.20.48 PM.mp4","type":"video/mp4","caption":"","border":false}]}
```

### **Going forward**

Impact: The impact of my designs will increase clothing donations as users will have a smooth and efficient way to find donation drop boxes. These designs and features could change the donation process as it currently needs improvements.

**What I learned:** Through user research, I better understood what the product needs to be effective. A product like Dropxie would increase clothing donations throughout the country.

**Next steps**

1. Conduct additional usability studies to determine more areas of need - especially when requesting a donation drop box.

2. Compare the site features to other competitors and analyze areas of improvement.

3. Create additional versions with color variations and accessibility options.

Dropxie App & Website

* **The Product**\
  ClosedLoop is a healthcare platform that gives providers, payers, and value-based care organizations the ability to make accurate, explainable, and actionable predictions of individual-level health risks.

* **The Problem**\
  Machine learning models don't allow users to check if representative samples, such as race, are impacted by label bias.

* **The Goal**\
  Assess whether a machine learning model uses a representative sample, is impacted by label bias, or may result in the unfair distribution of resources. After reviewing each metric, you can indicate whether the model has been validated and is biased or unbiased.

* **My Role**\
  Product designer from conception to delivery.

* **My Responsibilities**\
  User-journey mapping, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, iterating on designs, and design QA.

### **Insights from User Testing**

**User Understanding**

Even though the platform has multiple tooltips to add less visual weight, users needed clear and helpful instructions on evaluating bias and fairness without tooltips.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FFY7aImtWH2k9xnoTDbGN%2Faebea084-1d35-4776-bf33-fc61e5853b4d.png?alt=media&token=5202229b-1996-4a24-9daa-90a164f5de98","id":"aebea084-1d35-4776-bf33-fc61e5853b4d","width":1445,"height":700,"filename":"bf-user-understanding.png","type":"image/png","caption":"","border":false}]}
```

**Visual Weight**

A collapsible “Settings” section was designed for users to expand or collapse. This helps users scroll less and balance the visual weight of the page.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2Fcl-bias-and-fairness%2F43dc103f-c4ea-40a0-b174-fddac0e351df.png?alt=media&token=a15e3439-bf4d-430d-8327-ff52d8818984","id":"43dc103f-c4ea-40a0-b174-fddac0e351df","width":1400,"height":730,"filename":"Frame 6308 (1).png","type":"image/png","caption":"","border":false}]}
```

**User Confidence**

Because users may interpret and understand the results of the bias and fairness validation differently, a section was added to allow users to confirm that they have personally reviewed their validation confidently.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2Fcl-bias-and-fairness%2Fc24eb459-ff51-4a48-b2a5-e8254d979413.png?alt=media&token=94d8c6fc-b3c1-420e-8c43-f4d5b7acec1d","id":"c24eb459-ff51-4a48-b2a5-e8254d979413","width":1400,"height":201,"filename":"Frame 6270 (1).png","type":"image/png","caption":"","border":false}]}
```

**Discoverability**

To help users easily view bias and fairness for a model, a column was prominently displayed within the machine learning models page.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2Fcl-bias-and-fairness%2Fb24c1b90-71db-4a7c-ac81-f033505acc1d.png?alt=media&token=c0725f7c-f89f-4e12-a695-eb0dba2a25ac","id":"b24c1b90-71db-4a7c-ac81-f033505acc1d","width":1255,"height":568,"filename":"Image 2023-06-09 at 4.01.47 PM (1).png","type":"image/png","caption":"","border":false}]}
```

### **Takeaways**

* **Challenges:** Incorporating visual aids, such as charts or graphs, to accompany the bias and fairness assessment results can enhance user comprehension. However, I also had to balance the amount of material displayed to educate the user. Combining these two aspects was the most difficult, however, at the end it was possible with feedback I received.

* **What I learned:** This was a balancing act due to the information regarding bias and fairness being so dense. I had to find ways for the right amount of copy to be displayed but not overwhelm the users. For example, by adding a section that users can expand or collapse when needed.

* **Teamwork:** It was a pleasure to work with project managers and engineers as well as our in-house data scientists. I couldn’t have done it without their diverse skill sets and multidisciplinary expertise in these complex topics.

### **Status**

Bias & Fairness was released at the end of 2022. Overall, the release has been a success. Users are learning about the feature and are actively leveraging it to improve the fairness of their machine-learning models. The insights and feedback gathered during this release phase will guide us in further refining the feature, enhancing its usability, and expanding its capabilities to meet the evolving needs of our users.

ClosedLoop / Bias & Fairness

**The Product**\
Lime Cellular offers a white-label text marketing platform to partners and resellers in different industries.

**Project Duration**\
November 2021 - March 2022

**The Problem**\
As the platform expands to serve financial clients, the reporting aspect has become cumbersome when wanting to understand campaign data.

**The Goal**\
Create a new dashboard specifically catered for financial clients that shows reporting data as front and center.

**My Role**\
UX designer from conception to delivery.

**My Responsibilities**\
Create personas, user-journey mapping, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, iterating on designs, and developing design QA.

### **Understanding the user**

Our financial users are quite different from the rest of our clients. They are more data-centric and send double and even triple amounts of messages compared to other industries. Due to this, they spend more time looking at reports. Currently, the platform offers different reports, yet each one has to be generated separately from one another. To get to a report, you need to perform several clicks. This is quite frustrating when trying to get information efficiently. Just as a banking application, they would appreciate having a hub showing all the data they’re looking for in one place.

### **Persona: Problem Statement**

Ray is a stockbroker who needs an easy way to view text messaging data so he can make reliable predictions when sending text messages to his subscriber list.

**Frustrations**

* Taking too many steps to gather data.

* Not being able to gather customized data in one place.

* Live reporting without having to press a “reload” button.

**Goals**

* Grow his text messaging subscriber lists.

* Send financial text messages at the right time.

* Analyze data efficiently to make predictions.

### **User journey map**

Ray’s journey map revealed that having a dashboard showing the main data he needs will allow him to make faster predictions for future text marketing campaigns.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2Fa8joEDiay5WYVm8TY77u%2F23e15fba-568c-40dd-b078-5ddc34699794.jpg?alt=media&token=d56b6712-d44e-478b-b3ba-eb29f27c6c11","id":"23e15fba-568c-40dd-b078-5ddc34699794","width":913,"height":466,"filename":"Zight 2024-12-03 at 11.07.49 AM.jpg","type":"image/jpeg","caption":"","border":false}]}
```

### **Ideation**

The drafts of the financial dashboard have specific elements with asterisks on the side signaling that they were used in the refined version shown on the right. The elements allow diminishing user pain points when viewing this screen.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2Fa8joEDiay5WYVm8TY77u%2Fc214384b-8964-495c-9717-2ec6517bcd82.png?alt=media&token=1f05e18a-7873-4128-b5b2-9d4404ddea26","id":"c214384b-8964-495c-9717-2ec6517bcd82","width":487,"height":512,"filename":"wireframe-lime-1 (1).png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2Fa8joEDiay5WYVm8TY77u%2F9ad9a921-5cac-475b-9610-77aaaa291b8f.png?alt=media&token=732eca60-5bd9-4991-b14c-60e8223753d3","id":"9ad9a921-5cac-475b-9610-77aaaa291b8f","width":497,"height":512,"filename":"wireframe-lime-2 (1).png","type":"image/png","caption":"","border":false}]}
```

### **Starting the design**

**Digital Wireframes**

After ideating on paper wireframes, I created digital wireframes. These designs focus on displaying the reporting data as the first thing the user sees when logging in.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2Fa8joEDiay5WYVm8TY77u%2Fb5e1b5e5-134e-45fb-b28e-7b378153a46c.png?alt=media&token=e93fa700-b34b-4494-afc0-0b31fc7c0450","id":"b5e1b5e5-134e-45fb-b28e-7b378153a46c","width":1440,"height":900,"filename":"lo-fi-lime-1.png","type":"image/png","caption":"","border":false}]}
```

The main screen focuses on the main data points that the user needs such as scheduled tasks, running jobs, latest sends, and the top lists.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2Fa8joEDiay5WYVm8TY77u%2F32111304-eab1-4674-b601-52ffb91db090.png?alt=media&token=3098776a-501d-479e-ae55-a813e8dfe068","id":"32111304-eab1-4674-b601-52ffb91db090","width":2880,"height":1800,"filename":"lo-fi-lime-2.png","type":"image/png","caption":"","border":false}]}
```

The text blast screen was redesigned to take advantage of the entire screen real estate while keeping familiar elements of the old design.

**Low-fidelity prototype**

My [low-fidelity prototype](https://www.figma.com/proto/KU9zfSBW2h5erVEOnAef3O/Financial-Dashboard?page-id=0%3A1&node-id=1%3A115&viewport=241%2C48%2C0.13&scaling=min-zoom&starting-point-node-id=1%3A115) focuses on the user viewing the main reporting screen and then sending a text blast.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2Fa8joEDiay5WYVm8TY77u%2Fedeeeaf7-6ffa-485b-a133-4905be26ee72.png?alt=media&token=bf07ff1f-3e53-4ae7-af87-7a506389640f","id":"edeeeaf7-6ffa-485b-a133-4905be26ee72","width":1431,"height":235,"filename":"lo-fi-prototype-lime.png","type":"image/png","caption":"","border":false}]}
```

### **Refining the design**

Based on stakeholder feedback, I made the following changes:

1. Five rows showing scheduled tasks

2. Five rows showing running jobs

3. Graphs displaying data for running jobs and the latest sends

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2Fa8joEDiay5WYVm8TY77u%2Fa47f4022-deca-4615-b00d-36205c6597eb.png?alt=media&token=d75edf85-a745-46cd-a002-92c853704ee6","id":"a47f4022-deca-4615-b00d-36205c6597eb","width":1440,"height":900,"filename":"lime-dashboard-final (1).png","type":"image/png","caption":"","border":false}]}
```

**High-fidelity prototype**

My [high-fidelity](https://www.figma.com/proto/KU9zfSBW2h5erVEOnAef3O/Financial-Dashboard?page-id=1%3A1321&node-id=3%3A1255&viewport=241%2C48%2C0.05&scaling=min-zoom&starting-point-node-id=3%3A1255) prototype iterates from the stakeholder feedback.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2Fa8joEDiay5WYVm8TY77u%2Fb5721ebe-575a-4ba3-b4ec-c56394e78f9f.png?alt=media&token=7362c13f-6de0-442d-bbf4-ba50d5fa6154","id":"b5721ebe-575a-4ba3-b4ec-c56394e78f9f","width":1403,"height":659,"filename":"lime-hi-fi-prototype.png","type":"image/png","caption":"","border":false}]}
```

### **Takeaways**

* **Challenges:** Making sure the designs the stakeholders approved are translated into the final product. This meant working closely with our development to focus on interactions and design details to make the product great.

* **What I learned:** I saw how the priorities of stakeholders changed depending on the company’s circumstances. In this case, changing from a complete product redesign to just focusing on the financial users helped to set specific design elements to act as a blueprint to later be adapted for all users, no matter the industry.

* **Teamwork:** Some of our developers have been with the company since it started. They actually designed the original platform that is still being used today. For them the platform works fine as is but it is my job to explain to them the importance of having a good design and user experience.

### **Status**

The financial dashboard was initially released to financial clients only prior to a full release in September 2022 to all of Lime Cellular's clients which encompasses a multitude of industries.

Lime Cellular / Financial Dashboard

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2Fmusicon%2F9096c6cc-43e3-40da-8c50-7d7ccd6ea1ee.png?alt=media&token=d2ed572a-038a-42de-b717-4fa2390c789b","id":"9096c6cc-43e3-40da-8c50-7d7ccd6ea1ee","width":3746,"height":1696,"filename":"musicon-header (1).png","type":"image/png","caption":"","border":false}]}
```

**The Product**\
Musicon is a website that allows music fans to watch live concerts and submit questions to their favorite artists, as well as receive exclusive merchandise for each event. It’s Spotify meets Twitch.

**Project Duration**\
September 2021 - October 2021

**The Problem**\
Artists are struggling to connect with fans due to the pandemic. Even live concert streams are missing the intimate connection with artists and fans.

**The Goal**\
Enhance live concert streams between artists and their fans for a deeper connection.

**My Role**\
UX designer designing the Musicon website from conception to delivery.

**My Responsibilities**\
Creating surveys, finding target users, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, building a design system, and iterating on designs.

### **Understanding the user**

I received various data from different types of music fans. When it came to getting the most out of online music events, they wanted to feel a personal connection with their favorite artists. It wasn’t enough that the event was live. It needed to provide special ways to interact with the artists such as asking questions about songs.

**Pain points:**

1. **Experience can’t be replicated:** Online music events don’t feel personal compared to being in an actual physical event.

2. **Lack of interaction:** Online music events don’t provide a way to interact with artists or be part of the audience.

3. **Not valuable:** Users don’t see the value of paying for a live stream that will be online later.

4. **Lack of exclusivity:** More exclusivity is needed to entice users to attend online music events.

**Persona: Problem statement**

Cesar is a music fan who needs intimate music events from his favorite artists because he wants a deeper and more personal connection to the artists and their work.

**Goals**

* Offer ways to interact with the artist, such as asking a question

* Offer ways for the audience to participate or make themselves known in the live event

* Give exclusive merchandise if paying for the live event

**Frustrations**

* “Online music events don’t feel personal”

* “Online music events can’t replicate being in a physical show with other fans”

* “I don’t see the value of paying for a live stream that will be online later”

**User journey map**

Cesar’s journey map revealed that the online music events would need to have a limit of ticket holders for exclusivity, special merchandise included for the event, and an option to submit questions to the artists.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2F643b4b06-bac6-494a-8ed9-35d751062c10.jpg?alt=media&token=e05f39d9-e043-40c0-b27f-8a9291b8a330","id":"643b4b06-bac6-494a-8ed9-35d751062c10","width":911,"height":467,"filename":"Zight 2024-12-03 at 1.15.15 PM.jpg","type":"image/jpeg","caption":"","border":false}]}
```

### **Starting the design**

**Sitemap**

One of my priorities was the process of users getting the information about the events they would attend. This included having an easy way to access questions submitted for the artists during and after checkout.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2F551c2c89-1291-4d05-bb2b-bee32f9be2c9.png?alt=media&token=51765836-e966-4051-a17e-0600ac3a62b3","id":"551c2c89-1291-4d05-bb2b-bee32f9be2c9","width":6195,"height":2976,"filename":"Musicon Sitemap (1).png","type":"image/png","caption":"","border":false}]}
```

**Paper wireframes**

The drafts of each screen have specific elements with asterisks on the side signaling that they were using in the refined version shown on the right. The elements allow diminishing user pain points when looking for music events to attend.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2Fbfce3688-eb50-4069-aeb0-359a83933b9b.png?alt=media&token=93b84365-ef93-434a-ba26-3c33a69de3f0","id":"bfce3688-eb50-4069-aeb0-359a83933b9b","width":395,"height":512,"filename":"musicon-paper-wireframe-1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2F49a3f01d-9c5a-464b-9114-37bb375fed29.png?alt=media&token=feb05d77-b2a1-496a-ae38-c0e55fcce877","id":"49a3f01d-9c5a-464b-9114-37bb375fed29","width":394,"height":512,"filename":"musicon-paper-wireframe-2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2Ff25a102f-66f1-4b4d-a27f-7089c7d96103.png?alt=media&token=833c73b7-d556-4f51-bedb-d207711dc74e","id":"f25a102f-66f1-4b4d-a27f-7089c7d96103","width":391,"height":512,"filename":"musicon-paper-wireframe-3.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2Fbd56560e-bfcd-452c-9e89-ba3c42f07dbf.png?alt=media&token=723496a7-0fe1-40f8-89b3-418c1bb09068","id":"bd56560e-bfcd-452c-9e89-ba3c42f07dbf","width":396,"height":512,"filename":"musicon-paper-wireframe-4.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2F11d326f7-5163-47b0-9a48-8d2abe211a10.png?alt=media&token=b32e5a1d-7a52-43ec-a515-bbf7f997fb67","id":"11d326f7-5163-47b0-9a48-8d2abe211a10","width":395,"height":512,"filename":"musicon-paper-wireframe-5.png","type":"image/png","caption":"","border":false}]}
```

Since Musicon users will access the site from different devices, it was essential to create designs based on various screen sizes to view the responsiveness.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2Feb1ea6fe-b4ed-4169-bc7d-0bf616990a2a.png?alt=media&token=cf7cd700-7821-4f60-9011-b72566019121","id":"eb1ea6fe-b4ed-4169-bc7d-0bf616990a2a","width":364,"height":512,"filename":"musicon-paper-wireframe-6.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2Ff64c5d24-beba-4393-a510-69f505154039.png?alt=media&token=a9c27ce5-8028-4f7e-8a5c-e2bdda35df49","id":"f64c5d24-beba-4393-a510-69f505154039","width":171,"height":512,"filename":"musicon-paper-wireframe-7.png","type":"image/png","caption":"","border":false}]}
```

**Digital wireframes**

Based on the ideas of the paper wireframes, I expanded on the options that users could explore while on the home screen allowing for a simple and visual style.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2F21f31532-85d2-49b0-a6da-8a49fc285567.png?alt=media&token=f563abd4-119a-40b5-80e4-37dc95cb838f","id":"21f31532-85d2-49b0-a6da-8a49fc285567","width":1920,"height":2863,"filename":"musicon-digital-wireframe-1.png","type":"image/png","caption":"Concise navigation bar","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2F2369ba8c-adca-4153-b02a-96e28e759004.png?alt=media&token=83d32dcd-cb50-4c9f-a91f-114b244aa094","id":"2369ba8c-adca-4153-b02a-96e28e759004","width":1920,"height":2863,"filename":"musicon-digital-wireframe-1.png","type":"image/png","caption":"Hero image button supporting the main event","border":false}]}
```

The homepage is concise in terms of content and sections, allowing for the mobile version to have a moderate scrolling experience and not feel endless.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2F63ff1ebc-3be0-4579-ac3c-ef929fc2f6f6.png?alt=media&token=c1576332-59a6-44e5-9942-c685a0781c69","id":"63ff1ebc-3be0-4579-ac3c-ef929fc2f6f6","width":390,"height":2733,"filename":"musicon-digital-wireframe-3.png","type":"image/png","caption":"The homepage is concise in terms of content and sections, allowing for the mobile version to have a moderate scrolling experience and not feel endless.","border":true}]}
```

**Low-fidelity prototype**

The [low-fidelity prototype](https://xd.adobe.com/view/809c13dd-fd8c-401b-aea8-bcfa174bf7f0-d5cf/#access_token=eyJhbGciOiJSUzI1NiIsIng1dSI6Imltc19uYTEta2V5LTEuY2VyIn0.eyJpZCI6IjE2NDAxMTg4MzU5NzVfYTUyZDYzMzgtZGNhYy00OTEyLThhMTItOTU1YjAwNTQzMDViX3VlMSIsInR5cGUiOiJhY2Nlc3NfdG9rZW4iLCJjbGllbnRfaWQiOiJDb21ldFdlYjEiLCJ1c2VyX2lkIjoiMUY4RjY1ODI1MkQ4NDIzQzBBNDkwRDREQEFkb2JlSUQiLCJhcyI6Imltcy1uYTEiLCJhYV9pZCI6IjFGOEY2NTgyNTJEODQyM0MwQTQ5MEQ0REBBZG9iZUlEIiwiY3RwIjowLCJmZyI6IldCTVBHWlBEVkxFNUk3VUNGTVJGUkhRQU5RPT09PT09Iiwic2lkIjoiMTY0MDExODgzNTk3M180MWIzODJjZS1hN2NkLTQzYjMtYTgwYy0yYTdjNTA0MTlkNTdfdWUxIiwibW9pIjoiOTM4ZGIyY2UiLCJleHBpcmVzX2luIjoiODY0MDAwMDAiLCJzY29wZSI6IiIsImNyZWF0ZWRfYXQiOiIxNjQwMTE4ODM1OTc1In0.V3PZJWH6e8I2H1JqZtxb8A6bIbotZTaj74WAiZA4PZ068haX8ik1DS7WK7XPn_2PyomqaoMVyGT26zL5p53_ZMrAOQEoQ1NkQqCmNT0q_b16WY_uRtSmv0Ko7Ok60lsRS14UrfxTF3mhEScq0B3bYM7XXtycuJEmnOGPnUgw9jW4wvYDaoQrFcJIxQqT434ZJmUfGERdKRWVFzlxACgSDaGMxq5GclOiTYYGi3X8cwarNzfPIQ8Ii_e5ggjPum71h_g9gVOX7xmBFRFVr4WW2PqrQ14DJm9bkIY04hntHg5iOlcTu3TvNnRWMJQ1cDqG10usJ6RPNnbdPL9M87B1Lg&token_type=bearer&expires_in=86399996) features the flow of viewing the details of an event by starting on the homepage and then connecting through the process of buying tickets for that event.

The usability study allowed me to improve the location of buttons and event details.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2Ffe9507c1-3e57-449e-8ad8-f2515eb7a04e.png?alt=media&token=feac5f81-3e46-4da6-ad62-f1d9c410cc6d","id":"fe9507c1-3e57-449e-8ad8-f2515eb7a04e","width":889,"height":222,"filename":"musicon-low-fidelity-prototype.png","type":"image/png","caption":"","border":false}]}
```

### **Usability Study**

**Parameters**

Study type: Moderated

Participants: 5

Location: Remote

Length: 10 minutes

**Findings**

* **Simplicity:** Users want an easy way to buy tickets, thus buttons should be highlighted more and easy to see when a page loads.

* **Familiarity:** Users want a familiar way of adding their video questions, thus the options should be described on the homepage and throughout the website.

* **Emphasis on merchandise:** The autographed merchandise needs to be added and highlighted when purchasing a ticket.

### **Refining the design**

The steps explaining how the platform works were missing from the homepage. In the revised version, the steps can now be seen “Above The Fold” to educate users.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2Fb2ba1abb-c934-402a-ba52-66b0991e73b2.png?alt=media&token=a65506b6-5e3b-41a3-8ff0-f937a7a974bd","id":"b2ba1abb-c934-402a-ba52-66b0991e73b2","width":1920,"height":2863,"filename":"musicon-before-usability-study-1.png","type":"image/png","caption":"Before usability study","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2F1e312b91-a43b-4677-8a1e-be7da2174abc.png?alt=media&token=60fc8a60-0cf6-4c83-9967-a7d18c5cd68e","id":"1e312b91-a43b-4677-8a1e-be7da2174abc","width":1920,"height":2840,"filename":"musicon-after-usability-study-1.png","type":"image/png","caption":"After usability study","border":false}]}
```

The event page was missing a prominent option to buy tickets shown “Above The Fold.” This was added by placing a button by the left side of the hero image along with data on ticket availability.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2F524db574-9668-48ab-8ab3-9c248c7a0adf.png?alt=media&token=c575c1a6-95df-40d8-8687-239dad166ae5","id":"524db574-9668-48ab-8ab3-9c248c7a0adf","width":1920,"height":2225,"filename":"musicon-before-usability-study-2.png","type":"image/png","caption":"Before usability study","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2F62c43ea1-f41a-4216-852d-158fdb61179e.png?alt=media&token=2b1dd440-e45e-4d3f-8ac4-af0d24b328ec","id":"62c43ea1-f41a-4216-852d-158fdb61179e","width":1920,"height":2260,"filename":"musicon-after-usability-study-2.png","type":"image/png","caption":"After usability study","border":false}]}
```

**Additional desktop screens**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2Fa0a92e65-e76e-4bd3-8d3e-9b018b631b2d.png?alt=media&token=4a01a7b9-dd7c-4ece-8c33-2eae35315cd3","id":"a0a92e65-e76e-4bd3-8d3e-9b018b631b2d","width":1920,"height":2678,"filename":"musicon-after-usability-study-3.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2Faf66d8a2-5196-4215-83cf-bbdde8dc72e6.png?alt=media&token=47908eee-fc13-497c-ab7e-926776990880","id":"af66d8a2-5196-4215-83cf-bbdde8dc72e6","width":1920,"height":1681,"filename":"musicon-after-usability-study-4.png","type":"image/png","caption":"","border":false}]}
```

**Mobile screen size variations**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2F8f78a6c1-a2f7-4bf6-a456-73167c9aaa95.png?alt=media&token=efc4636d-3d5b-4349-9304-730dc60729e1","id":"8f78a6c1-a2f7-4bf6-a456-73167c9aaa95","width":390,"height":4187,"filename":"musicon-mobile-screen-1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2Fdd07266f-f9e2-40aa-815f-13c40f7ff349.png?alt=media&token=ce06a56e-3bd5-43f0-afe0-e06b71a8976e","id":"dd07266f-f9e2-40aa-815f-13c40f7ff349","width":390,"height":2774,"filename":"musicon-mobile-screen-2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2F60eb3101-8538-414b-8317-59f44b30d1bf.png?alt=media&token=1dac65e3-d2e4-43b4-b28e-2faec50e67cb","id":"60eb3101-8538-414b-8317-59f44b30d1bf","width":390,"height":3210,"filename":"musicon-mobile-screen-3.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2F5032bbb3-962f-4ea8-b32f-457f6f02cddc.png?alt=media&token=0db5f33e-4bea-47ad-bfcd-8ea102e036fd","id":"5032bbb3-962f-4ea8-b32f-457f6f02cddc","width":390,"height":1352,"filename":"musicon-mobile-screen-4.png","type":"image/png","caption":"","border":false}]}
```

**High-fidelity prototype**

The high-fidelity prototype improves the flow first presented in the low-fidelity prototype as users can easily know which steps to take next to buy concert tickets.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2F0a905235-7004-4ffb-a33f-a9ec24c3a4d1.png?alt=media&token=5ad1c9f0-1258-4b5c-8b36-d01a1b98ef0d","id":"0a905235-7004-4ffb-a33f-a9ec24c3a4d1","width":1063,"height":191,"filename":"musicon-desktop-website-high-fidelity-prototype.png","type":"image/png","caption":"","border":false}]}
```

[Desktop prototype link](https://xd.adobe.com/view/e2d51841-0983-4ab0-a694-da57088ddbb8-b786/)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FbDrBD9bzZmzvTkHoiZdY%2F2f254074-72b9-4d4c-aded-604edea8dbfd.png?alt=media&token=0096f42e-2de3-42a8-be0a-24835ba3a569","id":"2f254074-72b9-4d4c-aded-604edea8dbfd","width":852,"height":626,"filename":"musicon-mobile-website-high-fidelity-prototype.png","type":"image/png","caption":"","border":false}]}
```

[Mobile prototype link](https://xd.adobe.com/view/a106c919-d771-465e-afee-e6d1a456f985-f455/)

**Accessibility considerations**

1. I used headings with different-sized text and fonts for a clear visual hierarchy.

2. Even though not presented in the designs, the site would offer a dark mode to improve visibility issues.

3. Even though not presented in the designs, the side would offer multiple languages for text in the site content. It would also include captions for concerts, including those in various languages.

### **Going forward**

* **Impact:** The impact of the designs will help site users have a smoother experience while navigating, specifically when buying tickets for concerts. Most of all, it will assist in the original idea of music fans having a deeper connection to their favorite artists through online concerts.

* **What I learned:** Through user research, I was able to get a better understanding of what could make music fans have a deeper connection to their favorite artists through digital experiences.

* **Next steps:**

  1. Conduct additional usability studies to determine more areas of need - especially during the actual music events.

  2. Compare the site features to other competitors and analyze areas of improvement.

  3. Improve the checkout page with better gestures and motions.

Musicon Website

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2Fb29490e9-83fd-44b6-bde8-65a895b194be.png?alt=media&token=8dac47ab-1f4c-4af3-8c07-d87b7ba3bde6","id":"b29490e9-83fd-44b6-bde8-65a895b194be","width":3746,"height":1696,"filename":"purrfect-health-header (1).png","type":"image/png","caption":"","border":false}]}
```

#### The Product

The Purrfect Health app is designed for cat owners and veterinary workers to keep track of cats’ nutrition and health - such as food and medicine schedules. It provides features such as food and medicine intake reminders to improve the well-being of cats.

#### Project Duration

April 2021 - September 2021

#### The Problem

Busy cat owners and veterinary workers lack ways of keeping track of their cats’ nutrition and health.

#### The Goal

Design an app that will allow users to easily keep track of their cat's nutrition and health while also understanding more about their cats.

#### My Role

UX designer designing an app called Purrfect Health from conception to delivery.

#### My Responsibilities

Creating surveys, finding target users, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, building a design system, and iterating on designs.

## Understanding the user

I gathered data from various cat owners. Some go out of their way to give their cats the best nutrition and health. This can be stressful if your cats have different health problems and eat specific foods. Other owners are more relaxed about what they feed their cats and may not know if those choices are the best. Some owners need help finding a way to keep track of their cats’ health and nutrition. All of the owners need a way to learn what is the best food for their cat based on age, weight, and medical conditions.

### Persona problem statement

Karla is a busy analyst who needs a better way to track feeding and medicine portions for her cats. She gets stressed trying to remember the different serving proportions.

### Goals

* Find the best healthy food within her budget

* Find an easy process to feed her three cats eating different foods

* Volunteer in more animal shelters

Frustrations

* “I need a better way to track my cats’ health”

* “I get stressed trying to remember the different serving proportions”

* “It’s quite expensive to buy prescription food”

##### Goal

A better way to track feeding and medicine portions for her cats.

##### User journey map

Karla’s journey map revealed that the app will need different personalization options to give her reminders and correct recommendations.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2Ff28d4ccd-1a9c-470a-8b98-d7dc6cbcbd59.jpg?alt=media&token=8429df62-33d8-4d29-b0a3-6ed6b674a27b","id":"f28d4ccd-1a9c-470a-8b98-d7dc6cbcbd59","width":916,"height":469,"filename":"Zight 2024-12-03 at 2.30.51 PM.jpg","type":"image/jpeg","caption":"","border":true}]}
```

## Starting the design

#### Paper wireframes

The drafts of each screen have specific elements with asterisks on the side signaling that they were using in the refined version shown on the bottom right. The elements allow diminishing user pain points when creating a new cat profile.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2Fd843695a-87cb-46c1-9ac0-46c1435940f3.png?alt=media&token=f261b6b0-fc9a-4aca-842c-5d89ebb2e5c1","id":"d843695a-87cb-46c1-9ac0-46c1435940f3","width":509,"height":712,"filename":"purrfect-health-paper-wireframe-1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2Fad9bcb45-6632-434b-90a6-6492664e66f5.png?alt=media&token=24228a1c-0f5b-47f1-8d07-ae40780fe083","id":"ad9bcb45-6632-434b-90a6-6492664e66f5","width":523,"height":667,"filename":"purrfect-health-paper-wireframe-2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2Fe95dffd7-9860-4e51-b9fc-0f4d0a92738f.png?alt=media&token=8d32d5c0-9937-4ed0-ad21-36dbc3b49585","id":"e95dffd7-9860-4e51-b9fc-0f4d0a92738f","width":510,"height":710,"filename":"purrfect-health-paper-wireframe-3.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2F12dd6fd2-66f3-40a8-949b-db7585196592.png?alt=media&token=08fbd863-e1ed-43c8-bd28-b7a110115f99","id":"12dd6fd2-66f3-40a8-949b-db7585196592","width":509,"height":711,"filename":"purrfect-health-paper-wireframe-4.png","type":"image/png","caption":"","border":false}]}
```

#### Digital wireframes

Based on the ideas of the paper wireframes, I expanded on the options that users could explore while on the home screen allowing for a simple and visual style.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2F2667c6a5-c4ab-4993-8237-633a3f27f8d0.png?alt=media&token=c244fc31-0fb0-433e-8f38-11a425c1cc35","id":"2667c6a5-c4ab-4993-8237-633a3f27f8d0","width":750,"height":2222,"filename":"purrfect-health-digital-wireframe-1.png","type":"image/png","caption":"This button allows for easy access when creating a new cat profile.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2Fc677c0f5-1379-4a47-a374-95147c100af4.png?alt=media&token=f70fa56a-6dc0-4e16-a786-79c788fb8241","id":"c677c0f5-1379-4a47-a374-95147c100af4","width":750,"height":2222,"filename":"purrfect-health-digital-wireframe-2.png","type":"image/png","caption":"Users can access their cat’s schedule directly from the home screen.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2Fdf1855bb-e480-4cbf-93b8-c9ac5c969e5b.png?alt=media&token=e4c7e399-f992-498a-9056-3192601d610f","id":"df1855bb-e480-4cbf-93b8-c9ac5c969e5b","width":383,"height":1076,"filename":"purrfect-health-digital-wireframe-3.png","type":"image/png","caption":"Easy access to the user’s cat profiles. The schedule option is front and center to keep track of food/medicine.","border":false}]}
```

#### Low-fidelity prototype

The [low-fidelity prototype](https://www.figma.com/proto/a4A2lStGlK9mmw8G3um1BL/Purrfect-Health-App?page-id=1%3A383&node-id=1%3A387&viewport=241%2C48%2C0.15&scaling=scale-down&starting-point-node-id=1%3A387) connected the process of creating a new cat profile along with the options of adding food and medicine with a weekly schedule. This prototype could then be utilized in a usability study with users.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2F4738b723-0997-4277-b54d-8f7b81ca1670.png?alt=media&token=305dd80f-79fe-4942-a337-49639086879f","id":"4738b723-0997-4277-b54d-8f7b81ca1670","width":1162,"height":425,"filename":"purrfect-health-low-fidelity-prototype.png","type":"image/png","caption":"","border":false}]}
```

## Usability Study 

### Parameters

Study type: Moderated

Participants: 5

Location: Remote

Length: 10 minutes

### Findings

* Tracking feature: The features presented to keep track of a cat’s diet or medicine intake are intriguing with not many apps with this design like this on the market.

* Wider audience: There may be other users besides cat owners, such as cat sitters, or veterinarian offices that need to keep track of multiple cats for different people or organizations.

* Make it simple: The scheduling feature needs to be simpler to use such as the profile screen. The schedule button may need a “plus” sign

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed that the user profile icon at the top right may confuse users - thinking this is for their cat profiles, when it is in fact, for the user's profile.

## Refining the design

#### Mockups

Based on the insights from the usability study, one of my focuses was to improve the app navigation. Instead of having a long scroll to add a cat's information, I added a submenu for food, medicine, and veterinary information.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2F88b0d252-05d8-414c-8c62-0d203337a683.png?alt=media&token=beb37325-0836-4b73-b8aa-beb2705f60cd","id":"88b0d252-05d8-414c-8c62-0d203337a683","width":447,"height":872,"filename":"purrfect-health-before-usability-study-1.png","type":"image/png","caption":"Before usability study","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2F23f3e21e-ddf5-4eb7-b2a3-458372a084e7.png?alt=media&token=dbf0d956-25b3-4daf-8143-d786493b296a","id":"23f3e21e-ddf5-4eb7-b2a3-458372a084e7","width":447,"height":872,"filename":"purrfect-health-after-usability-study-1.png","type":"image/png","caption":"After usability study","border":false}]}
```

The screen to add food items was confusing to users as the design wasn't familiar or simple enough. I changed the fields to add the food items and made them similar to the other screens. I also added a checkmark icon below the fields in case wanted to add the food items to a schedule.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2F3f5861cb-b329-48c0-a411-041ff7722ebe.png?alt=media&token=4f185167-b361-406a-be61-e9c21f6b93c2","id":"3f5861cb-b329-48c0-a411-041ff7722ebe","width":447,"height":872,"filename":"purrfect-health-before-usability-study-2.png","type":"image/png","caption":"Before usability study","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2Fca30f9c8-847f-4e63-9684-d3ef0dec41c2.png?alt=media&token=a1a5c641-aa8c-4df9-9850-d8531ea43744","id":"ca30f9c8-847f-4e63-9684-d3ef0dec41c2","width":447,"height":872,"filename":"purrfect-health-after-usability-study-6.png","type":"image/png","caption":"After usability study","border":false}]}
```

#### Additional mockups

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2F12db324f-6194-4996-a6bd-15c67fea9bcc.png?alt=media&token=7e2f74c2-090c-4aa8-8259-da1d92c4dd93","id":"12db324f-6194-4996-a6bd-15c67fea9bcc","width":447,"height":872,"filename":"purrfect-health-after-usability-study-3.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2F32d1fa3d-3c91-49c2-b83b-b870cc623a86.png?alt=media&token=7023145f-d052-46b8-90d4-9e8c6f70626e","id":"32d1fa3d-3c91-49c2-b83b-b870cc623a86","width":447,"height":872,"filename":"purrfect-health-after-usability-study-4.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2Ff9bb542e-dd0b-448c-a01d-314d593a3816.png?alt=media&token=e0361d01-a495-4337-b9b4-9f5ef3b3c407","id":"f9bb542e-dd0b-448c-a01d-314d593a3816","width":447,"height":872,"filename":"purrfect-health-after-usability-study-5.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2F76b38f67-0381-42cc-97cc-1a69a63d6897.png?alt=media&token=144afd04-fcd9-4a90-9d3b-8ee80cbb96c8","id":"76b38f67-0381-42cc-97cc-1a69a63d6897","width":447,"height":872,"filename":"purrfect-health-after-usability-study-2.png","type":"image/png","caption":"","border":false}]}
```

#### High-fidelity prototype

The final [high-fidelity](https://www.figma.com/proto/a4A2lStGlK9mmw8G3um1BL/Purrfect-Health-App?page-id=277%3A1286&node-id=277%3A1676&viewport=241%2C48%2C0.19&scaling=scale-down&starting-point-node-id=277%3A1709) prototype simplifies the user flows to create a cat profile and add food items along with a schedule. It also allows for more customization options.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2Faf8bca79-4ae7-4f43-8f55-a5f0953fdc4c.png?alt=media&token=9254598d-de03-4cb9-aa22-a8ebcb209393","id":"af8bca79-4ae7-4f43-8f55-a5f0953fdc4c","width":1139,"height":451,"filename":"purrfect-health-high-fidelity-prototype.png","type":"image/png","caption":"","border":false}]}
```

#### Accessibility considerations

1. Color combinations including backgrounds and fonts were checked for adequate contrast.

2. I decided to use a nav tab (bottom navigation) to easily reach the different features.

#### In action

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FYqNZBUOCstP50Pd3LXVrWXs3XDG3%2FruvNhOvPLsC8SGQr5mee%2F086a779c-dcc0-4eaf-80fe-7860be77724b.mp4?alt=media&token=81df80f7-4c30-4086-bf83-6164c8ea5502","id":"086a779c-dcc0-4eaf-80fe-7860be77724b","width":448,"height":872,"filename":"Screen Recording 2021-12-20 at 10.48.37 PM.mp4","type":"video/mp4","caption":"","border":false}]}
```

## Going forward

#### Impact

The app helps users develop a more meaningful relationship with their cats and their nutritional and health needs. It also helps cat owners have more peace of mind about their cats.

#### What I learned

Through usability studies, I learned that the app can have different uses that not only include cat owners - for example, veterinary offices. This feedback influenced the other iterations of the app’s designs and options.

#### Next steps

1. Conduct more user research to determine more areas of need - including other animals.

2. Conduct another round of usability studies with other types of pet owners and veterinary offices to investigate other pain points that could be resolved.

3. Continue to improve gestures and motions in the prototype.

Purrfect Health App

Product Designer / Dad / Husband

Foundations of User Experience (UX) Design

Build Wireframes and Low-Fidelity Prototypes

Start the UX Design Process: Empathize, Define, and Ideate

Google

Conduct UX Research and Test Early Concepts

Implement multiple features for machine learning healthcare models.

Bulk Feature Creation

Allow users to explore files and databases from other cloud environments such as Amazon S3 while in the ClosedLoop platform.

File Explorer

Assess whether a machine learning model uses a representative sample, is impacted by label bias, or may result in the unfair distribution of resources. After reviewing each metric, you can indicate whether the model has been validated and whether it is biased or unbiased.

Bias & Fairness

- Served as a volunteer representative that focused on the Latino population of greater Salt Lake City area
- Managed, trained and led 180 volunteers in the Salt Lake City Area
- Directed relations between volunteers and local church leaders
- Served as the assistant to the Mission President

Esteban Aravena

2024