Case Study · Mindfulness

June 2023

My aim was to create an app that encourages mindful news consumption, promotes mental wellness, and fosters healthier smartphone relationships.

### That's…a huge undertaking, what gives?

In today's media-saturated world, people are increasingly consuming news through social media, leading to unhealthy habits like 'doomscrolling' and its effects on mental health. The problem was identified through a mixed-methods research approach, including a survey, user testing, and observational research. The challenge was to design an app that encourages mindful news consumption and promotes healthier interactions with digital devices. In a world full of negative distractions, how might we design for mindful consumption?

### Whew! How did you do it?

The design process began with identifying the problem: the negative impact of endless content consumption on mental health and overall well-being. The initial strategy was to use design to encourage mindful news consumption and facilitate healthier relationships with smartphones.

The process followed the double diamond design process, starting with the exploration of the problem space. This involved conducting a survey to understand users' news consumption habits and their perceptions and experiences of news consumption. The survey results informed certain design decisions for the app.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2F3agDsFpjU0g71CEh0XUs%2F6f05cb14-8bd6-44b6-aa35-db0d69c828fd.jpg?alt=media&token=3978229b-29a6-4b22-bb54-20f5f42c5812","id":"6f05cb14-8bd6-44b6-aa35-db0d69c828fd","width":3000,"height":1687,"filename":"mindy-surveyresults.jpg","type":"image/jpeg","caption":"mindy – Survey Results","border":false}]}
```

User testing was conducted to observe how individuals interacted with the app. This observational study aimed to gain insights into how people might use the app, providing a holistic understanding of user behaviour.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2F3agDsFpjU0g71CEh0XUs%2F79f1944d-9d34-41e9-aa17-e91e07be954d.jpg?alt=media&token=d03c8825-fecf-408f-8781-51f5beabc6a0","id":"79f1944d-9d34-41e9-aa17-e91e07be954d","width":2000,"height":1333,"filename":"rashmi-phone-r.jpeg","type":"image/jpeg","caption":"Image – Observational User Testing","border":false}]}
```

The design decisions made during the process were influenced by the significance of mindful reading, the impact of colour psychology in design, and the importance of user experience in shaping app interactions.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2F3agDsFpjU0g71CEh0XUs%2Fc2acffd6-1864-4788-9f9c-3d4623dc39be.jpg?alt=media&token=b3e9ecbe-7b4b-4b55-9459-3f98fdb27840","id":"c2acffd6-1864-4788-9f9c-3d4623dc39be","width":3000,"height":1687,"filename":"mindy-colourpalette.jpg","type":"image/jpeg","caption":"mindy – Colour Palette","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2F3agDsFpjU0g71CEh0XUs%2F46aabde1-4c77-4064-83c7-3f5fcfe87768.jpg?alt=media&token=59678b42-6426-49da-b9cf-13950c98e8d4","id":"46aabde1-4c77-4064-83c7-3f5fcfe87768","width":3000,"height":1687,"filename":"mindy-designdetails.jpg","type":"image/jpeg","caption":"mindy – Design Details","border":false}]}
```

### Constraints and trade-offs

The design process involved several trade-offs. One of the significant challenges was moving away from the familiar vertical scrolling pattern. An early design prototype introduced an on-screen button for scrolling, but user testing revealed that this was frustrating for users, leading to a decision to change to a familiar scrolling pattern (side-scrolling).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2F3agDsFpjU0g71CEh0XUs%2F77d5562b-f06b-4178-9817-6602339be78c.jpg?alt=media&token=1a9ed664-842a-4535-89d0-c906568179e3","id":"77d5562b-f06b-4178-9817-6602339be78c","width":3000,"height":1687,"filename":"mindy-singlebutton.jpg","type":"image/jpeg","caption":"mindy – Single Button Idea","border":false}]}
```

Another trade-off was the decision to not include breaking news notifications in the app, despite survey results indicating a desire for this feature. This decision was made to promote mindful news consumption, reducing the feeling of constantly being reminded of headlines and encouraging users to view the content when they intentionally wanted to.

A constraint was the way people hold their phones, which influenced the placement of key UI elements. The design had to ensure that they key features of the app were easily accessible to the users, regardless of how they hold their phones.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2F3agDsFpjU0g71CEh0XUs%2Fdf1e66dd-630f-47dd-8520-b8b6bca18ee8.jpg?alt=media&token=2da9f03b-3db3-4761-8aad-a3814e9eb989","id":"df1e66dd-630f-47dd-8520-b8b6bca18ee8","width":2000,"height":1267,"filename":"photo-phone-hold-3-r.jpg","type":"image/jpeg","caption":"Image – Hand Holding Device","border":false}]}
```

### Result

The result was Mindy, a mindful news consumption app. The app features a side-scrolling navigation experience, which is a departure from the typical vertical scrolling experience in most news apps. This was designed to slow down the news consumption process and promote mindfulness.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2F3agDsFpjU0g71CEh0XUs%2F4a82a2be-c1ef-400e-8791-cc010b73da3f.jpg?alt=media&token=e983f50c-6154-4bd5-ae1b-b38ec15164c5","id":"4a82a2be-c1ef-400e-8791-cc010b73da3f","width":3000,"height":1687,"filename":"mindy-articlescroll.jpg","type":"image/jpeg","caption":"mindy – Side-Scrolling Article View","border":false}]}
```

The app also includes a mood-rating features which allows users to rate their mood after reading an article. This encourages users to reflect on how the news affects their mood and promotes mindful consumption.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2F3agDsFpjU0g71CEh0XUs%2F4db3719a-ad4a-4412-bbb6-e2eb713f5a7c.jpg?alt=media&token=98ca118c-6c13-4fa8-9f73-d428a4e5e621","id":"4db3719a-ad4a-4412-bbb6-e2eb713f5a7c","width":3000,"height":1687,"filename":"mindy-upliftingcontent.jpg","type":"image/jpeg","caption":"mindy – Mood Rating","border":false}]}
```

The uplifting content section provides a space for positive and uplifting news, as a counterbalance to the often negative news. The text-to-speech function allows users to list to articles, reducing screen time and providing a different way of consuming news.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2F3agDsFpjU0g71CEh0XUs%2Fa022583f-8f0b-4687-86dd-af8709843826.jpg?alt=media&token=8ffb579a-cbb2-4883-902e-a366b79c3a17","id":"a022583f-8f0b-4687-86dd-af8709843826","width":3000,"height":1687,"filename":"mindy-upliftingcontent.jpg","type":"image/jpeg","caption":"mindy – Uplifting Content","border":false}]}
```

### Learnings & Next Steps

The project demonstrated the potential of design to influence news consumption habits and promote mental well-being. It highlighted the importance of considering user experience in the design process and the need for mindful reading in the era of endless content.

The next steps for the project include further user testing to refine the app's features and interface. There is also a plan to measure the impact of the app on users' news consumption habits and mental well-being. The learnings from this project will inform future design decisions and strategies for promoting mindful content consumption.

If you’re so inclined, here's an interactive prototype.

```cv
figma
{"url":"https://www.figma.com/proto/gljeV0PwLa7rnZNRKwsknp/mindy-v1b?page-id=22%3A127&type=design&node-id=450-12423&viewport=45%2C343%2C0.26&t=COZPrUh3U8YU4uPo-1&scaling=scale-down&starting-point-node-id=450%3A12423&mode=design"}
```

mindy – Designing for Mindfulness

Case Study · Fashion Retail

May 2023

As a solo UX designer, I was tasked with designing a new stock management feature for ENVIMO, a multi-platform point-of-sale solution, aiming to modernise business operations. The goal was to cut down processing time by half and enhance usability for retail staff.

### Bit of Background

As part of their business strategy, Apparel21 initiated the modernisation of its point-of-sale (POS) and inventory management solution, ENVIMO. They aimed to achieve feature parity with its older POS product. The absence of a stock adjustment feature in the ENVIMO app, a tool essential for daily ad-hoc inventory management, was a significant gap. The challenge was to design this feature in a way that it closely mirrored the flow of Apparel21's existing desktop POS solution, thereby minimising the need for additional training. This was crucial as the desktop POS systems were continuously in use, especially during peak hours, and the ENVIMO app was designed to enable retail staff to conduct retail and stock management tasks around the store without being tied to a desktop.

### Task and action (the process)

**What’s the problem?**

Due to budget constraints, I relied on conversations with company support staff who had prior experience with Apparel21. Through these discussions, the need for immediate stock adjustments became apparent, highlighting the importance of a swift, non-desktop-bound stock management solution. Factors like defective goods, stained items, and stolen or missing stock necessitated immediate stock adjustments. Any inability to fulfill orders resulted in delays, frustrating customers. This underscored the need for a swift, non-desktop-bound stock management solution, with simplicity being a paramount consideration.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2FKc3DVshQJFn0rVVwLISS%2Fc2538bf1-0b42-4db0-8e43-a8b2a62e0974.jpg?alt=media&token=b3031340-7b77-4012-a0b2-ca1a8fe88f0c","id":"c2538bf1-0b42-4db0-8e43-a8b2a62e0974","width":3000,"height":1687,"filename":"envimo-stadj-pos.jpg","type":"image/jpeg","caption":"POS Stock Adjustment Interface","border":false}]}
```

The first step was understanding the current screens and flow. I developed two personas for the discovery phase.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2FKc3DVshQJFn0rVVwLISS%2F2792f797-18b5-4b3c-910a-123fdd373926.jpg?alt=media&token=62a7d647-6e07-4ba8-932a-1034eafbc1dc","id":"2792f797-18b5-4b3c-910a-123fdd373926","width":3000,"height":1687,"filename":"envimo-stadj-persona1.jpg","type":"image/jpeg","caption":"ENVIMO Stock Adjustment Persona 1","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2FKc3DVshQJFn0rVVwLISS%2Fd422adb9-02cf-4a9c-865d-e06f17ea41de.jpg?alt=media&token=8ea97534-75de-4a5e-9d68-9b80240352a4","id":"d422adb9-02cf-4a9c-865d-e06f17ea41de","width":3000,"height":1687,"filename":"envimo-stadj-persona2.jpg","type":"image/jpeg","caption":"ENVIMO Stock Adjustment Persona 2","border":false}]}
```

ENVIMO's existing screens posed a challenge, however, leading to confusion over the dual toggle system and unclear labels. In my initial iteration, I intended for the stock adjustment action to be completed in the same page as an enquiry.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2FKc3DVshQJFn0rVVwLISS%2F5bce7468-0f47-45f2-bbc6-3db8e6e491f8.jpg?alt=media&token=562110df-35ef-4a65-ae5c-26a672ea404f","id":"5bce7468-0f47-45f2-bbc6-3db8e6e491f8","width":3000,"height":1687,"filename":"envimo-stadj-existing-enquiry.jpg","type":"image/jpeg","caption":"ENVIMO Stock Enquiry","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2FKc3DVshQJFn0rVVwLISS%2Fee6130c1-f639-4636-9638-a015068222d2.jpg?alt=media&token=5c9cd49e-5d78-4edd-92db-1cb24e43471c","id":"ee6130c1-f639-4636-9638-a015068222d2","width":3000,"height":1687,"filename":"envimo-stadj-early-toggle.jpg","type":"image/jpeg","caption":"ENVIMO Stock Adjustment Toggle","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2FKc3DVshQJFn0rVVwLISS%2Fcb851aa7-ecc3-4d73-a62e-4fc14fa1e8e4.jpg?alt=media&token=bd9101c2-aeb4-4f64-b038-e5ca26313676","id":"cb851aa7-ecc3-4d73-a62e-4fc14fa1e8e4","width":3000,"height":1687,"filename":"envimo-stadj-early-enquiry.jpg","type":"image/jpeg","caption":"ENVIMO Stock Adjustment + Stock Enquiry","border":false}]}
```

**Never a straightforward project**

This also meant re-building the stock enquiry feature. After discussions with the product owner, we decided to make the stock adjustment a standalone feature. This decision simplified the user flow and reduced the number of new screens needed.

The slow response of the Android-based payment terminals ENVIMO would be running on reinforced the need for a process that was as streamlined and input-light as possible. I aimed for a design with glanceable information and a clear call-to-action in the centre of the screen.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2FKc3DVshQJFn0rVVwLISS%2Ff8b264a5-9a10-45c5-9ad1-64adcf9fbb77.jpg?alt=media&token=fb367603-60b6-414f-9b02-a38e203d8c63","id":"f8b264a5-9a10-45c5-9ad1-64adcf9fbb77","width":3000,"height":1687,"filename":"envimo-stadj-early.jpg","type":"image/jpeg","caption":"ENVIMO Stock Adjusment Early Iteration","border":false}]}
```

Despite these efforts, further tweaking was needed as I realised that the tap targets were too small.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2FKc3DVshQJFn0rVVwLISS%2Fae7955af-883f-44c6-9da2-9699c2870fe5.jpg?alt=media&token=b830dc71-f593-4856-bcd4-44281577cf35","id":"ae7955af-883f-44c6-9da2-9699c2870fe5","width":3000,"height":1687,"filename":"envimo-stadj-final.jpg","type":"image/jpeg","caption":"ENVIMO Stock Adjustment Production","border":false}]}
```

From our research, many of our customers primarily used the mobile version, the whole selling point of ENVIMO. Despite that, there are certain environments (e.g. departmental stores) where a desktop POS is necessary. This was the resulting design.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2FKc3DVshQJFn0rVVwLISS%2F8758ef4f-97bd-4d9a-882f-fa4ea0d2560f.jpg?alt=media&token=460ad042-ad92-477f-8c20-db4406de9719","id":"8758ef4f-97bd-4d9a-882f-fa4ea0d2560f","width":3000,"height":1687,"filename":"envimo-stadj-desktop.jpg","type":"image/jpeg","caption":"ENVIMO Stock Adjustment Desktop","border":false}]}
```

### Constraints

The design process involved several trade-offs. During the development phase, developers identified an overlooked flow: some businesses put security measures behind inventory management features to prevent fraud. Further, some businesses were unaware of features simply because they weren't visible. Instead of using a feature restricted banner message or hiding the feature, I designed a way of indicating that for staff that did not have access. Reducing cognitive load and increasing awareness of the features.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2FKc3DVshQJFn0rVVwLISS%2F48aec108-266e-4984-b64e-dec9ed729fbe.jpg?alt=media&token=58a86ea2-1e7f-4aac-9687-5a24048d43f0","id":"48aec108-266e-4984-b64e-dec9ed729fbe","width":3000,"height":1687,"filename":"envimo-stadj-permissions.jpg","type":"image/jpeg","caption":"ENVIMO Insufficient Permissions Helper Text","border":false}]}
```

### Results

While I don't have access to metrics to gauge the success of this design, I can illustrate how much shorter the process has become. The number of steps required in the POS system was significantly reduced in ENVIMO, indicating a more streamlined process.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4610qlXH7SUqpF9IYeUVbnXHx352%2FKc3DVshQJFn0rVVwLISS%2F2134adeb-8c2f-495f-9295-5fb356575e3a.jpg?alt=media&token=d71665e9-8e8e-4350-8250-bf6b15143d0c","id":"2134adeb-8c2f-495f-9295-5fb356575e3a","width":3000,"height":1687,"filename":"envimo-nosteps.jpg","type":"image/jpeg","caption":"ENVIMO Stock Adjustment Outcome","border":false}]}
```

### Learnings & Next Steps

### The project underscored the importance of seeking feedback early and often. Regular check-ins with the product owner were crucial, especially when a shift in direction midway through the project was necessary. In the future, I would like to gather feedback from the actual retail staff to determine if they found the new feature useful and if it streamlined their stock management tasks. Ideally, I would like to know if it made their work easier overall. This experience has taught me the importance of adaptability and the value of iterative design in achieving project goals.

ENVIMO – How working with mobile constraints and slow mobile devices resulted in a more seamless product

UX Generalist

Adobe Design Achievement Awards

Collaborated with businesses and software developers to deliver a much needed feature to ENVIMO, a multi-platform POS solution for fashion retail. Enabling fashion retailers to allow their staff to adjust stock in-store with confidence.

This project saw various usability testing, and multiple UI iterations before product delivery.

ENVIMO Stock Adjustment

Re-thinking news consumption; building healthier relationships with our phones.

mindy – mindful news consumption

Mindy

Helping disaster-affected individuals get timely appropriate help, when they need it most.

Homebase

› Performed a design audit on EdSmart's Enterprise SaaS platform prior to launch.
› Re-designed the UI that allowed for a seamless and consistent experience.
› Collaborated with Head of Product and engineering team in creation of a module for the enterprise platform.

UX/UI Designer

› Worked closely with stakeholders during projects and communicating clearly from start to end.
› Delivered numerous multi-platform projects in a collaborative agile environment which involves conducting research, producing wireframes, user journeys, and user flows with usability tests.
› Design process included low and high fidelity design and prototyping ensured a high-level of quality.
› Understanding of Human-Centred Design and Design Thinking enabled me to quickly understand problems and empathise with users.
› Taught design-related topics for development team which allowed them to further improve on the product.
› Constant collaboration with development team allowed for a more consistent interface and experience.
› Facilitated workshops both internally and with customers that helped shaped multiple interfaces.
› Spearheaded the implementation of a design system for organisational use.
› Iterative design process ensured that designs worked well for different businesses.
› Designing web, mobile, and desktop applications – keeping accessibility (WCAG) as a priority.
› Ensured branding consistency across all products and visual medium.

Apparel21

Produced both video and stills for music videos, event coverage, corporate shoots.

Director of Photography

› Advised people on the right media equipment to use for their photo and video shoots.
› Provided a high-level of customer service for return patronage.

Clarence Wee

Projects

Side Projects

Work Experience

Education

Contact