Insights Sip
Case study

20-01-2020

The perfect know-all buddy 👨🏽 for marketers

A chatbot for a well loved beverage company

Timeline
8 weeks

Deliverables
︎ Product design strategy
︎ Data storytelling
︎ User experience design
︎ User interface design
︎ Design system
︎ UX copywriting
︎ Illustration

⚡ Mission


Marketing managers need to know their sales data back to front. They need a combination of resources and support to grow revenue. The biggest bottleneck is combing multiple large resource files and analysing that data to create future business strategies. My mission was to find a solution that could provide analysed data quickly. I wanted to design an engaging product for users so that they may use it more and more, reducing their time and effort to build new strategies.

Note: All visuals used in this prototype are attributed to Freepik and Unsplash.


📦 Outcome


I designed a chatbot for a multi-billion dollar beverage company’s marketing team from the ground up by creating a scalable design system inspired by their brand guidelines. I then built highly user-centric wireframes and the UI while writing the product’s UX copy.


✨ Impact


Two weeks after the chatbot’s launch, 80% of the potential users had already downloaded it, and almost half had completed at least one quiz.


ℹ️ Introduction


The Business Unit I was designing for consisted of about 700 marketing managers. For the managers, it is essential to stay informed about user habits when they consume these beverages and what they are most likely to drink at a particular occasion, location or time.

I decided to gamify this app as gamification helps information retention for extended periods. It also builds a positive, rewarding experience that encourages users to return to the product making a deeper connection between the marketing managers and their customers.

I also worked closely with the end users to understand what they needed from this mobile app and what would make them return to it.


🎯 Challenges


There were several issues that the client wanted to tackle through this app. After discussing with them and the users, I decided to solve the three biggest challenges through the app.

  1. It is difficult to differentiate between different drinking moment categories and understand customers and their needs within each category simply because the database is extensive.

  2. Due to the complexity of the database, it isn’t easy to find relevant information within the same file. Skimming multiple files to find a minor data point is also time-consuming.

  3. An app can become tedious and irrelevant quickly if users are not motivated enough to use it regularly. How do I make a relevant product that users want to return to again and again?




✍🏽 Process


To begin with, we compiled a few KPIs that included the number of app downloads and quizzes played in the first two weeks of the launch.

I built a design system and began mapping the UX journey, which included the app’s gamification. As part of gamification, I created drinking moment quizzes and polls, which users could participate in and earn points. Then they could compare their points on the leaderboard and compete with their friends and colleagues. The client decided to give out Echo Dots to the winner to increase user engagement. Lastly, during a user testing session, I found that users would enjoy sharing their content with their peers; hence, the Moments flow was born. In this flow, users could upload their photos and like and comment on other users’ photos, thus increasing user engagement.

Then I created the screen wireframes, prototyped them and added the design system to convert them into the final UI.

There were a few hiccups along the way, of course. One was when I decided to become a UX copywriter for the project due to unforeseen circumstances. Another was when I redesigned the entire app just a few days before the development began due to an unexpected client request. These are great stories, so ask me about them, and I will tell you over a call!


👉🏽 Conclusion


After working with the tech team tirelessly, I was able to translate my designs into the final product well in time. As a result, within the first two weeks, 80% of the potential users had downloaded the app. While at least 40% of the users had completed at least one drinking moment quiz, making the product a big success.



 Want to work together? Want to work together? Want to work together?

Let’s chat!





Whistl
Case study

07-08-2021

Your Personal Mental Gym

Designing a native app for Google Playstore

Timeline
8 weeks

Deliverables
︎ Product design strategy 
︎
Data storytelling
︎ User experience design
︎ User interface design
︎ Design system


︎︎︎ Download on Google Playstore

ℹ️ Introduction


Just as our bodies need exercise to stay fit, so do our minds. There are thousands of physical fitness gyms worldwide but not a single mental fitness gym. Whistl’s idea was to become the first mental fitness gym in the world. Using Whistl, users receive customised daily workouts based on their goals and needs.



📦 Scope of the Project


My goal was to visualise an easy-to-use product for Whistl’s users to engage them in daily well-being activities. It would encourage them to return each day.

I designed a native app for Android from the ground up and created the design system, wireframes and user interface of the app. I built a future-proof design system for Whistl. It would let the product grow seamlessly by creating elements (UX tokens) that Whistl’s design team could use in all possible use cases of the product.




✨ Impact


Since its launch, Whistl has been selected for the prestigious NASSCOM Start-up Incubation Program and downloaded and used by thousands of users across the globe.


✍🏽 Process


When Whistl came to me in 2020, they had an idea of how the app would work. They wanted me to build user flows based on their concept and design a happy, cheerful, productive product.



I began by looking at how the existing products in the market had built their identity. As Whistl had a different goal than most meditative apps, they wanted a brighter and more actionable visual style. Headspace is a wonderful example of this theme. Based on the client’s brief and the benchmarking exercise, I began exploring the design system and the wireframes.



✍🏽 Design System


To build the design system, I began by creating a style guide which included the colours, the typefaces and the photography style.


Next, I used the style guide to build the UX tokens that designers and developers can replicate to make any screen.



✍🏽 Wireframes


Since the most crucial goal was to encourage users to engage with the app daily, I focused on three things to drive continuous user engagement.

  • A seamless onboarding experience: I built a hassle-free experience with user-friendly text blobs on three screens to define the app’s goals. I also allowed users to jump into the Sign In or Sign Up screens at any time to save time if they wished to.

  • Create a unique experience for each user: Since Whistl works on a user’s Wellness Profile, it gives each user a different target to work with. Users can participate in quizzes to update their Wellness Profile from time to time, allowing them to receive customised exercises based on their needs and goals.

  • Gamify the app: Gamification is a known strategy to improve user engagement by rewarding positive user behaviours. Therefore, users add another day to their streak each time they complete a task. They also move up levels when they can retake the Wellness quiz to improve their overall score.

Wireframes


✍🏽 Interface Design


Finally, I combined the design system and the wireframes and designed the UI screens and a working prototype.


👉🏽 Conclusion


While building a new product, creating a replicable design system is essential. A design system can improve productivity and design turnover time for a company. It also provides consistency and creates a narrative that users can connect with on each screen.


 Want to work together? Want to work together? Want to work together? 
Let’s chat!




University of the Arts London
London College of Communication

16-06-2022


Exploring Alternative Design Methods

Masters major research project into design methods

Timeline
20 weeks

Deliverables
︎ Background and user research
︎ Planning a design thinking process
︎ Building wireframes
︎ Creating visual identity and language
︎ Design the product UI


︎︎︎ View Figma Prototype

︎︎︎ Download Report


⚡ Premise


Consciously designing products that are good for the user, society, and the environment is an integral part of being a responsible designer. To create responsibly, a designer needs to have a variety of design methods in their toolkit to customise products based on different needs.

Through this project, I want to conceptualise an easily accessible space for designers where they can learn about alternative design methods and ethical principles that guide them.


📦 Scope of the Project



This project aims to bridge design and research by making design research freely accessible to all designers. There are two goals for this project:

  • Conceptualise a digital platform for visual designers that they can use to explore alternative design methods.

  • Consolidate a set of ethical guidelines relevant to individual design methods so that designers can make ethically informed decisions.


✍🏽 Process


There were four questions I wanted to answer through this research:

  • How do designers explore different design methods?

  • What does a visual designer’s design process look like?

  • Investigate whether visual designers explore and incorporate different design research methods for design projects.

  • How do designers use ethics in their design research and discuss ethical principles with their clients and colleagues?

I followed the Double Diamond Design Process by the Design Council UK to answer these questions.


Discovery phase

I set clear goals for this research project during this phase. Beginning with preliminary research, I reviewed books, journals, and websites and talked to designers. A significant inspiration for this project was the Map of Design Methods based on the book - Universal Methods of Design by Bella Martin and Bruce Hanington.

Definition phase

User insights defined goals better, and I reframed the research question once more.

Development phase

In this phase, I began visual explorations of the product. It started by building a brand identity encompassing the brand visuals, language and identity.

Delivery phase

This phase was speculative since it was out of the scope of the undertaken project.



✍🏽 Interviews


To conduct interviews, I developed a set of guidelines to follow during the interviewing process:

  • Create the interview, so it takes less than 30 minutes to finish.

  • Due to time constraints, asking as many relevant questions as necessary is essential, so make sure to form comprehensive and concise questions.

  • Create a consent form outlining the ethical guidelines I can follow during the interview process (I sent them along with the interview invitations).

  • Ensure that the interview does not contain any personal information about the participants during the audio recording.

  • Send invitations to potential participants with an explanation of the project and relevant information about the interview.



✍🏽 Visual Research


The primary sources of visual inspiration for this project were Lance Wyman's Mexico 68 brand language and identity and the visual style of the early 80s of the Memphis Movement, and the quintessential new avenues of entertainment like the arcade and disco music.



✍🏽 Explorations







✍🏽 Final Designs




👉🏽 Conclusion


Visual designers have been excluded from the core design research conversation in professional settings. It’s time to change that and equip designers to plan a design process based on solid design research.


✨ Assessor’s Feedback


28-06-2022

“Anushka, this is a high-quality polished submission that situates itself within and demonstrates critical awareness of interdisciplinary research methodologies. Your inquiry responds to a gap in the current working practices of conscious and ethical design, considering the need and broader impact within the industry. You have integrated insights and findings from your research well in your report, discovering issues practitioners experience in the field, and combining these with applying a range of appropriate research methodologies. The contextual parts of your report are well referenced and evidence a good understanding of the design process, focussing on communication design activities and their centrality to both research and outcome.

Through your project output, you have considered how to best engage with your audience, involving them in your process and considering effective and appropriate communication strategies through the final digital application. You have clearly integrated your practice within the responsible design methodology, and your output uses innovative industry-standard methods, tools and processes, employing the double diamond method effectively. You have positioned your output as distinct from others in the space, however, further inclusion of visual communication theories and practices could have been beneficial to integrate within your design approach to differentiate your project further.

Well done on completing the MA.”


 Want to work together? Want to work together? Want to work together?
Let’s chat!






Map Style Editor
Case study

10-03-2022

Creating a Photoshop for maps 💡

A web application for HERE Technologies

Timeline
24 weeks

Deliverables
︎ Product design strategy 
︎ User experience design
︎ User interface design 
︎ Design system 
︎ User research



⚡ Mission


Modern-day cartographers and car makers need a solid product to build complex maps. A product that lets them create maps on scale and gives them control over each visual element of their map. My goal was to redesign this product from scratch, make it more user-friendly and simplify it. This way, users could focus on building high-complexity maps rather than understanding the tools themselves.


📦 Outcome


I redesigned the navigation tabs to give a visual hierarchy previously absent. Then added a dynamic highlight in these navigation tabs to link them to visual elements of the maps.

I also designed a new POI icon selection flow. It enabled users to select multiple icons and replace them with new ones in one go making the process faster and more scalable than before.


✨ Impact


Since implementing these new designs, users reported through usability testing interviews that they could ‘see’ tools more efficiently and completed their tasks much faster.



ℹ️ Introduction


HERE Technologies is a data platform company that provides a platform to buy, sell and license location data. It gives platform products that let users create, visualise and edit their location data.

HERE Style Editor is a web application that lets users create, style and customise maps.

In-house cartographers, developers and car manufacturing clients use this tool to create new customised, detailed and complex maps based on their unique brand styles.


🎯 Challenges


Users face significant visual challenges when using this application. I found these problems by exploring the application and conducting user research by shadowing users as they performed specific tasks. After discussing with the PM and the product team, I decided to prioritise and solve the three most critical problems the users face. I’ve discussed these problems below:

  1. Poor visual hierarchy makes it difficult to navigate within the property panels.

  2. The application’s complexity makes it hard to link layers and attributes on the map to the navigation panels on the left.

  3. The current map editing process is laborious and time-consuming due to the absence of a bulk editing feature. It results in poor scalability of the map editing process.



✍🏽 Process


Goal 1

My first goal was to address the visual hierarchy within the panels. In the older design, the users needed help differentiating between different properties and attributes within the navigation panels.

After using the tool, I realised the most prominent issues users faced in the visual hierarchy.

  • There were no folder levels, meaning the inside content looked the same as the folder heading due to a lack of indents. It made finding any attribute or layer in a long list daunting.

  • There wasn’t enough visual difference between selected, unselected and disabled states in the list. It made finding the selected item in the panel very slow.

  • The distance between the main list items and within a folder’s contents was very little and without proper demarcation. It made differentiating between different list items a cognitively heavy task.

I incorporated my research and redesigned each panel.


Goal 2

My second goal was to establish a clear link between the map and the tabs on the left. To build that link, I explored dynamic highlighting within these tabs. Whenever a user hovers on the map, the hovered-upon layer and its attributes are highlighted on different panels.

After exploring different ways to highlight, I chose an orange outline highlight. An orange dotted line denotes that the hovered-upon layer falls within the highlighted folder. In contrast, a solid orange outline is a highlight to indicate the hovered-upon layer itself.



Goal 3

Creating a new feature where users could update multiple identical icons in a single flow was essential to make the map customisation scalable.

My third goal was to create a UX flow and UI screens for this feature.

I began by creating wireframes of the workflow. (View visuals upon request)

  • The users would select change icons in the Attributes Panel or click on any POI icon on the map to enter this flow.

  • Once in this flow, users will go to an icon selection screen, which will let them select all icons they want to change.

  • Once selected, each grouped icon will sit together, and users will have the option to unlink individual icons from the group.

  • Then, when users choose to upload a new file, they can select from different icons from HERE’s icon library or even upload their icons.

  • Once users make these bulk editing choices, they can save them and view them on their maps.

Then I created the UI screens for the entire flow.

The biggest challenge when creating this flow was exploring the edge cases since even the most minor edge case could have enormously impacted the flow’s scalability.

  • In one such case, I convinced my team to give users more choices in this flow. Once users select an icon, all the POIs with identical icons are selected. Users can retain the same icon for POIs by individually unlinking them from the list. With this function, users were able to customise their POI icons at an individual level.

  • In another case, I had to decide when users could relink an unlinked icon. I designed it so that the relinking function would be destroyed if users updated the main group icon.

  • I chose to list the grouped icons together in the third case instead of a vertical list. I did this because when customising a large map, there would be innumerable grouped icons and wading through that list would become very difficult. Even a solid visual hierarchy would only work sometimes. So placing POIs together will let users know they all fall under the same group, making navigation easier.



👉🏽 Conclusion


After months of designing new visual designs and features, I worked alongside the tech team to build these visuals into the application. It was necessary to work together since many visual elements were separate from the HERE design system. I had to ensure they looked and worked as part of the system.

After implementing the new designs, we tested the Editor with users to see how they reacted. Users reported finding tools with more ease. It directly helped them complete their tasks faster than before. While using the icon change workflow, users could make more changes in their maps with fewer clicks, enabling them to work more efficiently.

Check out the Style Editor for yourself and build custom maps!

 Want to work together? Want to work together? Want to work together?
Let’s chat!






CSF
Case study

15-03-2020

State of the Sector Report - Private Schools in India

Creating a digital report for Central Square Foundation along with a style guide and a data visualisation framework

Timeline
12 weeks

Deliverables
︎ Design strategy
︎ Data storytelling
︎ Report design
︎ Report style guide
︎ Data visualisation guidelines


︎︎︎ Download Report

ℹ️ Introduction


Central Square Foundation (CSF) is a non-profit organisation that aims to improve and transform the school education system and improve the learning outcomes of all children in India. The state of the private school sector in India is underregulated, leading to poor learning outcomes among private school-going children. To bring more light to and address this problem, I created a data-led report aimed at Indian policymakers while working with HumanX.



📦 Scope of the Project


I designed a digital printable report for CSF from scratch by creating a style guide inspired by the CSF brand guidelines and then translating them into a data visualisation guide. I also made individual data visualisations and page layout templates resulting in a report that is engaging and easy to understand.



✨ Impact


By conducting supporting research in the private school sector in India, CSF helps fill gaps in the data and further identifies key actors, systems, causal pathways and effective interventions in the industry.


✍🏽 Process


Through the research, I wanted to answer the following questions:

  • How to design a report that remains engaging throughout its entirety?

  • How to visualise complex data that readers can scan through quickly?

I performed a thorough benchmarking exercise of digital reports with an inclination towards data visualisation and began my explorations.

To create the style guide, I started with the cover design of the report. I used this cover to explore colours, typefaces, photography, iconography and grids. I researched multiple visual styles and narrowed them down to one. Once I finalised these elements, I explored the data visualisations so that they fit in with the style guide, were immersive and easy to understand.


✍🏽 Final Designs


Here are the final designs of the data visualisation and the entire report.




👉🏽 Conclusion


It is essential to look at a visual report holistically and build a design system that we can mould into infinite possibilities that tell the same story. It helps to craft a narrative that readers can understand through harmonious visuals and makes the story more compelling, thus helping readers engage with it better.

 Want to work together? Want to work together? Want to work together?
Let’s chat!





© Anushka Shukla. 2022