Concept the UI for Spectra, an Interior Design agency specializing in lighting solutions. Focus on interactions that play on the concept of light and lighting.
Spectra, a creation of Suits & Sandals - Web Design and Branding Agency.
UX and UI design with Webflow development handed off to dev. 1-2 week turnaround.
This project's main focus is UI and interaction exploration, as the website is meant to act as a showcase to potential clients, of Suits & Sandals’ creative and interaction design capabilities.
Even so, usability is an integral part of any project, so I kept it as a main consideration throughout design.
Due to the short turnaround for this design project (1-2 weeks) we focused on keeping things simple and minimalistic.
As the brief stated that Spectra’s business focuses on lighting design, we decided to use light, or lighting up as a central theme in the design.
I was given this already-built menu design as a starting point for inspiration. The main pages to design were the Home page, a Portfolio (Work) page, and a contact page, but I was given freedom over which others to add.
Given the brief, I knew we wanted a modern feeling UI with heavy focus on interaction (while remaining simple and highly usable).
A fallacy I noticed during this process is that a lot of these designs that look engaging and simply cool, require users to scroll endlessly to reach the bottom of the home page due to the overburden of interaction elements. It means a few scrolls can move you inches down the page creating a really frustrating experience. This is an error I wished to avoid.
At the same time, I found some inspiring elements such as floating cards, timelines and overlaid tiles that may be suitable to incorporate into Spectra’s design.
The world of lightning design is a lot bigger than one may initially think - competitors abound. This was helpful because I wanted to get an idea for which essential pages to design.
From looking over competitor websites, I decided that including a Services page was necessary both to give information and increase conversion rates. This should also be split between residential and commercial solutions and possibly include landscape (outdoor design).
An About page also features prominently across all websites as it builds trust and helps the businesses make themselves stand out. Conversely, while a News page would be a bonus, it’s not a necessary addition and due to the short turnaround for this project, might be omitted.
In terms of the UI, most of these websites follow very similar conventions, mainly using a white canvas to host descriptive text and images. Since this project’s real focus is to highlight UI experimentation, I won’t be drawing from these websites for inspiration.
A conversion funnel is really important in service-based business websites as it gives visitors more chances and more incentives to make a conversion. In Spectra’s case this would be measured by contact forms filled or calls made and emails sent.
The funnel is a way to move users through the website towards the conversion point (in Spectra’s case, the Contact page) without resorting to the Nav Menu. It answers the question “how do we organically move users through all the relevant pages and to our conversion [contact] page?”
The answer is to add CTAs which connect from one page to the next and also give the opportunity to skip directly to the contact page at any point that interest is sufficiently piqued. Therefore the Services page links to the Portfolio page, but also the Contact page. The portfolio page connects to the About and Contact pages, and so on.
Regardless of the page of entry into the website (be it the Home page, the Process page) users are funneled along the website where they can build up their knowledge of the company and services provided and are eventually nudged towards the Contact page.
Every page and section I designed has a specific purpose associated to it which is devised to either (1) create desire for the service; (2) establish expertise and trust; and (3) [ultimate goal] push users towards the contact page. The breakdown:
CONTACT
I decided the main design should be a dark UI, with the option of switching to light UI for accessibility purposes. The reason for this is twofold: it makes the visual representation of “lighting up” much more obvious, as we can incorporate light elements to highlight sections, and it is very modern feeling, given that dark UI has been popping up a lot in the advent of AI.
To drive home the light imagery, I designed the dark-mode/light mode button as a lightbulb.
I decided against (the very tempting idea of) using the cursor to light up otherwise dark sections because while visually engaging, this would be a usability nightmare.
I used Chat-GPT to create filler text that’s more descriptive than the usual Lorem Ipsum and that helped me tell the story of a high-end boutique lighting design agency.
I found soft, suffused glows and blurs, interspersed with occasional simple lines, would both help render the image of lighting up space, and give a sophisticated, minimalist feel that allows the focus to fall on interactions.
Images would remain a little darkened until selected - either by hovering or by scrolling. At the selection point, the image might glow, which helps it stand apart from others and helps render the image of lighting up.
Some examples of different UIs is shown below.
We found the best way to illustrate motion in this project would be with storyboarding to show how each frame flows into the next. From the Home page, I wanted the Portfolio section to open into a preview of one of the company’s featured projects.
I had initially designed this as a scroll-zoom into project, as it provides a very elegant transition, but decided against it as its usability isn’t optimal given that it traps users into a long scroll sequence before they can move onto the next section.
This sequence is therefore activated by hovering over the project and clicking on it, giving users much more agency over their experience.
After presenting the initial designs, I realized I didn’t like the look and feel of the buttons and initially I couldn’t quite put a finger on it. They didn’t give the “expensive,” “sophisticated” feeling I was seeking. Eventually I realized the corner rounding was too round and “friendly” as was the color. I changed the corner radius to 2pt and changed the gold to a colder shade, using gradients more starkly. The improvement was notable.
Upon team review, we decided the home section for Our Process had too much information and wasn’t sufficiently visually linked to its corresponding page. I was given feedback to make sections more thematically linked to the design of their corresponding pages. An example of how I redesigned the Our Process Section to match the our Process page is shown below.
Given the feedback, I ensured each Home page section would tie in or hint thematically to its corresponding page, while flowing cohesively between themselves.
Each of the pages laid out below as a storyboard to help visualize the motion.
Again, due to time constraints the design system I built is fairly minimal. I built it along as I created my designs, and revised as needed.
It seeks a sweet spot between essentials and providing guidance to developers and to any other designer who may build upon it. Therefore, aside from details such as border radius for buttons and some ready-to-go components, it also details the “feel” of the project and UI elements that may be used in creating future pages, components or features, such as soft gradients and blurs.
Colors were carefully measured for contrast against both dark backgrounds and light ones, and are labelled accordingly. I made sure they would all pass AA accessibility standards.
Given that the turnaround for this project was just over a week, time, of course, was a major constraint for this project.
This is more of an observation than a limitation given that I had free reign over open source and AI-generated images, since Spectra is a fictional company. I noticed however, in the course of designing this, that companies that make use of imagery as a UI feature of their website, are severely limited by the quality of their imagery. No matter how beautiful or sleek a design is, if the images are not high-quality, or don’t match the mood, the design ends up looking very disjointed. This means that working with pictures is a risky consideration.
As this is an internal company project, whose purpose is to showcase UI and interaction design, we will not be tracking analytics for click-through rates or funneling, or to measure improvement, so the project is limited in terms of usability testing.