An interactive website design to register for the World Economic Forum Annual Conference. This project aims to organize content based on principles of information architecture, use typography and color as effective tools for communication, and create signals of feedforward and feedback. To create an interactive experience, clickable hot spots were designed to connect pages.
UI/UX Design | Wire-framing | Branding
Duration: 2 Weeks
Team: Individual
Programs: Figma
Homepage
Forum Brief
Landing Page
Short/concise blurb of forum: info about What, Who, Where, When. Users are able to get a quick taste of the forum without spending too much time on the home page.
Users are able to click to view more information and navigate to the Agenda page. Each page has a means of getting to the next (through buttons, arrows..etc.)
Clickable arrow makes screen slide up as feedback.
Agenda Page
Event Description
Agenda Page
Dates/times, title + short blurb about each speaker event. All are on one page for the user's convenience to browse through or look for a particular speaker.
Users are able to expand each speaker event to view the full description.
Meet the Speakers
Speaker Bio/Contact Info
Speaker Page
Clickable speaker images expand to show their statement and contact info. Helpful for users who want to listen to particular speakers or would like to get to know them.
Reservation Page
Thank You Page
Reservation Form
Reservation Page
Countdown to reserve spots, urging users to sign up.
Reservation form includes clickable checkmarks to sign up for each event. Dates/times of each event are included for schedule management.
After submitting, users are confirmed by a thank you page.
Prototyping
Outlining user flow by stringing wireframes together. Aiming to create an intuitive, clear, and easy experience. Ultimate goal is to get users to register.
Creating clickable hotspots that link pages. Always allowing a way to go back, forward, and to skip to other pages. Providing feedback by creating hover states, sliding screens, and overlays.
Process of creating interactions
Hover states, open/closed overlays, and screen transitions.
Website Demo
