Natalie Chaudhari's profile

Swiggle - UI/UX Interaction

Swiggle
UI/Interaction

Shopping is fun. But sometimes we spend a lot of money buying things. 

Thats where Swiggle comes in. Swiggle tracks the price of products users have bought and if the price drops Swiggle gives the user a refund based on the price drop. 

Many retailers have price protection policies. That means when prices drop, they can refund you the difference. Swiggle streamlines this process and allows users to save money when they purchase products. 

My Role:
UI/Interaction Designer. My tasks included research, wire framing, user interface design, user testing and prototyping.

Tools Used:
Adobe Illustrator, Adobe Photoshop, Figma, Sketch (Wire framing), Paper Prototyping (User Testing and Validation).
Designed Interactions and Interface
Discovery & Research

I had two main challenges (that were related) which we had to overcome in Swiggle's case:

1) Convincing users to connect their credit/debit card to Swiggle

2) Giving users a sense of trustworthiness and reliability. 

Additionally, the combination of a fixed deadline, app store submission time, user testing and validation meant that I needed to get feedback as soon as possible.

Developing Personas
Based on the research found in the discovery period of the project I developed personas. Personas are users whose goals represent the needs of our target users. An understanding of our target audience was fundamental to creating Swiggle's interface. Personas allow me to build empathy, gain perspective and identify features. It also prevented me from creating self-referential designs.
Personas created to predict the user journey
Carrying out the 5E Analysis was the next step I took in understand our personas. This model allowed me to predict what our users wanted from Swiggle. It also helped me understand how users would interact with Swiggle and uncover opportunities for improvement.
Storyboarding and UserFlows

Keeping our personas in mind, I story boarded the user’s behavioral flow from App Login to App Exit with Swiggle integrated in their behavioral decision making. These flows helped in defining the necessary features required to successfully navigate through the app. Also, due to time constraints the team had to put some features on hold and this process allowed us to priorities features of the application that were most important. 

After narrowing down the features necessary for Swiggle to function through storyboarding, I created a journey map to organise the pages, information, and navigation of the app.
Designing the interfaces

Low Fidelity Wireframes
Before I was hired, there already was a version of Swiggle that was available to users. This was very helpful as there already was some research done in user behavior which saved me some time. I was hired to design the next version of the application and that process began with identifying the design flaws of the previous version.

This process began with sketches on paper and paper prototypes. We user tested these among ourselves and found flaws that were improved. Once we were confident with the paper prototypes I translated them into digital prototypes that I could user test with a wider audience. This was primarily done to gather user feedback and opinions. Sketch, Figma, Photoshop and Illustrator were used to create the mockups.
Design Principles
There were some of the design principles we used to ensure a seamless user experience.

No splash screens
I stayed away from splash screens. The splash screen delay did not add value to the user journey as it displayed no information. I wanted the user to feel like no time was being wasted in servicing their needs. 

Additionally, splash screens are used as a branding tool but in this case it would hamper the user journey.

The absence of a splash screen meant: instant, usable UI

Simple onboarding with simple illustrations
With user attention spans being short, I used  well designed illustrations to reel users in keeping in mind that first-time users might require guidance, but not information overload. 

The illustrations explained the value proposition of Swiggle and also explained the functioning of Swiggle in a simple way.

They were designed to depict humans and not inanimate objects so that users could relate to them.

Data-vis
Users come from various backgrounds and so we needed to devise visualizations that would be accessible and legible to all of them. They were designed to appeal to as many users as possible by keeping them simple.

We user tested visualizations with users of varying exposure to data visualizations and then improved the visualizations to meet the needs of users who have no prior experience thereby addressing the minimum requirement of users. 


Fitts Law
Fitts's Law provides a model of human movement, established in 1954 by Paul Fitts, which can accurately predict the amount of time taken to move to and select a target. 

The aim was to reduce the time it takes for users to access and press buttons on the app screen. 

Which is why the navigation and menu buttons were places on the bottom of the screen. Allowing users to use just one hand to navigate the application.
User Testing

After creating the low fidelity prototypes we user tested then with a group of 6 participants. Each participant was allowed to interact with the prototype and their responses (qualitative and quantitative) were collected and analysed.
High Fidelity Wireframes

Using insights from the user testing session, interactive high fidelity prototypes were developed using Sketch and Figma. These prototypes were then tested again with the same 6 participants and an additional 6 new participants. 

After the second round of user testing we found certain areas that needed attention. A lot of users did not understand the product screen and some users who would recommend Swiggle to their friends and family wanted a share button in the application so they could do so. These suggestions were then combined with our own improvements and Swiggle was refined until we felt it was ready for the developer hand-off. After this, all the necessary screens for the developer were created. 
Dev Handoff & Conclusion
Once the mockups and screens were approved we collated our notes and assets for the developers. Notes on animations, transitions (along with videos) were compiled with specific technical considerations (such as flexbox and fallback fonts) were sent to the developers.

What I learnt
Working on Swiggle taught me how to entice users. Understanding what users trust and mistrust was invaluable as I now use that insight in future projects. Designing interactions that lead to gaining user trust was challenging but extremely rewarding as well.  We had an advantage of the application already being branded so no time was spent in making it ‘look a certain way’. This allowed me to concentrate on solely improving the User Interactions and Experiences.
Swiggle - UI/UX Interaction
Published:

Swiggle - UI/UX Interaction

Published: