Containers competed with the questions
The first direction used boxed top tabs and repeated containers around categories and answers.
Making an AR platform easier to understand
Client / context
SuperWorld
Timeline
Sep–Dec 2020
Role
UI/UX Design Intern
Status
Delivered
At a glance
Making virtual places feel familiar.
I helped turn an abstract AR virtual-real-estate proposition into a responsive journey that first-time visitors could understand, explore, and act on. The combined shipped experience was associated with a 12% relative increase in sign-up conversion.
- Scope
- Homepage, FAQ, Contact, and Virtual Real Estate; responsive design, handoff, and QA.
- Collaboration
- Product team, Design team, Video team, Development team.
Services
- Product Communication
- Information Architecture
- Responsive UI/UX
- Interaction Design
- Developer Handoff
- Responsive QA
- Storyboarding
- Motion and Video
Website UI/UX: three decisions
Follow the website journey from product explanation to support and responsive delivery.
Also in this case: video storyboards and motion designThe sign-up problem started with comprehension
SuperWorld maps an augmented-reality virtual world onto real locations. Before visitors could act, they had to understand virtual real estate, digital plots, location-based AR content, and how the service connected the physical world to the product.
As a UI/UX Design Intern, I owned the assigned Homepage, FAQ, Contact, and Virtual Real Estate experiences from exploration through final responsive design. I worked with Product, Design, Video, and Development teams through feedback, handoff, and responsive QA. The final designs launched during the internship.
Decision 01
Concrete places made virtual real estate easier to understand
For the Homepage and Virtual Real Estate page, I explored gallery, cursor-driven, and card-based directions. The product task came first: a first-time visitor needed to recognize what a place represented, understand what could happen there, and see where to go next. The more expressive interactions created movement, but also placed another step between visitors and that explanation. Choosing the card direction meant giving up some of the surprise of cursor-led exploration; in return, each place, supporting detail, and next action had a predictable relationship that could survive responsive layouts and faster scanning.
The selected direction paired the product story with recognizable places. A globe stayed as the visual anchor and linked to the introduction video instead of placing a large video between visitors and the first explanation. Virtual Real Estate reused the place-card language and paired relevant map screenshots with explanatory paragraphs, so the visual example and the explanation answered the same question together. The priority order was concrete context first, product mechanics second, and a deeper action such as video or sign-up after that. This turned an unfamiliar platform into a sequence of understandable decisions rather than asking the reader to interpret an isolated diagram.
Interface design
From homepage direction to Virtual Real Estate
Decision 02
Answers should come before Contact
Real user feedback showed that first-time visitors needed a clearer way to resolve questions about accounts, virtual real estate, and blockchain-related concepts. I treated support as one journey rather than two disconnected pages: visitors needed to answer a specific question and decide whether further help was needed. Keyword search and Account / Virtual Real Estate / Blockchain categories led to expandable answers, with Contact available as a fallback when self-service was not enough.
The first direction used boxed category tabs and repeated background containers. I simplified that hierarchy by moving categories to the left and using spacing, rules, headings, and a clear purple selected state so the questions carried the visual weight. The revision gave up some of the visual separation of the boxed version, but reduced the interface chrome a visitor had to decode. Inline confirmation after form submission kept the visitor in the support context.
Viewed retrospectively, the journey separates three questions: can visitors understand the concept, locate a relevant answer, and reach the intended next action? The last is progression toward conversion; the 12% launch comparison does not isolate any of these steps.
FAQ-first support
- 01
Search or browse
Visitors search by keyword or choose Account, Virtual Real Estate, or Blockchain.
- 02
Expand an answer
Accordion behavior keeps related answers available without turning the page into one dense wall of text.
- 03
Contact as fallback
Visitors continue to Contact only when the FAQ does not resolve their question; confirmation remains inline after submission.
Design iteration
FAQ hierarchy: from Version 1 to Version 2
A flatter hierarchy prioritized content
Version 2 moved categories left and used spacing, lines, and a selected state to clarify navigation. The final combined FAQ/Contact page appears below.
Decision 03
Responsive design carried the decisions into delivery
The final experience had to carry the same explanation across desktop, tablet, and mobile. I prepared responsive designs and interaction states in Figma and Adobe XD, then worked with Development through handoff and responsive QA before launch. The delivery priority was to preserve meaning, not the desktop silhouette: place examples still needed their explanation, categories still needed to orient the answer list, and the route to video, Contact, or sign-up still needed to be visible.
That meant accepting different compositions at narrower breakpoints rather than shrinking every element. The responsive exploration shows how the layouts were reorganized while keeping the same product logic. The shipped FAQ and Contact composition shows the final hierarchy at full size; the responsive work shows how that hierarchy was carried into implementation.
Interface design
Breakpoint studies and mobile product context
What the combined launch showed
The combined launch brought product explanation and support into one responsive experience. The recorded 12% relative increase is an observational signal of progression toward sign-up; it does not identify which design decision helped. The Homepage, FAQ, Contact, and Virtual Real Estate designs all reached launch.
Product storytelling in motion
The introduction video extended the product explanation beyond static screens. Working with the Video team, I contributed storyboarding, footage selection, motion graphics, special effects, and editing in After Effects and Premiere. The team combined these elements to explain how places, virtual plots, location pins, and app features relate. The following studies show how the visual language developed from hand-drawn sequences into the final film, carrying the website's product story into motion.
Video process
From decentralized symbols to a connected SuperWorld
The storyboard started with distributed ideas
The hand-drawn storyboard maps a decentralized platform through people, places, and devices connecting into one system. Its frames outline the transition from an abstract symbol to a network of relationships.
The final sequence connected the system
To make the sequence specific to SuperWorld and avoid overusing the Ethereum mark, the final direction introduced the SuperWorld logo and location pins. Retaining the rotating globe and adding curved connections gave the scene depth and continuity.
Video process
From repeated building footage to a single crossroad
Progressive squares introduced the 100 × 100-meter scale
The motion study grew squares along an arrow, then replaced the measurement with words. A dark transparent layer kept the type legible over footage as the scale explanation developed.
The crossroad carried the idea with less repetition
Because the video already contained extensive building footage, the final direction moved the sequence to a crossroad. The crossing geometry echoed the square motif and gave the measurement transition a more coherent backdrop.
Video process
From double outlines to one clear trace
The first trace carried two contours
The initial motion study used inner and outer contours to trace the location. The extra outline made the movement feel more layered, but also competed with the place being revealed.
The final trace kept the inner outline and place
The final treatment kept one inner outline and introduced a stadium photo pin. Removing the outer contour made the location easier to read while preserving a concrete place reference.
Video process
From a split-screen storyboard to direct app screens
Bringing the globe back into the homepage
The globe returned to the homepage as a bridge between the web explanation and the introduction video. Removing its background let the form sit directly with the surrounding page content, so the visual anchor supported the product story without becoming a separate poster image.
What I learned
Visual excitement helped attract attention, but clarity made the product actionable. The strongest decisions translated unfamiliar technology into recognizable places, specific questions, clear categories, and visible next steps. Motion and device mockups were most useful when they explained context or behavior; once that context was established, direct interface evidence was clearer.
A state checklist for delivery
This review reconstructs the interaction contract from the archived designs and recorded behavior. It is a later synthesis, rather than an original internship handoff document or a new usability test.
| Behavior in the work | What to specify or verify |
|---|---|
| Category selectionThe purple label and marker distinguish the active FAQ category in Version 2. | Keep the selected category and its answer context clear when navigation reflows across screen sizes. |
| Answer disclosureA question, answer, and directional arrow communicate collapsed and expanded states. | Include both states and keyboard operation in the handoff, rather than specifying only a closed screen. |
| Contact confirmationContact follows the FAQ; the final interaction confirms submission inline. | Verify the fallback order and successful confirmation at each supported breakpoint. |
2026 retrospective: measure comprehension before conversion
The launch comparison cannot explain which decision helped. In a 2026 follow-up, I would test the journey in stages: after the homepage, ask first-time visitors to explain what a virtual plot represents; next, ask them to find an account answer and decide when Contact is needed; finally, record whether they can identify and reach the intended next action.
Task success, time, and confidence would help diagnose comprehension and navigation. Funnel analytics would separately track movement from answered questions to sign-up over a defined period. Repeating the tasks on desktop and mobile would help identify breakpoint-specific friction. These are proposed methods, not tests completed during the internship.
Product Design
UX/UI Design
Visual Design
Product Design
UX/UI Design
Visual Design
