Front End Layout

Front-End Designer / Developer for Clickable Web Prototype Build a Real Browser-Based Prototype From Our Concepts — No Figma We are building a new QR profile platform and are looking for an exceptional front-end designer/developer who can take our supplied concept screens and turn them into a polished, fully clickable browser-based prototype. This is a front-end-only project. There is no backend development required at this stage. The finished prototype will be used as the blueprint for the production WordPress developer, so the prototype needs to clearly communicate not only what the pages look like, but also how the website and application are supposed to work. IMPORTANT: THESE ARE CONCEPTS, NOT A COMPLETE SPECIFICATION We are providing multiple concept images to establish the visual direction and demonstrate portions of the product. Do not simply copy the images. We need someone who can understand the product concept behind the designs and creatively develop the missing pieces. You should be able to look at a screen and understand: What happens when the user clicks something? What screen comes next? What information does the user need? What does the user expect to see? What additional screen or interaction is needed? How should the experience work on mobile? How should the different sections work together? We want someone who can think like a product designer, not someone who only reproduces screenshots. THE CORE PRODUCT The product allows users to create multiple personal or professional profiles that can be shared through QR technology. Examples include: Work Personal Dating Social Media Business Selling Items Events Pet Resume Custom Each profile can contain different information and different buttons. The central concept is: ONE QR CODE → MULTIPLE PROFILES The user controls what information and buttons appear on each profile. The prototype needs to make this concept immediately understandable. WHAT WE ARE HIRING YOU TO BUILD We want an actual browser-based clickable prototype. We are NOT looking for: Static Photoshop files Static images A Figma prototype A collection of screenshots A design presentation We ARE looking for: A working front-end prototype that can be opened in a browser and clicked through like a real website/application. The prototype may use sample/demo data and simulated functionality. TECHNOLOGY Use whatever front-end technology allows you to work efficiently and produce a high-quality result. Examples: HTML CSS JavaScript React Other appropriate front-end technology The technology choice is up to you. The final result must be browser-based and clickable. THE DASHBOARD MUST BE CLICKABLE The dashboard is a major part of the project. We do not want a static dashboard design. The dashboard should behave like a real application using demo/sample data. For example: Dashboard My Profiles → View profiles → Select profile → Edit → Preview → QR Code → Share Create New Profile → Select profile type → Enter information → Customize → Preview → Save Analytics → Open analytics screen using sample information Appearance → Open appearance/customization screen Settings → Open settings screen Help → Open help/support screen The buttons do not need to connect to a real database. But they need to work within the prototype so that we can see exactly what the eventual application is intended to do. PROFILE CREATION FLOW The prototype should demonstrate a complete profile creation experience. For example: Create Profile → Choose Profile Type → Enter Information → Add Photo → Select Profile Buttons → Turn Buttons ON/OFF → Reorder Buttons → Customize Appearance → Preview → Save → View Profile → QR Code → Share The actual information does not need to be stored in a real database. Demo data is fine. The objective is to establish the complete user experience. PROFILE EDITOR Create a realistic clickable profile editor. It should demonstrate things such as: Profile photo Name Bio Background image Profile type Profile buttons Add/remove buttons ON/OFF controls Reordering Preview Save The user should clearly understand that each profile can be customized independently. MULTIPLE PROFILES This is one of the most important concepts. The prototype should demonstrate that one user can have multiple profiles. For example: Work Profile Call Email Website LinkedIn Calendar Dating Profile About Me Photos Instagram Message Let's Meet Personal Profile Phone Text Email Social Media These should feel like different profiles within one unified product. QR CODE EXPERIENCE The prototype should demonstrate: Dashboard → QR Code → Select Profile → Display QR Code → Share QR Code → Visitor Scans → Visitor Profile A real QR scanner is not required. A representative QR code and simulated interaction are fine. What matters is that the user flow is clearly demonstrated. VISITOR PROFILE Create the page that a visitor sees after scanning the QR code. It should demonstrate: Profile photo Name Bio Background Selected buttons Contact information Social links Profile-specific information Only the information/buttons selected for that particular profile should be displayed. PUBLIC WEBSITE The prototype should include the major public-facing portions represented in our concepts: Homepage How It Works Examples Individual example profiles Pricing FAQ Create Your Profile Login / Sign Up Header/navigation Footer Calls to action All major navigation should be clickable. YOU ARE EXPECTED TO THINK BEYOND THE PROVIDED SCREENS This is extremely important. The supplied concepts do not show every screen required for the final product. You are expected to create the missing pieces. For example, if we show: Create Profile you should understand that there needs to be a logical flow behind that button. If we show: Edit you should determine what the editing experience needs to contain. If we show: QR Code you should determine how the user gets from the dashboard to the QR code and then to the visitor experience. If we show: Analytics you should create a reasonable analytics interface consistent with the product. We expect you to use your professional experience and creativity to complete the experience. WORDPRESS IS THE EVENTUAL PRODUCTION ENVIRONMENT The production website will ultimately be built in WordPress. You are not being asked to build the WordPress backend. However, your prototype should be designed so that the eventual WordPress developer can clearly understand what needs to be built. The prototype should make clear: What pages exist What screens exist What is clickable What happens after each major action What information belongs to the user What information belongs to a profile How profiles are created How profiles are edited How profiles are displayed How the dashboard works How the QR experience works What the visitor sees How mobile should work The prototype should effectively become the visual and functional specification for the WordPress developer. FRONT-END ONLY Included: UI/UX Visual design Browser-based prototype HTML/CSS/JavaScript or appropriate framework Clickable interactions Navigation Responsive design Sample/demo data Dashboard Profile flows QR-code flows Visitor profiles Not included: WordPress backend Database User authentication Payment processing Real subscriptions Production QR-code generation Real QR scanning APIs Production analytics Server configuration AI USE IS REQUIRED We require the use of AI to improve speed and efficiency. You should be comfortable using tools such as: ChatGPT Claude Cursor GitHub Copilot Other AI-assisted development tools We expect AI to be used to accelerate: Front-end coding Component creation HTML/CSS/JavaScript Repetitive development Responsive layouts Debugging Iteration Prototype development We are looking for someone who can combine: AI efficiency + exceptional design ability + strong front-end skills. We do not want unnecessary hours spent manually doing work that can reasonably be accelerated with AI. CREATIVE PRODUCT THINKING IS REQUIRED We are not simply hiring a coder. We want someone who understands: UI/UX + product design + front-end development + user behavior. You should be willing to make intelligent recommendations. If you believe: "This flow would be confusing to the user." Tell us. If you believe: "This screen needs another step." Tell us. If you believe: "There is a better way to present this." Show us. We want someone who can improve the concept while respecting the overall direction. RESPONSIVE DESIGN The prototype needs to work properly on: Desktop Tablet Mobile Do not simply shrink the desktop version. Think through how: Navigation Dashboard Profile cards Editing controls QR codes Buttons Forms Example profiles should behave on smaller screens. EXCEPTIONAL PORTFOLIO REQUIRED We are looking for exceptional work. Please provide 3–5 direct links to actual websites or browser-based projects that YOU personally designed and/or developed. We want to see: Modern websites SaaS applications Dashboards User account systems Interactive web applications Complex user flows Responsive front-end work Do NOT send only: Your general Upwork profile A generic portfolio homepage Figma-only projects Template/theme examples Work produced by someone else We want direct links to actual work. For each example, tell us briefly: What did you personally do? For example: "I personally designed the UI/UX and developed the front end." We need to know that the examples represent your own work. FLUENT ENGLISH REQUIRED Fluent English is required. You must be able to communicate clearly about: Product concepts UX Design decisions User flows Development Recommendations Problems and solutions You should be comfortable communicating directly with us in English. APPLICATION REQUIREMENT — READ THIS CAREFULLY YOUR PROPOSAL MUST BE WRITTEN PERSONALLY BY YOU. We only respond to messages that are written personally by the applicant. Do not send: AI-generated proposals Copied proposals Generic Upwork templates Agency-written proposals Mass-produced applications We specifically want to see whether you personally understand the project. Please answer these questions in your own words: 1. What do you believe the core concept of this product is? 2. What do you think is missing from the concepts we have provided? 3. How would you approach building the clickable browser-based prototype? 4. What AI tools do you personally use to improve your speed and efficiency? 5. Provide 3–5 direct links to your best work. 6. For each example, tell us exactly what you personally designed/developed. A thoughtful, concise proposal is much better than a long generic proposal. WHAT SUCCESS LOOKS LIKE When this project is completed, we want to be able to open the prototype in a browser and actually click through the product. For example: Homepage → Create Your Profile → Choose Profile Type → Create Profile → Customize → Select Buttons → Preview → Save → View Profile → QR Code → Share → Visitor Profile And: Dashboard → My Profiles → Select Profile → Edit → Preview → QR Code → Share → Analytics → Appearance → Settings The prototype should make the eventual WordPress development requirements clear rather than leaving the developer to guess. IDEAL CANDIDATE We are looking for an: Exceptional UI/UX Designer + Front-End Developer + Product Thinker You should: Have outstanding visual design skills Understand modern web applications Understand SaaS/product UX Be able to work from concepts rather than detailed specifications Think creatively Build complete user flows Create polished browser-based prototypes Have strong responsive design skills Use AI to work efficiently Communicate fluently in English Have exceptional examples of your own work If you simply reproduce screenshots, please do not apply. If you primarily use templates, please do not apply. If you are an exceptional designer/developer who can take our concept and turn it into a complete, intelligent, clickable product experience, we want to see your work. Attached are basic quick conceptual AI generated images to get the concept