LUMINA
An app that lets you create, use, purchase, and share lava lamp designs with others.
ROLE
As the sole UI/UX designer, I researched and found solutions to problems that came up during the design process, conducted interviews throughout the process and integrated the feedback into the design, and built an interactive prototype, which was then used to conduct further user testing,
OBJECTIVES
A high-fidelity interactive prototype site and app for desktop and mobile platforms. Both platforms need features such as editing lava lamp colors, navigating to the required screens for purchase and editing, and maintaining visual theme of lava lamps.
CHALLENGES
The target audience for this project was loosely defined as the concept could be targeted towards a general audience. There were also limitations in Figma that could not fully convey the intended visuals, although workarounds were found.
OUTCOMES
A high fidelity interactive prototype for both desktop and mobile platforms developed through iterations of design and constant feedback from users and peers. Both the visuals and the features of the app were validated through interviews and tests with users from a general audience.
Overview
This project was concerned with the development of a prototype for a lava lamp app that would allow the user to create custom lava lamp designs which they could purchase or use as an animation for their phone background. The app would also have the feature to share these designs with a wider audience.
My task was to build a functioning prototype for the concept for further testing, while keeping in line with the visual theme of a lava lamp. While this was difficult to do well in Figma alone, I managed to do it using a method gathered from my research.
My target audience was not well defined for this project, so I decided to focus on a more general audience who are interested in purchasing and using lava lamps or similar visuals.
Research & Theme
Starting off, I already knew I would need to integrate the concept of a lava lamp into the visuals. I began by researching how I might accomplish this in Figma. Initially I thought about creating a timelapse of a lava lamp in action, then looping that video as the background of the prototype. However, this would not allow me to fully customize the colors and design of the lamp.
During my research however, I found a post on Figma Community Board called "Attablob — create animated blobs!". This post contained a method to create "blobs" that had customizable shapes, sizes, and colors, which was perfect for recreating the visuals of a lava lamp to a degree suitable for testing.
The blobs were set up in different positions with different delays, and then set to smart animate through their variants. This ensured that some level of randomness could be achieved for the shape of blobs.
The post in question, and how it was used in the project, along with a GIF of an example screen.
To complement the bright colors and moving visuals of the background, the menus and buttons were kept relatively simple, using only black and white colors. This was both meant to simulate a sleek, glass-like feel and bring attention to the background as the only element with color onscreen.
Features & Feedback
At this stage I had decided how to implement the theme across the prototype. The next step was to begin the process of making screens and getting feedback. Since the features of the app were already decided I did not have to do much research in that regard.
All the screens made for LUMINA project
For the mobile and desktop sites, the homepage consisted of a call to action to purchase a lava lamp, along with the option to customize the colors of the background. This setting would be saved across the site and suggested for purchase when shopping. The site also offers a method to search for designs shared by other users. Both sites also contain a call to action to download the app for more features such as setting the lamp as a moving phone background.
The app consists of screens to customize designs to a greater degree. It also shows the user their saved designs, and lets them browse for other designs through the Search screen. The app itself also has a Shop screen that would allow users to select a design for purchase as an actual lava lamp from directly within the app.
Throughout all the screens, the visuals are kept consistent, with white and black being used for buttons and frames and the only color being the animated background.
Both the lamp and the phone in the site were kept transparent so the background could fill it in
On both desktop and mobile sites, the icons for the lava lamp and phone were kept transparent so the animated background could fill it in. This was done for both aesthetics and to convey the idea of the app and service.