• Home
  • Projects
  • About
  • Resume
  • More
    • Home
    • Projects
    • About
    • Resume
  • Home
  • Projects
  • About
  • Resume

Task Flow

The task flow I created was simple and easy to follow. Keepings in mind that my target users would be limited in English proficiency- I had to make sure the app wasn't too overwhelming to use. With my task flow in hand, I could now move on to the next phase...developing my ideas.

Develop

In the Develop phase, I translated the defined problem into actionable design solutions through sketching, creating wireframes, and developing prototypes. These visual representations allowed me to explore various ideas and iterate quickly. I conducted user testing sessions to gather feedback on the prototypes, refining the designs based on user insights and preferences.

UI Inspiration

I gathered inspiration from Dribbble, Mobbin, and Pexels. 

UI Inspiration

I pulled inspiration for the layout, components and video call interfaces. 

This process inspired my sketches and wireframes.

Sketches

Version 1 Wireframes

Frist Stage of Wireframing

After finalizing my Version 1 Wireframe Prototype, I prepared for testing. To ensure clear and consistent testing, I created a Testing Script detailing the procedures to confirm my design assumptions and the fluidity of the overall flow. Due to time limitations, I conducted tests on five tasks with five participants using my Figma prototype.

Version 1 Prototype

Usability Testing Round 1

  •  Out of the seven tasks, my testers had absolutely no issues with three. However, task 1 was completed by all testers but ⅖ struggled a bit 
  • task 3 was also completed by all testers but ⅗ struggled a bit too. 
  • For task 5, ⅘ testers struggled and 1 failed . 
  • For task 6, there was one tester who completed the task with no issue at all whereas ⅖ struggled and another ⅖ failed. 

Testing Script

Design Prioritization

Task 1 - Log in screen redesign login interface 

Task 2- Request Lang Assistance 

Task 3- Type of service 

Task 4- Request ass now 

Task 5 Choose language

Task 6- Add doctor arl to the call

Task 7- End call 

Version 1 Wireframes

Next Stage of Wireframing

After finalizing my Version 2 Wireframe Prototype, I prepared for testing again. Due to time limitations, I conducted tests on five tasks with five more participants using my Figma prototype.

Version 2 Prototype

Usability Testing Round 2

  • Task 4 Requesting Assistance Now- ⅕ struggled slightly
  • Task 7 Rating the app- ⅕ struggled slightly
  • Task 6 Add Doctor to Call-⅕ failed the task


Testing Script

Design Prioritization

 Task 1 - Log in screen redesign login interface 

Task 2- Request Lang Assistance 

Task 3- Type of service 

Task 4- Request ass now 

Task 5 Choose language

Task 6- Add doctor Carl to the call

Task 7- End call 

Finalized Wireframes

What's next?

After several iterations and incorporating the feedback from fellow designers, I transitioned into branding- this would bring my design to life!

Version 3 Prototype

Deliver

Finally, in the Deliver phase, I focused on bringing the chosen solution to life by defining its visual identity and crafting a compelling marketing strategy. 

Brand Identity

Mood Board

Accessibility

Mood Board

I pulled images that would make a user feel encouraged, understanding, accessible, empowered, transparent, trustworthy, comprehensive, and supportive. 

Typography

Accessibility

Mood Board

I chose the Rufina typeface for the informational design aspect of my app.

Accessibility

Accessibility

Accessibility

The accessibility test generated results that told me that the typography I choose passed for font sizes above 11px and aligned left.  

Neighborhoods

Color Injection

Accessibility

I extracted colors from the mood board images to begin the process of finding my brand colors.

 

Branding Process

Color Pallet

Color Injection

Color Injection

This color pallet represents the colors used in the app’s background, highlights, accents, functions, and informative design elements. 

Color Injection

Color Injection

Color Injection

Color injection plays a crucial role in shaping the overall look and feel of the brand. Bold and dynamic colors can grab users' attention, draw them in, and encourage engagement with the app's interface and content. 

Final Product

Use the embedded content below to interact with the final product. Use the arrows on the top right to access the design in full screen mode. 

Interactive Prototype

After finalizing the design, it was now time to think about how to attract users to the application. The best starting point was to create a responsive marketing site. 

Marketing

Getting Users to Download

A marketing site allows me to reach potential users directly. Doing so   I can provide a seamless and engaging experience that highlights the unique points of my app, ultimately driving more downloads and user adoption.   Here you can see a mobile and desktop (below) version of the site. 

Mobile
Desktop

Desktop Marketing Site

Much like the importance of marketing, I also had to explore the thought process behind multi-platform design. Although I created a mobile application- there was a thought that users may need to access the application from alternative platforms. With this thought I began designing my app for tablet. 


My reasoning behind choosing tablet was that more of the design can be viewable on one screen entirely. 

MultiPlatform

Gal App on iPad 11''

    Key Learnings

    During these 10 weeks, I've learned a lot about app development and design. The most important thing I've learned-however-is about pivoting. In app design, pivoting is not just okay; it's often essential for success. As I've experienced firsthand, the digital landscape is constantly evolving.  Remaining rigid in my initial design approach could mean missing out on opportunities or failing to address emerging needs. By being open to pivoting in app design, I can adapt to changing circumstances, incorporate user feedback, and refine my product to better meet the demands of the market. Whether it's adjusting features, redesigning user interfaces, or even changing the app's core functionality, pivoting allows me to stay agile and responsive. 

    Next Steps

    After completing all initial design tasks, I can consider several next steps to further enhance my app: 

    •  I'll continuously refine and iterate on the design based on user feedback, emerging trends, and technological advancements, focusing on improving user experience and addressing any usability issues. 
    •  I'll explore opportunities to add new features and functionalities to enrich the user experience and differentiate my app from competitors. 

    These steps will help me continue evolving and improving my app to meet user needs, stay competitive, and drive long-term success. 

    Tarot Cards of Tech

    Jassi Kaur

    Copyright © 2024 Jassi Kaur - All Rights Reserved.

    Powered by

    This website uses cookies.

    We use cookies to analyze website traffic and optimize your website experience. By accepting our use of cookies, your data will be aggregated with all other user data.

    Accept