︎

Hello 👋️ I’m Jessica,
NYC based Product Designer and Creative Technologist

I solve problems through product building and management with my interdisciplinary and transdisciplinary practice which involves computing, design, art, and business. 

👾 tech         💭 design                🎮 media             💸 business


Select Projects

I bridge the gap between product and experience design.

My work is at the intersection of emering media and purposeful applications. 


PRODUCT SERVICE DESIGN ⎤
Design + Tech ⎤
Management ⎤
SAGE
JAN - MAY 2021
Sage is an app that helps home cooks efficiently find ingredients in their city, including necessary information, and usage tips.
Case Study

ROLE Designer, Researcher, Ideation, Presenter, Result analysis
TOOLS Figma, UsabilityHub
PROCESSES
Design Thinking
Product Design
UX/UI Design
User Research
Personas
A/B testing
ADA


Pitch deck 

Scroll down for the full case study


Case Study



Objective

Ingredient Finding Mobile App


Outcome
Clickable Prototype

Process


Interviews


Personas



Design


MVP Features Matrix

Userflow Chart


Early sketches | Wireframes





A/B Testing


Usability Hub Tests
I tested a series of our wireframes with usability hub and asked the users to:
  1. navigate the wireframes
  2. complete the task of looking up the availability of ingredient “ajwain seeds” in the area.

Version 1.0.0

Version 1.0.1

Testing results

  • 80% of our user pool falls into the age range 20–40. This reflects our personas and target user age group, but we still included a few users from an older age group to consider these other perspectives.
  • The results offered us a few interesting discoveries. The majority of the users are able to navigate through the frames until the ingredient page, where they have to click on the drop-pin icon to find the ingredient on the map. Only 57% of the users on that page successfully completed this step. This suggests that perhaps the icon itself is not clear enough to communicate its function and that perhaps we would need texts to accompany the icon or a separate button with texts.
  • This has also brought to our attention that perhaps a shortcut button to the map search should be included on the home page, potentially in place of the “drop a pin” button. In addition, we also realized that the burger menu on the home page could also cause confusion because its function is unclear. It almost serves as a stand-in button-for-all at this moment. In our next iteration, we could consider replacing the burger menu with a user profile button. More iterations and tests are needed for us to fully determine the changes in this area.

Version 2.0


Info page                    List to share




Version 2.1

Onboarding



User testing synthesis



Testing results ︎︎︎

After reviewing the testing results, we decided on the following as the guiding principles for our design
Design Principles

Accessibility, Aesthetic- Confirmation & Consent, Usability Effect,  Hierarchy of Needs

Aesthetic Principles

Highlighting (such as making a button green to be pressed), Iconic Representation (icons across the page for similar indication of ingredient, map, home, back…)

Information Display Principles

Progressive Disclosure (For the ingredient page) Feedback Loop (adding info on map + reusing it in the ingredients search) Chunking (combining many units of information into a limited number of units or chunks, so that the information is easier to process and remember. ie: recipes, ingredients, cuisines)


Reflection


One of the challenges that have surfaced during the creation of our wireframes has been how best to approach (or avoid) design iteration without a clear brand identity. There is a balance to be struck between the focus on usability at this stage, and the need for certain basic design elements that can be used to inform the user in important ways through emphasis, de-emphasis, color coding, imagery, iconography, etc. It is rather easy to get hung up on even the most simple methods for indicating the brand mark (“why is it a circle?”), color hierarchy (“why green?”, “lets stay away from red”), tints, drop shadows, etc. Without a clearly defined brand identity, these decisions risk taking on a lot of undue significance and attention when it appears that our primary concern at the wireframe stage is with how well our product functions.
As designers, we always strive for the perfect combination of form and function (except when we don’t), but this is easier said than done, and so this feels like an important inflection point.

©2022 Jessica Jabr –  All Rights Reserved
Copyright of Original Works © 2022 Jessica Jabr

  Spotlight                          ︎ ︎ ︎ ︎︎