<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:media="http://search.yahoo.com/mrss/"
	
	>

<channel>
	<title>UX Portfolio</title>
	<link>https://maxxisdigital.com</link>
	<description>UX Portfolio</description>
	<pubDate>Mon, 16 Feb 2026 23:42:58 +0000</pubDate>
	<generator>https://maxxisdigital.com</generator>
	<language>en</language>
	
		
	<item>
		<title>Slideshow</title>
				
		<link>https://maxxisdigital.com/Slideshow</link>

		<pubDate>Mon, 13 Mar 2023 03:37:14 +0000</pubDate>

		<dc:creator>UX Portfolio</dc:creator>

		<guid isPermaLink="true">https://maxxisdigital.com/Slideshow</guid>

		<description>
	


Hello, I'm Ellis, a data-driven Product Designer passionate about accessibility.


  
  

	





︎
Photo by Ellis Aguilar; Costa Rica


</description>
		
	</item>
		
		
	<item>
		<title>Short Bio</title>
				
		<link>https://maxxisdigital.com/Short-Bio</link>

		<pubDate>Fri, 17 Oct 2025 16:14:47 +0000</pubDate>

		<dc:creator>UX Portfolio</dc:creator>

		<guid isPermaLink="true">https://maxxisdigital.com/Short-Bio</guid>

		<description>

	




&#60;img width="1899" height="809" width_o="1899" height_o="809" data-src="https://freight.cargo.site/t/original/i/8e795ee69151dfb540e079fd377609589b2d607ade31e012a5ba9c3edb501726/site-blurb2.1.png" data-mid="241300895" border="0" data-scale="83" src="https://freight.cargo.site/w/1000/i/8e795ee69151dfb540e079fd377609589b2d607ade31e012a5ba9c3edb501726/site-blurb2.1.png" /&#62;


	

&#60;img width="907" height="907" width_o="907" height_o="907" data-src="https://freight.cargo.site/t/original/i/6e1cd207d7d1a0e605a57baff4cab905c96779333274bc45a398c4be271eb0a4/ellis-action-shot.png" data-mid="241198617" border="0" data-scale="92" src="https://freight.cargo.site/w/907/i/6e1cd207d7d1a0e605a57baff4cab905c96779333274bc45a398c4be271eb0a4/ellis-action-shot.png" /&#62;


</description>
		
	</item>
		
		
	<item>
		<title>Featured Projects</title>
				
		<link>https://maxxisdigital.com/Featured-Projects</link>

		<pubDate>Mon, 13 Mar 2023 03:37:15 +0000</pubDate>

		<dc:creator>UX Portfolio</dc:creator>

		<guid isPermaLink="true">https://maxxisdigital.com/Featured-Projects</guid>

		<description>Featured Work




	

    
      
        Progress Tracking
        ︎New design system component
        @ The Pill Club
        &#60;img width="6000" height="4664" width_o="6000" height_o="4664" data-src="https://freight.cargo.site/t/original/i/8df6c223e3898f2993ee2a3dafebe8843f23a9a5009378503990076b26fce7a1/ux-thumb3.png" data-mid="171867338" border="0"  src="https://freight.cargo.site/w/1000/i/8df6c223e3898f2993ee2a3dafebe8843f23a9a5009378503990076b26fce7a1/ux-thumb3.png" /&#62;
      
    

    

    
      
        Skincare Packaging
      

      
        ︎User-Centered Research
      
      

      
        @ Northwestern with P&#38;amp;G
        &#60;img width="6000" height="4664" width_o="6000" height_o="4664" data-src="https://freight.cargo.site/t/original/i/dc8228d6664133a0a89031ee9d5a8ee11d9c95aaa696696bac459a52402e4a26/ux-thumb-pg2.png" data-mid="241547577" border="0"  src="https://freight.cargo.site/w/1000/i/dc8228d6664133a0a89031ee9d5a8ee11d9c95aaa696696bac459a52402e4a26/ux-thumb-pg2.png" /&#62;
      

    

  
	

    
      The Move

      ︎Prototyping with GenAI
      @ Northwestern CS

&#60;img width="6000" height="4664" width_o="6000" height_o="4664" data-src="https://freight.cargo.site/t/original/i/c11db28db9e1265648d751d1c501a910cb5cfb40f9fa5e2463c01fcbad7b5f2b/ux-thumb-the-move.png" data-mid="244909559" border="0"  src="https://freight.cargo.site/w/1000/i/c11db28db9e1265648d751d1c501a910cb5cfb40f9fa5e2463c01fcbad7b5f2b/ux-thumb-the-move.png" /&#62;

    
    
&#38;nbsp;


        Dermatology On-boarding Funnel
        ︎UI pattern design &#38;amp; prototyping
        @ The Pill Club
        &#60;img width="6000" height="4664" width_o="6000" height_o="4664" data-src="https://freight.cargo.site/t/original/i/efc6384e0fc7c861a0e8abd8d878108d2a5dcf3aea7bacd6715a002735078a3c/ux-thumb-derm-2.png" data-mid="241547581" border="0"  src="https://freight.cargo.site/w/1000/i/efc6384e0fc7c861a0e8abd8d878108d2a5dcf3aea7bacd6715a002735078a3c/ux-thumb-derm-2.png" /&#62;
      


    



    

  


</description>
		
	</item>
		
		
	<item>
		<title>Progress Tracking</title>
				
		<link>https://maxxisdigital.com/Progress-Tracking</link>

		<pubDate>Mon, 13 Mar 2023 04:53:34 +0000</pubDate>

		<dc:creator>UX Portfolio</dc:creator>

		<guid isPermaLink="true">https://maxxisdigital.com/Progress-Tracking</guid>

		<description>Progress Tracking
    @ The Pill Club



	&#60;img width="6000" height="4664" width_o="6000" height_o="4664" data-src="https://freight.cargo.site/t/original/i/a632f67ff3bc53c67219a09dc8a5fc0c70fe6b3c32780abe3a2c1b7d7afde7ae/ux-thumb-progress3.png" data-mid="241622446" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/a632f67ff3bc53c67219a09dc8a5fc0c70fe6b3c32780abe3a2c1b7d7afde7ae/ux-thumb-progress3.png" /&#62;
	Project OverviewAt The Pill Club, I optimized onboarding and dashboard progress tracker components to improve accessibility and system status visibility ︎︎︎ a key usability principle that builds user trust. Users were abandoning onboarding around halfway (~step 10) and generating support tickets due to unclear progress indicators. This created friction for new customers and increased operational load.


I led a competitive analysis, audited existing designs, and developed a high-fidelity interactive prototype in Figma to address friction points identified through research and personal use.


Through iterative prototyping guided by key stakeholders such as engineering and brand, I was able to reach a solution that was feasible for implementation.



  
    ToolsFigma, Fullstory, Zeplin, Jira, Adobe Photoshop
  

  
    Duration3 weeks, 2021
  

  
    TeamMyself (Product Design Intern), Margaret Sommers, Elaiza Clemens





The Solutions
Live Prototypes

	Onboarding Progress Tracker


Live prototype in figma (clickable)

	

Dashboard Progress Tracker


Live prototype in figma (clickable)












Deconstructing the Components

Choosing the Final Direction



Brand required a specific color palette, so I optimized contrast within those limits.

Clear separation between user tasks and system tasksReduced cognitive load by simplifying the step hierarchyMatched engineering’s existing component architecture


Onboarding Progress Tracker
	
	&#60;img width="507" height="410" width_o="507" height_o="410" data-src="https://freight.cargo.site/t/original/i/36be233948b809a0af4db279fee088b51f6a9e60fcd54a22b9c4b7bc793106ff/Screenshot-2023-03-16-234544.png" data-mid="171987183" border="0" data-scale="100" src="https://freight.cargo.site/w/507/i/36be233948b809a0af4db279fee088b51f6a9e60fcd54a22b9c4b7bc793106ff/Screenshot-2023-03-16-234544.png" /&#62;
	
Dashboard Progress Tracker
	


	&#60;img width="253" height="391" width_o="253" height_o="391" data-src="https://freight.cargo.site/t/original/i/11e45cf5455b8527e5f4a45720b956155ebee41652bd781b337ad8aa8ff3aabb/Screenshot-2023-03-16-234624.png" data-mid="171987190" border="0" data-scale="100" src="https://freight.cargo.site/w/253/i/11e45cf5455b8527e5f4a45720b956155ebee41652bd781b337ad8aa8ff3aabb/Screenshot-2023-03-16-234624.png" /&#62;&#60;img width="354" height="412" width_o="354" height_o="412" data-src="https://freight.cargo.site/t/original/i/a851f4e7bfba8c77dae844d364b4085a03c3f37e346a7505ba186e7f0c2780b3/Screenshot-2023-03-16-234611.png" data-mid="171987186" border="0" data-scale="100" src="https://freight.cargo.site/w/354/i/a851f4e7bfba8c77dae844d364b4085a03c3f37e346a7505ba186e7f0c2780b3/Screenshot-2023-03-16-234611.png" /&#62;
	







Research &#38;amp; AnalysisAuditing Current Design


    Fullstory showed 69% of users attempted to click a non-interactive tracking component.


I focused on redesigning the onboarding and dashboard progress trackers after experiencing confusion with these components as a user and its impact on my focus. Utilizing clickstream analytics from FullStory data, I identified key pain points and collaborated with engineers to better understand the components’ purpose and functionality. This informed an accessible, user-centered optimization.




	&#60;img width="531" height="479" width_o="531" height_o="479" data-src="https://freight.cargo.site/t/original/i/c1fc0b489a660c1c6dbf7d436232b3be32c32e74bf6af2dc89c33a02996db39e/Screenshot-2023-03-16-222734.png" data-mid="171982438" border="0" data-scale="100" src="https://freight.cargo.site/w/531/i/c1fc0b489a660c1c6dbf7d436232b3be32c32e74bf6af2dc89c33a02996db39e/Screenshot-2023-03-16-222734.png" /&#62;
Heat maps indicating “dead clicks”


	

Onboarding Progress Tracker Users often click without results, unsure how to interact with the trackerProgress bar only reflects current section, not overall flow
No clear indication of completed steps or what’s ahead
Users can't estimate time remaining, which affects focus and engagement
Funnel tracker has low contrast, making it inaccessible for many users


Dashboard Progress TrackerCommon “dead-clicks”, What’s Next component uses a similar UI to the radio bottons/mutli select in the funnel which are clickableNo visual differentiation between user tasks and what The Pill Club is doing behind the scenes → both are included in the component





Brainstorm and Design Exploration


	

&#60;img width="517" height="348" width_o="517" height_o="348" data-src="https://freight.cargo.site/t/original/i/a5643eab10246f4cd5ca3baee957b30510e5e132436cf3ae7ec63d1416e77c5d/Screenshot-2023-03-16-223140.png" data-mid="171982442" border="0" data-scale="91" src="https://freight.cargo.site/w/517/i/a5643eab10246f4cd5ca3baee957b30510e5e132436cf3ae7ec63d1416e77c5d/Screenshot-2023-03-16-223140.png" /&#62;Paper explorations




	&#60;img width="703" height="432" width_o="703" height_o="432" data-src="https://freight.cargo.site/t/original/i/34240a5d40e9bd56fe653014bdea6c6754d2e2a6d7aa405266a27e111559774d/Screenshot-2023-03-16-222958.png" data-mid="171982440" border="0" data-scale="100" src="https://freight.cargo.site/w/703/i/34240a5d40e9bd56fe653014bdea6c6754d2e2a6d7aa405266a27e111559774d/Screenshot-2023-03-16-222958.png" /&#62;

Onboarding progress tracker design variations




	&#60;img width="699" height="428" width_o="699" height_o="428" data-src="https://freight.cargo.site/t/original/i/bec9251eac343be58df90655474af5c42936b9cf9cc27a5349fcee88f25a9aff/Screenshot-2023-03-16-223015.png" data-mid="171982441" border="0"  src="https://freight.cargo.site/w/699/i/bec9251eac343be58df90655474af5c42936b9cf9cc27a5349fcee88f25a9aff/Screenshot-2023-03-16-223015.png" /&#62;

What’s Next progress tracker design variations


	







 



Reflections and Next Steps


This project was both my most challenging and most rewarding, reinforcing my passion for accessibility in design. By auditing the onboarding process and advocating for improvements to the progress tracking component, I learned the value of my perspective as a design intern and saw how data driven insights can shape meaningful outcomes. Having my ideas heard and implemented validated my ability to contribute impactfully.
Looking ahead, I would expand this work through inclusive user testing, ensuring the product meets the needs of users with diverse visual, hearing, motor, and cognitive abilities. For me, accessibility is not an add‑on, it’s essential to creating truly usable digital experiences.


︎︎︎ Previous Case Study 


	Next Case Study ︎︎︎
</description>
		
	</item>
		
		
	<item>
		<title>TheMove</title>
				
		<link>https://maxxisdigital.com/TheMove</link>

		<pubDate>Mon, 16 Feb 2026 23:42:58 +0000</pubDate>

		<dc:creator>UX Portfolio</dc:creator>

		<guid isPermaLink="true">https://maxxisdigital.com/TheMove</guid>

		<description>The Move
    @ Northwestern CS



	&#60;img width="6000" height="4664" width_o="6000" height_o="4664" data-src="https://freight.cargo.site/t/original/i/e55e77075475d03b8fa3a74833cc82322a2b4bbb2ab99abe109c550425517cb0/ux-thumb-the-move-2.png" data-mid="244909368" border="0"  src="https://freight.cargo.site/w/1000/i/e55e77075475d03b8fa3a74833cc82322a2b4bbb2ab99abe109c550425517cb0/ux-thumb-the-move-2.png" /&#62;
	Project OverviewThe Move is a lightweight mobile-first social platform designed to help people share, discover, and track everyday “moves”: spontaneous social events that support personal growth, creativity, and community.
Our team used GenAI‑assisted coding to rapidly prototype, test, and refine a social micro‑action app for Northwestern students looking to grow their social circles. We accelerated development velocity by ~60% and resolved the majority of UI bugs within the first two sprints.
The final MVP demonstrates how GenAI can compress the product cycle from ideation to working software, while still supporting thoughtful UX and clear interaction patterns.



  
    ToolsVSCode, Github Copilot, HTML, CSS, JavaScript (React), Firebase, Figma,&#38;nbsp;
  

  
    Duration5 weeks, 2026
  

  
    TeamMyself (UX Design Engineer), Viraj, Vicheda, Kevin, Shan





The Solution
Final Prototype
&#60;img width="8242" height="3565" width_o="8242" height_o="3565" data-src="https://freight.cargo.site/t/original/i/92ffcb27a8daad21d8f11cc37266ff0b08b1250029598c9fbdf74fa011e8fe77/ux-frames.png" data-mid="244909818" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/92ffcb27a8daad21d8f11cc37266ff0b08b1250029598c9fbdf74fa011e8fe77/ux-frames.png" /&#62;Working in weekly sprints, we aligned on scope through a shared app‑vision.md, and built a functional prototype with 4 core features: Explore feed, 

Create a Move, 

Map view, and User Dashboard.
&#38;nbsp;&#60;img width="800" height="1733" width_o="800" height_o="1733" data-src="https://freight.cargo.site/t/original/i/4eb684403157fb8a1f0489efe79be474641327dc359e409a06b4f2fa8cec5c91/ScreenRecording_02-16-202622-50-01_1-ezgif.com-video-to-gif-converter.gif" data-mid="244907367" border="0" data-scale="24" src="https://freight.cargo.site/w/800/i/4eb684403157fb8a1f0489efe79be474641327dc359e409a06b4f2fa8cec5c91/ScreenRecording_02-16-202622-50-01_1-ezgif.com-video-to-gif-converter.gif" /&#62;
Live Demo Here: Requires .edu email



Design Process
Storyboarding

Once we aligned on a clear problem statement and concept direction, we moved into definition by grounding the experience in a simple four‑panel storyboard. This helped us articulate the core user payoff and identify which moments were essential for the first version of the product. From there, we prioritized the minimum set of features required to deliver that value in an MVP.


&#60;img width="882" height="186" width_o="882" height_o="186" data-src="https://freight.cargo.site/t/original/i/6d034839931a573185464f98869d67fdfdc916a5e6e6e5e779fbd7e8f27121fb/Screenshot-2026-02-16-182739.png" data-mid="244903835" border="0" data-scale="100" src="https://freight.cargo.site/w/882/i/6d034839931a573185464f98869d67fdfdc916a5e6e6e5e779fbd7e8f27121fb/Screenshot-2026-02-16-182739.png" /&#62;
4-panel Storyboard prompted through Nano Banana


Information Architecture


	&#60;img width="3733" height="2184" width_o="3733" height_o="2184" data-src="https://freight.cargo.site/t/original/i/02ed9d108fb3035baf71cb6df1b1e71b214813c6a3cfe3befcce94b31bc77518/IMG-2331.jpeg" data-mid="244904020" border="0" data-scale="94" src="https://freight.cargo.site/w/1000/i/02ed9d108fb3035baf71cb6df1b1e71b214813c6a3cfe3befcce94b31bc77518/IMG-2331.jpeg" /&#62;
Sketch of IA
	

To support planning and sprint execution, I created the initial architecture for the app by mapping the overall structure, key flows, and feature placement across each screen. This work fed directly into our shared app‑vision.md, which became the source of truth for requirements, interaction patterns, and technical assumptions as we moved into development.








Development &#38;amp; IterationMVP with Github Copilot



Once we aligned on the core problem, we moved quickly into development by engineering targeted prompts to generate multiple MVP concepts. After reviewing each prototype, we selected the direction with the strongest balance of UI clarity and functional feasibility. From there, we iterated rapidly by pairing and debugging through Swarm coding sessions to refine the interaction model and stabilize the build.





	&#60;img width="1179" height="2556" width_o="1179" height_o="2556" data-src="https://freight.cargo.site/t/original/i/888cd3ec3e52ebb54f56ba66ba92277a8257f058600de1f37a0d33c98da085b8/IMG-2865.PNG" data-mid="244903799" border="0" data-scale="63" src="https://freight.cargo.site/w/1000/i/888cd3ec3e52ebb54f56ba66ba92277a8257f058600de1f37a0d33c98da085b8/IMG-2865.PNG" /&#62;




	&#60;img width="1179" height="2556" width_o="1179" height_o="2556" data-src="https://freight.cargo.site/t/original/i/f26a8d59cef53a1ee864f5555a8982eb772ea7e71208ae37e97b2f06cc813a45/IMG-2866.PNG" data-mid="244903800" border="0" data-scale="61" src="https://freight.cargo.site/w/1000/i/f26a8d59cef53a1ee864f5555a8982eb772ea7e71208ae37e97b2f06cc813a45/IMG-2866.PNG" /&#62;
	&#60;img width="1179" height="2556" width_o="1179" height_o="2556" data-src="https://freight.cargo.site/t/original/i/697fcca28644412136b55b931f2e378306ef44a3333dcd009e441ee5870b9de7/IMG-2864.PNG" data-mid="244903802" border="0" data-scale="62" src="https://freight.cargo.site/w/1000/i/697fcca28644412136b55b931f2e378306ef44a3333dcd009e441ee5870b9de7/IMG-2864.PNG" /&#62;










Testing &#38;amp; Iteration
Usability Testing


	After two weeks of building and debugging, we ran 5 usability tests across 3 core scenarios to evaluate clarity, trust, and task efficiency. The sessions surfaced a focused set of issues that shaped our next sprint.







    
    
    
        
            Find and join a Move
            100%
        
        
            
        
    

    
        
            Create a Move
            80%
        
        
            
        
    

    
        
            Locate a Move closest to current location*
            60%
        
        
            


        
    


 


*
Map feature was nested under filters&#38;nbsp;

→ plan to move to primary navigation in future iterations



What We Fixed (n=5)
    
        
            
                Issue
                User Feedback
                Our Response
            
        
        
            
                Create button
                "I couldn't find where to make a new move" “My thumb was covering the button, I didn’t see it!”
                Increased button size and adjusted placement for thumb reach
            
            
                Time selection
                "Why can't I just post this now?"
                Defaulted to "now" and streamlined time picker UI
            
            
                Location filters
                "Does 'Northside' mean campus or the neighborhood?"
                Removed confusing area tags, simplified metadata
            
            
                Trust &#38;amp; safety
                "I'm not comfortable meeting random people"
                Added .edu verification, full names, location visibility, distance indicators, and event waitlists
            














Reflections &#38;amp; Next Steps

Building The Move revealed how to use AI‑assisted prototyping effectively for better creative exploration. I learned that overly prescriptive prompts often produced generic UI, while broader conceptual prompts, refined through progressive constraints, led to more thoughtful, user‑aligned solutions. AI proved excellent for scaffolding (quickly generating 80% of boilerplate), but it consistently struggled with nuanced UX details like thumb‑reach ergonomics and state transitions. Swarm coding amplified the strengths of this workflow: paired debugging cut issue‑resolution time by roughly 60% and prevented us from shipping technically functional but poor user experiences.


Looking ahead, I’d formalize clearer AI‑human pairing protocols to define where human judgment is essential and where AI autonomy accelerates without compromising quality. Our usability testing also surfaced clear opportunities for iteration, especially around trust, clarity, and discoverability. If I continue developing the app, my next steps would focus on deeper testing cycles and implementing the most impactful feature requests identified through user driven insights.




	Future Opportunities


Richer profiles for trust‑buildingUsers wanted to see year, interests, and preferred names (not just their Northwestern directory name).



Improved map discoverabilityThe map was overlooked when nested under filters. We plan to move it into primary navigation.



Private messaging for organizersUsers wanted a secure way to contact hosts with sensitive questions (e.g., sharing a phone number) without posting publicly in comments.
	


&#60;img width="2642" height="2225" width_o="2642" height_o="2225" data-src="https://freight.cargo.site/t/original/i/a43fa8c23a25f68caa0c12e190ead65058a111f6f1196f5a9a37a1ccbd8c3dee/IMG-2620.jpeg" data-mid="244904023" border="0" data-scale="95" src="https://freight.cargo.site/w/1000/i/a43fa8c23a25f68caa0c12e190ead65058a111f6f1196f5a9a37a1ccbd8c3dee/IMG-2620.jpeg" /&#62;
Wireframes sketch of feature iterations
















︎︎︎ Previous Case Study 


	Next Case Study ︎︎︎
</description>
		
	</item>
		
		
	<item>
		<title>P&#38;G</title>
				
		<link>https://maxxisdigital.com/P-G</link>

		<pubDate>Sun, 07 Dec 2025 03:12:44 +0000</pubDate>

		<dc:creator>UX Portfolio</dc:creator>

		<guid isPermaLink="true">https://maxxisdigital.com/P-G</guid>

		<description>Skincare Packaging
    P&#38;amp;G University Partnership

	&#60;img width="1280" height="557" width_o="1280" height_o="557" data-src="https://freight.cargo.site/t/original/i/e6b0003c9b7e4a62d8ca21468d677fe5c3ff8be68c65ac320f8020c442a02a38/P-G_logo.svg.png" data-mid="241510087" border="0" data-scale="88" src="https://freight.cargo.site/w/1000/i/e6b0003c9b7e4a62d8ca21468d677fe5c3ff8be68c65ac320f8020c442a02a38/P-G_logo.svg.png" /&#62;






	



Project Overview


Our team partnered with P&#38;amp;G to research, evaluate, and redesign e-commerce skincare packaging that meets both SIOC (Ships in Own Container) shipping requirements and real user needs.


To ground our design decisions in user behavior, we conducted three rounds of user research across in-home contextual visits and on-site sessions with 10 participants --&#38;gt; uncovering behavioral patterns, sensory preferences, and unmet functional needs that existing packaging failed to address.


Qualitative findings were synthesized into user profiles, task analyses, and usability requirements that drove iterative prototyping and evaluation. Each design decision was traceable back to a specific user need or identified risk area in the current product experience.


This project is protected by a 5-year Non-disclosure agreement. 
Final deliverable visuals are omitted, but the research process, methodology, and reflections are shared in full below.



  
    ToolsAdobe Illustrator, Correl Draw, Autodesk Fusion, Figma, Microsoft OfficeDuration10 weeks, 2025TeamMyself, Tate Mazer, Jason Tothy, Alice Wu, Fan Yang




Process
Design Framework&#60;img width="2388" height="1112" width_o="2388" height_o="1112" data-src="https://freight.cargo.site/t/original/i/95016739b5e1cd928daeedd7ff89d13b60c05a5aca1389d5dacc531df64d54c1/Screen-Shot-2021-04-25-at-11.28.29-PM.png" data-mid="241547446" border="0" data-scale="53" src="https://freight.cargo.site/w/1000/i/95016739b5e1cd928daeedd7ff89d13b60c05a5aca1389d5dacc531df64d54c1/Screen-Shot-2021-04-25-at-11.28.29-PM.png" /&#62;




EmpathizeKey Activities: Secondary Research · In Home Visits

·

 How Might We’s · Tensions · Journey Map · Insights &#38;amp; Frameworks 

	&#60;img width="2400" height="1600" width_o="2400" height_o="1600" data-src="https://freight.cargo.site/t/original/i/3bd0917ddcdbcdcfc59ca0367cdbf0034526b32c2dd1832b40983e8f2be16d50/mapping-edit.png" data-mid="244730259" border="0" data-scale="93" src="https://freight.cargo.site/w/1000/i/3bd0917ddcdbcdcfc59ca0367cdbf0034526b32c2dd1832b40983e8f2be16d50/mapping-edit.png" /&#62;Mapping of Interview Insights from In Home Visits
	



Using in-home contextual visits, we observed participants interacting with their current skincare products and packaging in their natural environment. These methods supported us in capturing behavioral patterns, workarounds, and points of friction that self-reported surveys would have missed.


Data from 10 participants was synthesized into user profiles, a consumer journey map, and a set of core tensions that revealed gaps between users' mental models and the packaging's actual behavior. These insights were translated into "jobs to be done" statements that anchored our How Might We questions and were iteratively refined as new data emerged in all three research rounds.











Define

Key Activities: Brainstorm · 

 Consumer Site Visit 1 &#38;amp; 2

· Prototype Sketches ·&#38;nbsp;Storyboards · Design Requirements

	

Comparing P&#38;amp;G's existing product line against the behavioral needs and failure points uncovered in research, we identified a focused opportunity: an outer SIOC with a custom inner filler designed to reduce damage-related user frustration and elevate the unboxing experience.


To validate and prioritize design directions, we conducted two rounds of structured on-site sessions using card sorting, preference ranking, and mix-and-match exercises with 12 prototype concepts. We applied formative evaluation methods to understand how users interacted with and interpreted different packaging configurations before committing to a direction.


These three rounds of research culminated in a final set of functional and usability requirements, each directly tied to an observed user need or identified risk in the existing experience.




	&#60;img width="2600" height="2231" width_o="2600" height_o="2231" data-src="https://freight.cargo.site/t/original/i/0bb4a309697e953800cc9adeaab50861e21dd0854260c1fb24a351552a15e4a5/CSV2-pic-edit.png" data-mid="244730112" border="0" data-scale="88" src="https://freight.cargo.site/w/1000/i/0bb4a309697e953800cc9adeaab50861e21dd0854260c1fb24a351552a15e4a5/CSV2-pic-edit.png" /&#62;
Card Sorting Activity from Site Visit 2






Ideate + Prototype


Key Activities: Sketch · Rapid Prototyping
 · Lasercutting

 · Brainstorm/Solostorm



	

&#60;img width="3914" height="2179" width_o="3914" height_o="2179" data-src="https://freight.cargo.site/t/original/i/13f8f66a55f572303167eca8ccc10f5adbcde47f6525d1807110f20a2de13d86/midterm-pres-edit.png" data-mid="244730137" border="0" data-scale="97" src="https://freight.cargo.site/w/1000/i/13f8f66a55f572303167eca8ccc10f5adbcde47f6525d1807110f20a2de13d86/midterm-pres-edit.png" /&#62;&#38;nbsp;Midterm Presentation of Research Findings with P&#38;amp;G





	



With finalized usability requirements in hand, the team moved into rapid ideation using brainstorming and individual solostorming. We generated 5 distinct design concepts, each taking a different approach to the outer SIOC and inner filler interaction. Concepts were evaluated against our requirements matrix before being brought into physical form through laser cutting and 2D/3D modeling.














Iterate + TestKey Activities: CAD (Render &#38;amp; Assembly)

 · 

Lasercutting

 · 

Color Material Finish

 · 

Branding



	

Over two weeks, we rapidly iterated on opening mechanisms, material choices, and structural features. We conducted internal evaluations within our 27-person cohort and faculty reviewers to assess usability, preference, and perceived quality.
Preference data and qualitative feedback narrowed the field to 3 finalist designs, which were presented to P&#38;amp;G stakeholders for review against manufacturability and brand standards. A final design was selected and refined through color, material, and finish decisions.


	&#60;img width="1162" height="666" width_o="1162" height_o="666" data-src="https://freight.cargo.site/t/original/i/2333115d24b32861e4f7a0661ab84f50ae757d21752a4a1d3d08e102601d4b1b/blurred-pandora.png" data-mid="244730479" border="0"  src="https://freight.cargo.site/w/1000/i/2333115d24b32861e4f7a0661ab84f50ae757d21752a4a1d3d08e102601d4b1b/blurred-pandora.png" /&#62;







Reflections and Next Steps

This project reinforced for me that packaging is a user interface. Every opening mechanism and structural choice communicates something to the user. When those signals don't match user expectations, frustration or product damage follows.


Conducting three rounds of research taught me how much user needs shift when you move from observation to co-evaluation. The card sorting sessions in particular surfaced priorities that participants couldn't have articulated in a traditional interview. This shaped how I think about choosing the right evaluation method for the right phase of design while cementing the need for testing as a process.


If I were to continue this work, I'd want to move toward summative testing by measuring whether users can successfully complete the unboxing task of the final prototype without damage or confusion, rather than relying solely on preference data. I'd also want to involve more users with limited dexterity, to better account for accessibility in the packaging interaction.




︎︎︎ Previous Case Study 


	Next Case Study ︎︎︎
</description>
		
	</item>
		
		
	<item>
		<title>MCD</title>
				
		<link>https://maxxisdigital.com/MCD</link>

		<pubDate>Fri, 30 Jan 2026 17:35:27 +0000</pubDate>

		<dc:creator>UX Portfolio</dc:creator>

		<guid isPermaLink="true">https://maxxisdigital.com/MCD</guid>

		<description>Digital Interaction Design
    McDonald’s University Partnership

	&#60;img width="8261" height="5507" width_o="8261" height_o="5507" data-src="https://freight.cargo.site/t/original/i/ddc72d50182170747ff8eca2b9a09f8ce313258cacc83cdf1f56575389bbb729/DSC_3566-2.jpg" data-mid="244214835" border="0"  src="https://freight.cargo.site/w/1000/i/ddc72d50182170747ff8eca2b9a09f8ce313258cacc83cdf1f56575389bbb729/DSC_3566-2.jpg" /&#62;
Photo by Tom Quish, McDonalds Headquarter Visit


	



Client Briefing



For over 70 years, McDonald’s has been a favorite restaurant of families. But competition has escalated and even though Happy Meal sales are thriving today, we are losing share with families overall as the value equation has struggled to keep up. 

How might we build digital touchpoints that grow McDonald’s share with families? How would we measure success?
Students will design solutions that:

-Are globally relevant
-Consider cross-channel (in-store, drive thru, delivery) applications
-Explore fully integrated vs non integrated
-Address multiple pillars of McDonald’sfamily strategy
–Happy Meal, Family Experience, Accessibility








Case Study Coming Soon...


︎︎︎ Previous Case Study 



Next Case Study ︎︎︎
</description>
		
	</item>
		
		
	<item>
		<title>Dermatology Funnel</title>
				
		<link>https://maxxisdigital.com/Dermatology-Funnel</link>

		<pubDate>Mon, 13 Mar 2023 04:47:25 +0000</pubDate>

		<dc:creator>UX Portfolio</dc:creator>

		<guid isPermaLink="true">https://maxxisdigital.com/Dermatology-Funnel</guid>

		<description>Dermatology Funnel@ The Pill Club


	&#60;img width="6000" height="4664" width_o="6000" height_o="4664" data-src="https://freight.cargo.site/t/original/i/7459896b4c1afd2ea4a75e993218772b0badbfa83d909cf25a54ee099aab4ac0/ux-thumb-derm3.png" data-mid="241622804" border="0" data-scale="98" src="https://freight.cargo.site/w/1000/i/7459896b4c1afd2ea4a75e993218772b0badbfa83d909cf25a54ee099aab4ac0/ux-thumb-derm3.png" /&#62;
	

Project OverviewI prototyped dermatology funnel wireframes and interstitial page visuals for The Pill Club’s new skincare feature. Delivered high‑fidelity screens aligned with the design system to simplify complex information, while creating empathetic, accessible interstitials that reduced cognitive load and guided users through the experience.



To launch the new dermatology offering, we needed a medically compliant, low‑friction eligibility questionnaire. Early tests showed users were confused by branching logic and unclear medical terminology, risking drop‑off and misclassification









  
    Tools
Figma, Fullstory, Zeplin, Jira, Adobe Photoshop
  

Duration3 weeks, 2021
  

  
    Role/Team

    Myself (Product Design Intern),
       Nurah Ali,
       Margaret Sommers,
       Elaiza Clemens
    
  














The Solution
High Fidelity Live Prototype


    



Engineering adopted the new funnel into the design system within 5 sprints.





	


Live prototype in figma (clickable)




	



&#60;img width="600" height="1185" width_o="600" height_o="1185" data-src="https://freight.cargo.site/t/original/i/ea12a92d62d997d1f3236f6c0b77b854271fa903be4c071a3844f37b83e4bd40/ezgif.com-gif-maker-1.gif" data-mid="171437416" border="0" data-scale="57" src="https://freight.cargo.site/w/600/i/ea12a92d62d997d1f3236f6c0b77b854271fa903be4c071a3844f37b83e4bd40/ezgif.com-gif-maker-1.gif" /&#62;
Gif of prototype





User FlowStudying the Branching Logic

Analyzed questionnaire copy and branching logic to map dynamic user flows and component interactions. Responses determined eligibility, with certain answers triggering additional questions or hard stops.&#38;nbsp;



    
        
            
                Component
                When It's Used
                Interaction Scenarios
            
        
        
            
                Radio Buttons
                When a question only requires a single response
                Single selection only
            
            
                Checkboxes
                When a question might have multiple responses
                Multiple selections allowed
            
            
                Free Response
                When a question requires a unique response the user types in directly
                Open text input
            
            
                Pop-ups
                Occur in 3 different situations
                
                    
                        Hard Stop
                        If a user triggers a hard stop, they are asked to confirm their answer in a pop-up.
                    
                
            
            
                
                    
                        More Info (Icon)
                        If a user selects the more info icon, a pop-up provides an explanation related to the question.
                    
                
            
            
                
                    
                        Hyperlink (Text)
                        Same interaction as More Info, except the trigger is hyperlinked text phrased as a question from the user's perspective.
                    
                
            
        
    










Interface DesignLearning from Birth Control Product

    

The birth control funnel had a 



27% drop‑off

 

at medical eligibility questions 

→

our goal was to reduce this for dermatology.As my first project with The Pill Club, I immersed myself in the product and design system to quickly learn their interface and backend components. This foundation allowed me to communicate effectively with senior designers and product managers, while ensuring the new skincare onboarding experience carried the same simplicity, accessibility, and brand identity as the birth control questionnaire.















&#60;img width="1105" height="576" width_o="1105" height_o="576" data-src="https://freight.cargo.site/t/original/i/4338cfd895a539b033b332ab0964d97a1748fb2ab424fe79c19b48993bd96410/Screenshot-2023-03-16-205719.png" data-mid="171977546" border="0" data-scale="78" src="https://freight.cargo.site/w/1000/i/4338cfd895a539b033b332ab0964d97a1748fb2ab424fe79c19b48993bd96410/Screenshot-2023-03-16-205719.png" /&#62;







Brainstorm ImageryGraphic Designing Interstitial Thumbnails

Brainstormed visual scenarios for interstitial pages and built low‑fi iconography examples in Figma. 
Brand required illustration styles to match existing birth control assets. 
Collaborated with the brand team to refine visual communication, then advanced to Adobe Creative Suite to create higher‑fidelity illustrations aligned with The Pill Club’s identity. 




&#60;img width="1137" height="644" width_o="1137" height_o="644" data-src="https://freight.cargo.site/t/original/i/b60d6290d7d6ea9bff62cb6fca69a2de04a9110ce6eeb204908d6c50a4042cd9/Screenshot-2023-03-16-210556.png" data-mid="171977953" border="0"  src="https://freight.cargo.site/w/1000/i/b60d6290d7d6ea9bff62cb6fca69a2de04a9110ce6eeb204908d6c50a4042cd9/Screenshot-2023-03-16-210556.png" /&#62;
&#60;img width="1133" height="703" width_o="1133" height_o="703" data-src="https://freight.cargo.site/t/original/i/2ad985f1fbf83a3bfad2cd9f16c158a9599330c8e0e75bf26ad096577e0c1774/Screenshot-2023-03-16-210609.png" data-mid="171977955" border="0"  src="https://freight.cargo.site/w/1000/i/2ad985f1fbf83a3bfad2cd9f16c158a9599330c8e0e75bf26ad096577e0c1774/Screenshot-2023-03-16-210609.png" /&#62;
&#60;img width="1130" height="447" width_o="1130" height_o="447" data-src="https://freight.cargo.site/t/original/i/7435682d55a21ecd40ce800989149583cb938fb4f8cc9ccb9e1c6b971850990c/Screenshot-2023-03-16-210709.png" data-mid="171977971" border="0"  src="https://freight.cargo.site/w/1000/i/7435682d55a21ecd40ce800989149583cb938fb4f8cc9ccb9e1c6b971850990c/Screenshot-2023-03-16-210709.png" /&#62;






Reflections and Next Steps
This project reinforced the value of designing with both clinical accuracy and user clarity in mind. Working within medical constraints pushed me to simplify complex decision trees into an experience that felt approachable, trustworthy, and fast for users while still meeting the needs of dermatology providers. It also highlighted how essential cross‑functional alignment is when translating medical logic into UI patterns that engineers can implement reliably.


If I were to continue developing this feature, I’d focus on deeper usability testing with a broader range of skin concerns, refining the branching logic to reduce cognitive load, and exploring ways to surface provider‑level insights earlier in the flow. There’s also an opportunity to strengthen personalization and transparency so users better understand how their answers shape the recommendations they receive.




︎︎︎ Previous Case Study
	Next Case Study ︎︎︎
</description>
		
	</item>
		
		
	<item>
		<title>THREADS</title>
				
		<link>https://maxxisdigital.com/THREADS</link>

		<pubDate>Wed, 10 Jan 2024 03:48:05 +0000</pubDate>

		<dc:creator>UX Portfolio</dc:creator>

		<guid isPermaLink="true">https://maxxisdigital.com/THREADS</guid>

		<description>&#60;img width="6000" height="4664" width_o="6000" height_o="4664" data-src="https://freight.cargo.site/t/original/i/90ba1219632f1fe9700abe0768d0dcaa623625694fee20f67a82fcb3bb72ba25/ux-thumb-threads.png" data-mid="202425751" border="0" data-scale="45" data-no-zoom src="https://freight.cargo.site/w/1000/i/90ba1219632f1fe9700abe0768d0dcaa623625694fee20f67a82fcb3bb72ba25/ux-thumb-threads.png" /&#62;


Threads
@ Wellesley HCI


Role/Team
Myself (Engineer Lead)Yasmin Afifi (Design Lead)
Kensy Jordan (Project Manager)
	Tools
Arduino IDE, Arduino MEGA, Adafruit LED screen, Capactive touch fabric

	Duration
4 weeks, 2022



	Our Mission
Using speculative design framework our team explored the work of artists, brainstorming ways to transform the way they work.

How might we design a novel tangible user interface (TUI), which helps support the productivity, creativity, and well being of people who work or study in mobile environments?



What is Threads?Threads is a tangible user technology that incorporates the traditional means of painting and transforms it into light art. 
We want to provide a way to learn and create simultaneously so that artists are able to expand their mediums of creation.&#38;nbsp;



Methods
Speculative Design
Speculative design, sometimes called critical design or design fiction, asks us to zoom out beyond user-centeredness and ask how our designs could impact future societies. It’s not necessarily problem solving (prototyping); it’s not trying to predict the future (forecasting), and it’s not pure criticism. It’s concerned with possibilities, not probabilities, pushing us to consider our preferences over a set of possible futures and the ways in which the objects we design help or hinder our attempts to build those futures.
&#60;img width="533px;" height="377px;" src="https://lh7-us.googleusercontent.com/pA60D9aYGLLHERrNyHxuepLMSpP8NWST6of8nKHa-WdKj6Rw1k11kkxNHxjZRINiUhIaSvOTLZfsSXMQaAHZI5XwkhqmUp3PmMorACT0TZ_5hhWzBh4oZWcPUEPcB92zOMfwo-kJYKl_2j1-TkEb1bJ8wA=s2048" style="width: 533px; height: 377px;" data-scale="58"&#62; 


AnalyzeDetecting Now Tendencies
In order to participate in this digital art making, new systems require artists learn to create with new interfaces and materials while typically forgoing traditional mediums. Designing to bridge the gap between the traditional and digital mediums of art, we are concerned with the ways that artists are pushed to do their work differently in the modern age.

🎯 Create a way for artists to produce light using traditional mediums
🎯 Allow painters to explore new art media without learning any new skills



Fantasize
Predicting Future Implications
Threads presents an exciting opportunity for artists to seamlessly create new mediums and integrate light into their artworks. The interface itself can become part of the art making process. Given the potential for engagement with audience and performance art, this is an enriching project for both its maker and for its viewers.


ConcretizeEarly Process


Before creating our interface we established significant objects, familiarizing ourselves with these technologies:

Arduino Uno
Bread board
Led panel
Conductive fabric


RealizeFirst Iteration︎︎︎“WIP”

Our design aims to completely preserve the traditional aspects of the medium of painting on canvas. The core of our system is a grid of conductive sheet squares that are mapped to pixel squares on a 16 x 24 LED matrix. Using an Arduino MEGA, we implemented our prototype using the Arduino CapactiveSensor and GFX (graphics) library. Each of our conductive squares was connected to two digital pins and our program was set to track the capacitance of the sheets. Once a square was touched, the capacitance threshold would be reached and this would translate into the corresponding LED light square illuminating.

&#60;img width="2952" height="2907" width_o="2952" height_o="2907" data-src="https://freight.cargo.site/t/original/i/88cc9e51bb6d68c5f27604c1d09244849fe669db8ce4f9cb430fadd247d320f7/grid.jpeg" data-mid="201727142" border="0" data-scale="32" src="https://freight.cargo.site/w/1000/i/88cc9e51bb6d68c5f27604c1d09244849fe669db8ce4f9cb430fadd247d320f7/grid.jpeg" /&#62;
Once this grid system was functioning, we added on replaceable canvas directly on top of the grid. When a user paints on that canvas, the grid of conductive squares detects the corresponding capacitance changes and the LED screen lights up in the same pattern that was painted.

&#60;img width="2884" height="2049" width_o="2884" height_o="2049" data-src="https://freight.cargo.site/t/original/i/9cd1c3a0ea33a958d6828563ab9dfecd995588b910010a7a87d1f0060e30b2e1/pattern.jpeg" data-mid="201727221" border="0" data-scale="36" src="https://freight.cargo.site/w/1000/i/9cd1c3a0ea33a958d6828563ab9dfecd995588b910010a7a87d1f0060e30b2e1/pattern.jpeg" /&#62;

Re-Fantasize
Future Implementations

As the final project of my undergraduate computer science coursework, it was gratifying to be accepted into the Chi Work symposium on Works in Progress. My team and I were given the opportunity to further fantasize how our interface could be designed at a higher fidelity.
In terms of physical developments, we would construct a small easel-like casing to display the sensor pads and LED matrices. 

For more complex resolution, we’d multiply the surface area of the sensor pad and add additional matrix displays.

 In the following figures (drawn by Maxx Aguilar) each side of the pyramids is labelled A - D to explain our components: 
&#60;img width="6000" height="4664" width_o="6000" height_o="4664" data-src="https://freight.cargo.site/t/original/i/39531455ed69d1a3379e8b808615a3ca66eeee32c358f6465845ed717c10f1cb/ux-thumb-tui1.png" data-mid="202425758" border="0" data-scale="50" src="https://freight.cargo.site/w/1000/i/39531455ed69d1a3379e8b808615a3ca66eeee32c358f6465845ed717c10f1cb/ux-thumb-tui1.png" /&#62;
&#60;img width="6000" height="4664" width_o="6000" height_o="4664" data-src="https://freight.cargo.site/t/original/i/2bdd116db7354865d4114a5f9bbcb45c5157295b881bcc1da3ea77ac35183bd1/ux-thumb-tui3.png" data-mid="202429751" border="0"  src="https://freight.cargo.site/w/1000/i/2bdd116db7354865d4114a5f9bbcb45c5157295b881bcc1da3ea77ac35183bd1/ux-thumb-tui3.png" /&#62;
&#60;img width="6000" height="4664" width_o="6000" height_o="4664" data-src="https://freight.cargo.site/t/original/i/a3aae169ec59a33bd0743c670242062331ae4dd94f6e9d382820217dcd2a80de/ux-thumb-tui2.png" data-mid="202425757" border="0"  src="https://freight.cargo.site/w/1000/i/a3aae169ec59a33bd0743c670242062331ae4dd94f6e9d382820217dcd2a80de/ux-thumb-tui2.png" /&#62;


We imagine a square-based pyramid structure that would house the artist’s traditional paint supplies within it as well as our hardware components. This pyramid design would be a performance piece for artists to place in a location where viewers can gather around it.



On side A, rather than conductive squares, we would use triangular conductive pieces to create a grid underneath the canvas. Using magnets at each corner, the triangular canvas is replaceable. On the opposite side of the pyramid (side C) an LED screen would relay the painting in real time, brightening opacity each time a conductive triangular is touched.

This would mimic the effect of adding additional layers of paint to a canvas. Side B would have a hole to open the art supply storage area, similar to side D which has a hole for carrying the interface. 

In addition to a clear screen button, we want to add a save button so that users can save their creations and display them on the LED screen at any time.




Reflections
As the technical lead on this project, it was refreshing to work with Arduino technology again and lead my teammates through hardware/software challenges.

Beyond our WIP we are interested in exploring the scalability of Threads, and how we could make it more than just the ability to paint, but even evolve it into the ability to create performance art through traditional mediums. 



	︎︎︎ Previous Case Study
	Next Case Study&#38;nbsp;︎︎︎

</description>
		
	</item>
		
		
	<item>
		<title>ChatCheck</title>
				
		<link>https://maxxisdigital.com/ChatCheck</link>

		<pubDate>Mon, 13 Mar 2023 04:48:16 +0000</pubDate>

		<dc:creator>UX Portfolio</dc:creator>

		<guid isPermaLink="true">https://maxxisdigital.com/ChatCheck</guid>

		<description>
	︎︎︎ Previous Case Study 

	

Next Case Study ︎︎︎



&#60;img width="6000" height="4664" width_o="6000" height_o="4664" data-src="https://freight.cargo.site/t/original/i/fa213d5fa242c84941831e8657824a2a848a09e7eea96e18cb84ca87d16d38ae/ux-thumb4.png" data-mid="172899099" border="0" data-scale="46" src="https://freight.cargo.site/w/1000/i/fa213d5fa242c84941831e8657824a2a848a09e7eea96e18cb84ca87d16d38ae/ux-thumb4.png" /&#62;


	Chat Check
@ Wellesley HCI


	Role/Team
Myself (Lead UI/UX Designer)Sarah (UI/UX Designer and Scribe)Maddie (UI/UX Designer)


	Tools
Figma, Balsamiq, UserTesting
	Duration
4 weeks, 2021


Project Overview
ChatCheck is an app that makes it easy for friends and family to keep each other informed with the most credible information while texting and calling. Unlike our competitors, this messaging app includes a credibility checking feature directly in its messaging system while still maintaining user privacy with end to end encryption.This group project was part of the accelerated 4 week Human Computer Interaction course at Wellesely College in Spring 2021


The Problem
Many users that utilize 3rd party messaging applications to communicate with love ones abroad, fall victim to fake news conspiracy theories. Heightened hysteria during the pandemic has made these applications, like Whatsapp, a breading ground for misinformation particularly surrounding politically relevant events and products. The spread of fake news through messaging applications is especially insidious because users tend to have more trust in the source of the information in the context of one on one communication. Users are more likely to trust misinformation when it is being forwarded from a loved one or an otherwise trustworthy person.

Preliminary InterviewsIdenitfying the Target Market

After choosing our target population of people ages 40 to 60, we conducted discussion based interviews with 3 people who fit the criteria. These conversations loosely followed a predetermined list of questions geared towards understanding their experiences and feelings related to the pandemic and technology use. From these interviews we constructed empathy maps to visualize what the users think, feel, say, and do.

&#60;img width="2096" height="296" width_o="2096" height_o="296" data-src="https://freight.cargo.site/t/original/i/b1e9ff20a607fc898b240e56f7a89766ff6e6fb1093e3a32172d323951084f28/Screen-Shot-2023-03-13-at-2.55.33-AM.png" data-mid="171437144" border="0" data-scale="90" src="https://freight.cargo.site/w/1000/i/b1e9ff20a607fc898b240e56f7a89766ff6e6fb1093e3a32172d323951084f28/Screen-Shot-2023-03-13-at-2.55.33-AM.png" /&#62;
&#60;img width="2832" height="1140" width_o="2832" height_o="1140" data-src="https://freight.cargo.site/t/original/i/852f77d68dcd540b30db4b8f26d8b80bad7d3f46f18cc48359df3074e652e746/Screen-Shot-2023-03-13-at-2.49.10-AM.png" data-mid="171437014" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/852f77d68dcd540b30db4b8f26d8b80bad7d3f46f18cc48359df3074e652e746/Screen-Shot-2023-03-13-at-2.49.10-AM.png" /&#62;

Hierachical Task AnalysisBrainstorning the User JourneyAt this phase of development, our team decided to focus on helping users identify "fake news" when using the internet in general. We identified 3 high level tasks within the problem domain: submitting an article into the app to check its credibility, researching the credible sources provided, and sharing this information with others. Through mapping out the user's steps, we were able to simplify their journey and help them reach the goals of the product more efficiently.

&#60;img width="2854" height="1018" width_o="2854" height_o="1018" data-src="https://freight.cargo.site/t/original/i/3ca259cb7f1d4fdc8d995d9cc25a6bf39cd5c60aef344b4080b5cadfea77e3a4/Screen-Shot-2023-03-13-at-2.49.36-AM.png" data-mid="171437019" border="0"  src="https://freight.cargo.site/w/1000/i/3ca259cb7f1d4fdc8d995d9cc25a6bf39cd5c60aef344b4080b5cadfea77e3a4/Screen-Shot-2023-03-13-at-2.49.36-AM.png" /&#62;


User PersonasCentering the User at Every Phase
To uphold the goal of centering the user in our designs, we created engaging user personas. These user personas helped our team consider our target users at every step. The two personas we created were heavily informed by the early on user interviews and embodied the diverse experiences across our target age group.


&#60;img width="1890" height="1614" width_o="1890" height_o="1614" data-src="https://freight.cargo.site/t/original/i/350bbd9a8475a29a999acf1a9296ef3b82871d1d92138504339ee8802689b7f7/Screen-Shot-2023-03-13-at-2.50.09-AM.png" data-mid="171437018" border="0" data-scale="66" src="https://freight.cargo.site/w/1000/i/350bbd9a8475a29a999acf1a9296ef3b82871d1d92138504339ee8802689b7f7/Screen-Shot-2023-03-13-at-2.50.09-AM.png" /&#62;


Preliminary UI DesignBefore prototyping our software product, we drew out very low fidelity ideas of the main screens of our application. Rather than focusing on the visual design aspect, this exercise allowed us to hone in on the main content and control elements of the interface. Through a collaborative brainstorming session, we identified two different design approaches for our app landing page: a minimal search engine-like design and a trending page approach. The minimalist approach has a design consistent with other commonly used search engines which adds a potential level of familiarity for new users since there are no immediate instructions for how to use the app. Additionally, the user can efficiently make a unique search since the input field is the main element on the landing page.The trending design includes more visual content than the previous option but if the user does not have a unique search in mind, they are able to browse the list of trending queries automatically provided on the landing page.

&#60;img width="1876" height="1592" width_o="1876" height_o="1592" data-src="https://freight.cargo.site/t/original/i/9cc61e7fe804ea2969782bf55177833a1480ef687a1a5bcaba265780317c9aa2/Screen-Shot-2023-03-13-at-2.50.31-AM.png" data-mid="171437017" border="0" data-scale="73" src="https://freight.cargo.site/w/1000/i/9cc61e7fe804ea2969782bf55177833a1480ef687a1a5bcaba265780317c9aa2/Screen-Shot-2023-03-13-at-2.50.31-AM.png" /&#62;


Lo-Fi Prototyping

Once reaching the prototyping phase of our project, our team had to choose a concrete direction for our product. We identified "risky" aspects of our concept and decided to create a 3rd party messaging app that includes a credibility verification feature instead of a search engine-like product that lacked uniqueness from other existing products.Using Balsamiq, we created a low fidelity paper-like prototype of our messaging app that could be used to conduct pilot user-testing. This wireframe included the onboarding process, the credibility checking page to make a unique search, messaging with a conversation that included misinformation, the credibility alert and corresponding page with credible sources, and the capability to share this newfound information directly to the same conversation.







User Testing
To prepare for testing we created a briefing for users that included the scenario of use for the product and 3 main tasks for them to complete. Our scenario was, "Imagine you are an adult trying to communicate with your family who takes a lot of information they hear at face-value."Without providing specific instructions to the user we identified these tasks:

“explain in your own words how you would use this mobile app to check the credibility on the statement ‘the 2020 elections were a fraud’”“explain in your own words how you would use this mobile app to check the credibility of something you just texted your friend, such as “the Covid-19 vaccines has microchips in it”“explain in your own words how you would use this mobile app to share with your friend via text whether or not ‘the 2020 elections were a fraud’”After conducting the test, users were then asked to pos-task questions:

What did you like about this app?If you were to use this app, do you see yourself using the credibility checking feature?How do you feel about the presentation of information from the credibility checker?The results of the pilot testing were limited. All 3 of the users that tested were above the age of 40 and had varying levels of technological experience. None of the users were able to complete the tasks and were confused on how to interact with the low-fidelity prototype, none of them made it past the onboarding pages. One main take-away from this stage was the need for familiar design and clear instructions for how the elements should be interacted with.

Branding
Before further designing our prototype, the team discussed our application's "brand identity" to hone in on the tone and visual aspects of the design. To practice Material Design principles and align with our target audience of immigrant communities and users abroad, we created the app on an android interface.Color SchemeMinimal color scheme to not distract new users from the key elementsGrayscale, two tones of green as accent colors and a bright red color for elements that require high contrast to draw attention
Messaging apps like Line, WeChat, and WhatsApp all use a green as their primary color&#38;nbsp;Establish trust and reliability while also ensuring our app was familiar 
Iconography/TypographyLogo/credibility icon: the green double C which stands for "ChatCheck"
Android-oriented Material Design standards&#60;img width="2512" height="1588" width_o="2512" height_o="1588" data-src="https://freight.cargo.site/t/original/i/121bfd06b15c50305e0bae7490d8112cb54d82b0f7676ba0053bcbd8d71d549a/Screen-Shot-2023-03-13-at-2.52.12-AM.png" data-mid="171437015" border="0" data-scale="80" src="https://freight.cargo.site/w/1000/i/121bfd06b15c50305e0bae7490d8112cb54d82b0f7676ba0053bcbd8d71d549a/Screen-Shot-2023-03-13-at-2.52.12-AM.png" /&#62;

Final Prototype

	



Live prototype in figma (clickable)




	


&#60;img width="600" height="1243" width_o="600" height_o="1243" data-src="https://freight.cargo.site/t/original/i/dda8ed6b2e3941813e8d6328bc5ae1d54217873970076a3fd0d6e2faf51566a4/ezgif.com-gif-maker.gif" data-mid="171437285" border="0" data-scale="33" src="https://freight.cargo.site/w/600/i/dda8ed6b2e3941813e8d6328bc5ae1d54217873970076a3fd0d6e2faf51566a4/ezgif.com-gif-maker.gif" /&#62;

Gif of prototype





Reflections and Next Steps
From UserTesting.com, we realized how important it was to provide as much information as we could beforehand, since users experience a wide range of prototypes to test. This was a huge insight into how to conduct testing on this platform in the future.Considerations for future iderationsWe are unsure if this app will attract users who are drawn to misinformation and if they value fact-checking, more research and testing is needed.Explore the privacy or surveillance concerns from scanning users messages.︎︎︎ Previous Case Study
	Next Case Study ︎︎︎
</description>
		
	</item>
		
	</channel>
</rss>