![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 28 27" xmlns="http://www.w3.org/2000/svg"><g d="M 1.015 26.046 L 1.002 26.049 L 0.917 26.094 L 0.893 26.099 L 0.876 26.094 L 0.791 26.049 C 0.778 26.044 0.768 26.046 0.762 26.055 L 0.757 26.068 L 0.737 26.618 L 0.743 26.644 L 0.755 26.661 L 0.88 26.756 L 0.898 26.761 L 0.912 26.756 L 1.037 26.661 L 1.051 26.64 L 1.056 26.618 L 1.036 26.069 C 1.032 26.055 1.026 26.048 1.015 26.046 M 0.253 22.661 L 0.238 22.663 L 0.016 22.783 L 0.004 22.796 L 0 22.81 L 0.022 23.363 L 0.028 23.378 L 0.037 23.387 L 0.278 23.507 C 0.294 23.511 0.305 23.508 0.313 23.496 L 0.318 23.478 L 0.277 22.689 C 0.273 22.674 0.265 22.664 0.253 22.661 M 0.475 25.903 C 0.464 25.896 0.45 25.9 0.443 25.911 L 0.436 25.929 L 0.395 26.718 C 0.396 26.734 0.402 26.744 0.415 26.749 L 0.433 26.747 L 0.674 26.627 L 0.686 26.617 L 0.691 26.603 L 0.712 26.05 L 0.708 26.034 L 0.696 26.022 Z M 21.6 0 C 23.986 0 25.92 2.015 25.92 4.5 L 25.92 22.5 C 25.92 24.985 23.986 27 21.6 27 L 4.32 27 C 1.934 27 0 24.985 0 22.5 L 0 4.5 C 0 2.015 1.934 0 4.32 0 Z M 21.6 3 L 4.32 3 C 3.525 3 2.88 3.672 2.88 4.5 L 2.88 22.5 C 2.88 23.328 3.525 24 4.32 24 L 21.6 24 C 22.395 24 23.04 23.328 23.04 22.5 L 23.04 4.5 C 23.04 3.672 22.395 3 21.6 3 M 7.2 10.5 C 7.93 10.5 8.545 11.069 8.63 11.825 L 8.64 12 L 8.64 19.5 C 8.639 20.294 8.045 20.949 7.284 20.996 C 6.524 21.042 5.86 20.464 5.77 19.676 L 5.76 19.5 L 5.76 12 C 5.76 11.172 6.405 10.5 7.2 10.5 M 11.52 9 C 12.216 9 12.812 9.518 12.937 10.231 C 13.227 10.057 13.527 9.9 13.834 9.762 C 14.795 9.334 16.233 9.099 17.532 9.523 C 18.213 9.748 18.897 10.168 19.404 10.884 C 19.858 11.521 20.102 12.297 20.151 13.168 L 20.16 13.5 L 20.16 19.5 C 20.159 20.294 19.565 20.949 18.804 20.996 C 18.044 21.042 17.38 20.464 17.29 19.675 L 17.28 19.5 L 17.28 13.5 C 17.28 13.005 17.165 12.774 17.09 12.667 C 16.982 12.528 16.834 12.429 16.668 12.385 C 16.167 12.22 15.445 12.307 14.966 12.52 C 14.246 12.841 13.586 13.345 13.137 13.812 L 12.96 14.01 L 12.96 19.5 C 12.959 20.294 12.365 20.949 11.604 20.996 C 10.844 21.042 10.18 20.464 10.09 19.675 L 10.08 19.5 L 10.08 10.5 C 10.08 9.672 10.725 9 11.52 9 M 7.2 6 C 7.995 6 8.64 6.672 8.64 7.5 C 8.64 8.328 7.995 9 7.2 9 C 6.405 9 5.76 8.328 5.76 7.5 C 5.76 6.672 6.405 6 7.2 6" fill="transparent" height="27px" id="BMUAzBM0m" transform="translate(1.04 0)" width="25.92px"><path d="M 1.015 3.385 L 1.002 3.388 L 0.917 3.433 L 0.893 3.438 L 0.876 3.433 L 0.791 3.388 C 0.778 3.384 0.768 3.386 0.762 3.394 L 0.757 3.407 L 0.737 3.957 L 0.743 3.983 L 0.755 4 L 0.88 4.095 L 0.898 4.1 L 0.912 4.095 L 1.037 4 L 1.051 3.979 L 1.056 3.957 L 1.036 3.408 C 1.032 3.395 1.026 3.387 1.015 3.385 M 0.253 0 L 0.238 0.003 L 0.016 0.122 L 0.004 0.135 L 0 0.149 L 0.022 0.702 L 0.028 0.717 L 0.037 0.726 L 0.278 0.846 C 0.294 0.85 0.305 0.847 0.313 0.836 L 0.318 0.818 L 0.277 0.028 C 0.273 0.013 0.265 0.003 0.253 0 M 0.475 3.243 C 0.464 3.235 0.45 3.239 0.443 3.25 L 0.436 3.268 L 0.395 4.058 C 0.396 4.073 0.402 4.083 0.415 4.089 L 0.433 4.086 L 0.674 3.966 L 0.686 3.956 L 0.691 3.942 L 0.712 3.389 L 0.708 3.374 L 0.696 3.361 Z" fill="transparent" height="4.100142877987455px" id="RQ3946eaU" transform="translate(0 22.661)" width="1.0560000745773277px"/><path d="M 21.6 0 C 23.986 0 25.92 2.015 25.92 4.5 L 25.92 22.5 C 25.92 24.985 23.986 27 21.6 27 L 4.32 27 C 1.934 27 0 24.985 0 22.5 L 0 4.5 C 0 2.015 1.934 0 4.32 0 Z M 21.6 3 L 4.32 3 C 3.525 3 2.88 3.672 2.88 4.5 L 2.88 22.5 C 2.88 23.328 3.525 24 4.32 24 L 21.6 24 C 22.395 24 23.04 23.328 23.04 22.5 L 23.04 4.5 C 23.04 3.672 22.395 3 21.6 3 M 7.2 10.5 C 7.93 10.5 8.545 11.069 8.63 11.825 L 8.64 12 L 8.64 19.5 C 8.639 20.294 8.045 20.949 7.284 20.996 C 6.524 21.042 5.86 20.464 5.77 19.676 L 5.76 19.5 L 5.76 12 C 5.76 11.172 6.405 10.5 7.2 10.5 M 11.52 9 C 12.216 9 12.812 9.518 12.937 10.231 C 13.227 10.057 13.527 9.9 13.834 9.762 C 14.795 9.334 16.233 9.099 17.532 9.523 C 18.213 9.748 18.897 10.168 19.404 10.884 C 19.858 11.521 20.102 12.297 20.151 13.168 L 20.16 13.5 L 20.16 19.5 C 20.159 20.294 19.565 20.949 18.804 20.996 C 18.044 21.042 17.38 20.464 17.29 19.675 L 17.28 19.5 L 17.28 13.5 C 17.28 13.005 17.165 12.774 17.09 12.667 C 16.982 12.528 16.834 12.429 16.668 12.385 C 16.167 12.22 15.445 12.307 14.966 12.52 C 14.246 12.841 13.586 13.345 13.137 13.812 L 12.96 14.01 L 12.96 19.5 C 12.959 20.294 12.365 20.949 11.604 20.996 C 10.844 21.042 10.18 20.464 10.09 19.675 L 10.08 19.5 L 10.08 10.5 C 10.08 9.672 10.725 9 11.52 9 M 7.2 6 C 7.995 6 8.64 6.672 8.64 7.5 C 8.64 8.328 7.995 9 7.2 9 C 6.405 9 5.76 8.328 5.76 7.5 C 5.76 6.672 6.405 6 7.2 6" fill="rgb(0, 0, 0)" height="27px" id="dtrxfAoz8" width="25.92px"/></g></svg>)
NexTech
NexTech is a full-stack UI/UX project grounded in user research and built using modern web frameworks. I led the entire lifecycle: survey design, stakeholder profiling, information architecture & flow modeling, wireframes, and development for both the storefront and admin portal. Usability tests, including blindfolded screen-reader evaluations, surfaced accessibility and information architecture improvements that informed iterative design updates. NexTech demonstrates how research, UX strategy, and engineering can intersect to create a seamless shopping experience.
January 2024 - May 2024
Full-Stack App Development, UX Research, UI Design
FigJam, Next.js, TypeScript, TailwindCSS, MySQL, Vercel
Motivation & Purpose
The process of shopping for tech online is often overwhelming with crowded interfaces, unclear product details, unintuitive filters, and checkout flows that frustrate users. Many platforms assume technical fluency and visual accessibility, making key tasks harder than they need to be.
We set out to design and develop an accessible ecommerce platform that improves tech product discoverability, comparison, and checkout efficiency across devices and assistive technologies.
Problem
Existing tech e-commerce interfaces overload users with redundant navigation, unclear product structures, inconsistent filters, inaccessible interactions, and fragmented checkout flows. These issues increase friction and reduce trust.
Approach
Over one semester, I led the full UX and development lifecycle for NexTech. I conducted survey and stakeholder research with 18 participants, modeled requirements through IA, task, and use case analysis, and developed personas and scenarios based on real purchase behaviors.
I translated these insights into low- and mid-fidelity wireframes, flow charts, and interaction models before implementing the live storefront and admin portal using Next.js. I designed the database schema and product management workflows in MySQL/Prisma, then evaluated the platform through usability and accessibility testing, including screen reader interactions, and synthesized the results into a final report to drive design and IA refinements.
Key Goals
Improve product discovery efficiency
Reduce cognitive load in comparison + filtering
Streamline checkout and cart workflows
Improve accessibility for keyboard + screen readers
Deliverables
Survey + stakeholder profiles
Information Architecture, flow diagrams, requirements docs
Personas + task scenarios
Wireframes + annotated components
Live storefront + admin portal
Usability testing data (quantitative and qualitative)
Initial User Research Findings
Created + distributed a questionnaire to 18 participants (ages 18–25). Extracted patterns for task and information architecture requirements.
Key findings
67% purchase tech 1–2x/year → decision is high stakes
94.4% rely on reviews + specs when choosing products
83% influenced by discounts + pricing transparency
Wishlist + comparison commonly used as decision buffers
Implications for design
Higher importance on customer reviews and ratings
Product detail pages need consistent spec hierarchy
Filters must reflect meaningful distinctions
Wishlist + cart transitions should reduce re-searching
Interface must be responsive + predictable
Research to Product Requirements
Converted research to structured product requirements.
Functional requirements
Product catalog with filtering + sorting
Real-time search + visual feedback
Product detail + spec comparison support
Wishlist + cart transitions
Persistent account + order history
Secure checkout + payment flow
IA + user flows built for
Product discovery paths
Cart + wishlist transitions
Checkout flow continuity
Authentication dependencies
Created
Use case diagrams
Flow of events + task models
Cognitive walkthrough scripts
Personas + scenarios (6 shopping contexts)
Milestone 1
The embedded deliverable document contains the initial user survey + their results, stakeholder profiles, use case diagram, scenarios, flow of events, requirements documentation as well as the project management documentation.
Wireframe Prototyping
Built progressive fidelity prototypes to validate IA + task flows.
Design Artifacts
Paper prototypes → structure + modules
Mid-fidelity wireframes → layout + interaction logic
Flowcharts + sitemap → navigation + mental model clarity
Design Priorities
Persistent filtering context
Consistent spec hierarchy structure
Predictable feedback + modal patterns
Responsive breakpoints for mobile/laptop behavior
Paper Prototypes
Mid Fidelity Prototypes
Flowcharts + Information Architecture
Milestone 2
The embedded deliverable document contains the personas, paper prototypes, wireframe prototypes, scenarios, flow charts, cognitive walkthroughs, and the links to GitHub repositories of the functional prototypes.
Development
NexTech Storefront
Developed a companion admin interface to manage inventory, categories, and product metadata. Implemented CRUD workflows, schema-driven form validation, and secure access control to support internal product management and maintain consistency between database, storefront UI, and CMS-like operations.
NexTech Admin Portal
Built the NexTech storefront using Next.js, TypeScript, TailwindCSS, Prisma, and CockroachDB. Implemented product search, filtering and sorting, wishlist + cart flows, authentication, dark mode, and secure Stripe checkout. Designed product detail pages, catalog navigation, and responsive layouts aligned with UX and IA decisions. Compatible with screen readers & includes dark mode theme toggle.
NexTech Storefront Screens
Includes dashboard, category pages with color and price filtering, product quick view (modal), wishlist + cart, product details page, Stripe checkout integration, Clerk sign-up and sign-in options, product search, dark mode toggle, & product review section. Has semantic HTML, keyboard navigation and screen-reader labeling for accessibility.
NexTech Admin Portal Screens
Includes admin portal dashboard overview with product sales and revenue metrics, specific dashboards to manage the billboards for product categories, product colors, product categories, products, and orders. Has ability to create, update, and delete product information. Exposes RESTful API endpoints for operations like GET, POST, PATCH, and DELETE on product and metadata resources, enabling secure, schema-driven management of catalog data
Usability & Accessibility Testing
To evaluate NexTech’s usability and accessibility, I conducted validation testing with 10 participants, split evenly between sighted users and blindfolded users navigating with a screen reader. Participants completed core e-commerce tasks including product comparison, wishlist management, theme toggling, and checkout. I collected quantitative metrics (task time, click count, ease of navigation user ratings, help requests) alongside qualitative think-aloud feedback.
Key Findings
Screen-reader users required ~10× more clicks to complete checkout tasks (187 vs. 19 clicks on average), primarily due to excessive tabbing and focus looping.
Users expected direct access to product pages from the wishlist and cart, which was missing.
Filtering was verbose and inefficient for screen readers, especially redundant color options.
Search did not support multi-word queries, slowing product discovery.
Product categorization was inconsistent due to one-to-one category mapping.
Stripe checkout caused significant disorientation for screen-reader users due to verbose announcements, resulting in 6× more help requests.
Design & Technical Implications
Based on testing results (both quantiative and qualitative), I proposed and scoped the following improvements:
Introduce ARIA labels, focus management and reduce announcement verbosity to minimize screen-reader disorientation
Enable product page access from wishlist and cart
Refactor database schema to support many-to-many product categorization
Replace color filter lists with dropdown-based selection (to minimize tabbing for screen-reader users)
Support per-product variants (colors, configurations,etc.) rather than global filters
Redesign search query handling to support multi-word searches
Explore workarounds or alternatives for Stripe checkout accessibility limitations
Introduce order history and order tracking views to complete the post-purchase workflow
Replace placeholder reviews with authenticated, verified user reviews tied to completed orders.
Introduce an "Add review" function to completed orders
Milestone 3
The embedded deliverable provides a comprehensive overview of the usability study, covering research concerns and goals, testing methodology, participant setup, task walkthroughs, quantitative and qualitative analysis, charts and graphs of findings, and the final report and demo video.