Sign Up And Receive My Latest Tips & Updates!
.svg){kind=small}
client
YEAR
PARTICIPANT
services
Website Design, Video Editing, Illustration
SuperWorld
From September to December 2020, I contributed as a UI&UX design intern at SuperWorld, where I became an integral part of both the UI&UX and video teams. Working closely with the product team, I played a role in shaping the main website design and took charge of editing the introduction video. SuperWorld, an augmented reality (AR) virtual world seamlessly mapped onto the real world, empowers users to create, discover, and monetize AR content.
FAQ Page Design
Version 1
Firstly, my priority is organizing the FAQ and Contact Us pages effectively. I propose placing the Contact Us page after the FAQ page to encourage users to explore the FAQ for immediate answers before reaching out to our company. The FAQ page will be thoughtfully structured with three sections corresponding to different departments, streamlining the user's search process. Additionally, we'll implement a user-friendly search bar, empowering users to input keywords for quicker access to relevant information.
Our overarching goal for these pages is to ensure that our audience can effortlessly find essential and valuable information, providing assistance precisely when they need it.
The color scheme of this page harmonizes with our logo, creating a cohesive visual experience. Navigation is simplified with clickable buttons such as "Your Account," "Virtual Real Estate," and "Blockchain," allowing users to seamlessly transition between different sections. To access answers to their queries, users can click the downward arrow, and for a tidy interface, they can close the answer by clicking the upward arrow. This design ensures an intuitive and engaging experience for users as they explore and interact with the content.
Maintaining a unified design, this page aligns with the aesthetic of the FAQ page. Upon clicking the "Submit" button, users will receive a notification confirming the successful submission.
In response to user feedback, I acknowledge the desire for a simpler and flatter design. I'll focus on streamlining the layout, ensuring a clean and straightforward visual experience for improved user engagement and ease of use.
Version 2
%20%E2%80%93%20Questions%20opened.jpg)
In this updated version, the menu bar has shifted to the left side, placing more emphasis on centralizing the questions for a cleaner look. To enhance simplicity, I've replaced boxes with lines to separate different questions and removed unnecessary background colors, ensuring the content stands out. Additionally, clicking on various buttons in the side menu bar triggers a visual cue—the selected button now transforms to a distinct purple color, providing users with clear navigation feedback.
%20%E2%80%93%20with%20contact%20us.jpg)
This page is a continuation of FAQ page version 2. I've introduced a subtle thin line to distinguish between "FAQ" and "Contact Us" information. In cases where users can't find the answers they seek, a direct option to reach out to the company has been provided, facilitating seamless communication and support. This refinement ensures a user-friendly experience, blending comprehensive FAQ resources with accessible contact options.
%20%E2%80%93%20with%20contact%20us%20-%20Desktop.jpg)
Final Version
In this final design iteration, once users submit their message, a notification seamlessly appears on the same page. This eliminates the need for additional actions, allowing users to continue browsing. The central part has undergone a refinement, with lines replaced by well-defined titles, spacing, and strategic use of color to distinguish various sections.
For a more dynamic user experience, typing text in the input area starts in gray and transitions to a vibrant purple after completion.
The top and bottom menu bars maintain consistency with the design on other pages, ensuring a cohesive and polished overall look.
Link: https://www.superworldapp.com/contact/faq/
Home Page&Virtual Real Estate Page Redesign
Home Page Deisgn
In the first design, the emphasis is on dynamism with the text "SuperWorld" serving as a moving background to highlight the main content. Clear separation between sections is achieved through strategic use of color and lines.
For the second design, a multi-layered approach creates a sense of space, enhancing visibility of the title and video. The incorporation of part of the logo as a background pattern adds a dynamic and cohesive element to the overall design.
These refinements aim to balance visual appeal with functionality, ensuring an engaging and intuitive user experience on the home page.
In the first section, the three layouts provide diverse options for showcasing examples of places in SuperWorld. The first design introduces a gallery-style approach where users can hover over darkened photos to reveal the full image and details. The second design shares a similar interactive concept, requiring users to move the cursor for a detailed view. Lastly, the third design opts for a card-based format, presenting each example individually.
For the second section, various compositions of phone mockups, titles, and paragraphs are explored. These designs aim to effectively convey information about the mobile app in a visually appealing and organized manner.
These refinements seek to balance interactivity, aesthetics, and information presentation for an engaging and informative home page part 2.
In the final design, we've opted for simplicity by refraining from embedding the video directly on the page. Instead, a dynamic sentence moves around a globe model, serving as a focal point. This interactive element links directly to the video, maintaining a clean and straightforward layout. This refined approach prioritizes user engagement and ease of navigation while effectively directing attention to the video content.
In this refined version, the information section and examples of places section have been seamlessly integrated to enhance clarity and deliver comprehensive information. By combining these sections, the design aims to present a cohesive narrative, allowing users to understand and explore SuperWorld seamlessly. This integration not only streamlines the user experience but also ensures that relevant information is presented coherently, contributing to a more unified and engaging home page.
In the mobile app section, the background color has been harmonized with the AR mobile app page, establishing a visual connection and a sense of unity across the design. This refinement aims to create a cohesive and seamless experience for users as they navigate between different sections, fostering a sense of continuity and brand consistency.
Virtual Real Estate Page Redesign
For the examples of places section on the virtual real estate page, the design now follows the card layout introduced on the home page, providing a consistent and visually appealing presentation. Each place is showcased within a card, offering a clear and organized display of information.
In the information and introduction section, a refined layout has been implemented for enhanced clarity. Utilizing a clean and structured design, this section effectively communicates important information about virtual real estate, ensuring that users can easily grasp the key details. The overall refinement aims to create a seamless and visually pleasing experience on the virtual real estate page.
In this refined version, we've opted for the second design idea, using a screenshot of the window alongside the paragraph. This approach allows for a more detailed and easily composable presentation, ensuring that users can have a comprehensive view of the content. The refined design aims to balance clarity and visual appeal, providing an effective way to convey information in the information and introduction section of the virtual real estate page.
In the final design layout, the third option has been chosen for its superior readability. This layout ensures an optimal and clear presentation, enhancing the user's ability to easily comprehend the content. To further improve user understanding, different windows have been strategically selected for various paragraphs, aligning with the content to provide a cohesive and visually engaging experience. This refinement prioritizes user-friendly readability and visual coherence in the design of the virtual real estate page.
Video Editing
In addition to my role in UI & UX design, I actively contributed to the video editing process. Together, we crafted an engaging introduction video aimed at providing audiences with a foundational understanding of SuperWorld. The video succinctly communicates what SuperWorld is and highlights the myriad possibilities users can explore within the platform. This collaborative effort ensures a comprehensive and compelling introduction to SuperWorld, combining visual appeal with informative content.
Introduction video link: https://www.youtube.com/watch?v=PVoVSrH8ZmU
Decentralized platform part
The video is skillfully crafted by combining various elements, including footage, motion graphics, and special effects. This multi-faceted approach enhances the overall visual appeal and engagement of the video. The integration of these elements adds depth and dynamism, creating an immersive experience that effectively communicates the essence of SuperWorld.
In the initial motion graphic of the storyboard, the central theme revolves around the concept of a "decentralized platform" within SuperWorld, a virtual world in augmented reality. The visual narrative emphasizes the interconnectedness stemming from various people, places, and devices. This symbolic representation serves to illustrate the decentralized nature of the platform, showcasing how diverse elements seamlessly come together to form a unified, collaborative environment. The refined motion graphic aims to vividly convey the essence of decentralization within SuperWorld, fostering a sense of shared creativity and entrepreneurship.
In response to the need for clarity and to avoid overusing the Ethereum logo, we've decided to incorporate the SuperWorld logo and location pins in place of the Ethereum logo. Additionally, rather than utilizing a blank background or a world map, we have maintained continuity by keeping the rotating globe as the backdrop, seamlessly linking from the previous scene. The introduction of curve connections not only adds a dynamic element but also creates more space and perspective, enhancing the overall visual appeal and flow of the motion graphic. This refined approach ensures a smooth and coherent transition while effectively conveying the essence of SuperWorld as a decentralized platform.
100 x 100 meters part
For the subsequent motion graphic, highlighting "each plot measuring roughly 100 x 100 meters of 'real-world' space," the visual narrative will center around showcasing the dimensions and scale of these individual plots. The motion graphic will dynamically illustrate the 100 x 100 meters measurement, offering a clear and visually engaging representation of the real-world space within SuperWorld.
In the refined version of the motion graphic, we have incorporated a clear progression of squares increasing along the arrow, symbolizing the growth or expansion. As the arrow and numbers fade out, the corresponding words emerge one by one. In pictures 5-6, you can see the visual applied to the video, and to enhance clarity, a dark and transparent layer has been added to the background, providing a subtle darkening effect.
In response to the video's abundance of building footage, we've refined the motion graphic by substituting the footage with a crossroad scene. This change ensures a better alignment with the square shape, creating a more harmonious visual effect. The crossroad serves as a fitting backdrop for the increasing squares, enhancing the overall coherence and aesthetic appeal of the motion graphic.
Trace animation part
We've introduced a pin icon dropping into the stadium, followed by lines tracing both the inner and outer outlines separately. This animation adds a dynamic and playful element to the original video, injecting a sense of movement and excitement. By incorporating these visual elements, the refined motion graphic enhances the overall engagement and liveliness of the video, contributing to a more entertaining and memorable viewer experience.
In the final version, we've streamlined the animation by retaining only the inner outline, addressing the concern of visual complexity. Additionally, the pin icon now features a stadium picture, adding a personalized touch and enhancing the connection to the context.
Phone mockup part
In order to showcase the different functions of the app in the video, a refined approach involves employing a split-screen technique with three distinct parts. Each section will spotlight a specific phone mockup, allowing for a simultaneous demonstration of the various app functionalities.
We have continued to use phone mockups for each screen, clearly illustrating the distinct functions of the app. The screens showcase photos, videos, and texts separately, providing a focused and visually appealing representation of each feature.
In the final version, we have made the decision to use only the screenshot instead of a phone mockup, considering that a phone mockup has already been featured in the previous scene. This refinement aims to maintain a cohesive visual narrative while still effectively showcasing the app's various functions through clear and detailed screenshots. By eliminating redundancy, the final version ensures a streamlined and focused presentation of the app's features within the video.
Globe video editing
We've successfully removed the background from the globe video to ensure it does not interfere with other page elements. This adjustment allows for a seamless integration of the globe video, maintaining clarity and focus on the foreground content. The refined video is now optimized for the home page, enhancing the overall user experience without any visual disruptions.
This adjustment provides a polished and visually appealing appearance, allowing the globe to smoothly blend into the page without any abrupt edges. The refined design ensures that the video complements other page elements harmoniously, contributing to an aesthetically pleasing and cohesive user experience on the home page.
