Redesigning Luminoso
Strategic homepage redesign increased sessions on request-a-consultation page by 3,799%
Overview
Background
Luminoso Technologies helps organizations make sense of unstructured text—things like customer feedback, reviews, support tickets, and surveys—using AI-powered Natural Language Understanding (NLU). Founded at the MIT Media Lab, they create cloud-based tools that turn complex text into clear, actionable insights.
Problem
Luminoso wanted to refresh their website, especially the homepage, to better convert visitors into customers. My role was to update the design while staying user-focused, navigating differing internal opinions and creating graphics, icons, interactions, and a cohesive design style to bring the site to life.
Solution
I started by conducting a survey to understand how visitors perceived the website, then created design mockups for team review and joined strategy sessions to align everyone on flow and vision. From there, I developed the responsive homepage in WordPress, incorporating the agreed-upon design direction and refining the layout, content, and interactive elements based on feedback.
Understanding Users
I began by surveying clients and potential users to uncover first impressions of Luminoso’s website.
1. No product visibility
Users struggled to see what the product actually looks like or how it works. The homepage and videos offered some explanation, but without visuals or clear examples, it was hard to quickly understand the product or its value.
2. Unclear audience & function
The site hints that CX professionals benefit from Luminoso, but it’s not clear how the product fits into their workflow or solves their specific problems. Users wanted a clearer picture of who needs the product and why.
3. Issues with mobile experience
Mobile text and layout didn’t always scale, buttons and corners rendered oddly, and some colors were hard to read. Finding key information quickly was difficult without digging through multiple sections or videos.
Opportunities
Turning survey data into a clear design direction.
1. Show the product early to build trust
Users shouldn’t have to hunt for a product demo. Placing authentic visuals, interactive elements, and clear calls-to-action prominently on the homepage makes Luminoso’s value tangible from the very first scroll.
3. Design for mobile-first experiences
Many clients browse on phones. Improving responsiveness, adding a sticky menu and back-to-top button, and refining messaging for the main audience creates a smoother path to booking a demo or exploring use cases.
2. Clarify audience and product purpose
Half of survey respondents weren’t clear on what Luminoso does or who it’s for. There’s an opportunity to explain the AI tool’s role, its benefits, and the journey from raw feedback to actionable insight.
Design Process
From whiteboard to website, each step helped shape the final user experience.
1. Whiteboarding
This early homepage flow was mapped in FigJam for quick alignment. We later refocused to target CX professionals before development.
2. Wireframing
I structured sections with clear text hierarchy and spacing to ensure usability and site flow. I used Lato to match the company’s style guide.
3. Refining
Whiteboarding
This early homepage flow was mapped in FigJam for quick alignment. We later refocused to target CX professionals before development.
4. Building
I built the final designs in WordPress using Elementor widgets for reusable sections like the testimonial slider, fully tested for responsiveness.
Whiteboarding
This early homepage flow was mapped in FigJam for quick alignment. We later refocused to target CX professionals before development.
Wireframing
I structured sections with clear text hierarchy and spacing to ensure usability and site flow. I used Lato to match the company’s style guide.
Refining
High-fidelity mockups introduced a cohesive visual language and icon system. I also designed hover states for interactive cards to add clarity.
Building
I built the final designs in WordPress using Elementor widgets for reusable sections like the testimonial slider, fully tested for responsiveness.
I structured sections with clear text hierarchy and spacing to ensure usability and site flow. I used Lato to match the company’s style guide.
I structured sections with clear text hierarchy and spacing to ensure usability and site flow. I used Lato to match the company’s style guide.
Whiteboarding
This early homepage flow was mapped in FigJam for quick alignment. We later refocused to target CX professionals before development.
I structured sections with clear text hierarchy and spacing to ensure usability and site flow. I used Lato to match the company’s style guide.
Step 1: Whiteboarding
Step 2: Wireframing
Step 3: Refining
Step 4: Building
Loading...
Final Desktop Layout
Loading...
Hero Redesign Comparison
New Experience
I redesigned the Luminoso homepage to make the product clearer, more engaging, and easier to connect with.
I restructured the hero to tell a clearer story, moving from audience to problem, solution, benefit, and a call-to-action. I also designed an interactive “How Luminoso Works” journey that makes the product easy to follow step by step.
I built stronger product storytelling by creating branded mockups to anchor the three key advantages. To ground these visuals in credibility, I wove in testimonials and use cases that show the product solving real-world challenges for recognizable customers.
Finally, I reimagined the calls-to-action to feel more approachable and human. By designing them with clarity and tone in mind, I encouraged visitors to take the next step naturally, turning engagement into a seamless extension of the overall experience.
Impact
↑
0
%
New users on homepage
More visitors are discovering the site than before.
↑
0
%
Sessions on consultation page
Homepage clicks flow through to meaningful interactions.
↑
0
%
Active users on consultation page
Users are engaging deeply with key conversion content.
↑
0
%
Time on consultation page
Visitors spend more time interacting, moving through the funnel toward action.
.png)
Responsive
Interfaces scale seamlessly from desktop to mobile, keeping clarity at every size. Layouts adjust thoughtfully so that key content and actions are always easy to find.
Accessible
Our designs meet WCAG standards, with high-contrast text and legible typography to support all users. Navigation patterns and visual cues are crafted to guide interaction intuitively.
Consistent
Colors and styles come from the brand identity, creating a cohesive experience. This helps users recognize the interface instantly, reinforcing clarity and trust.
Responsive & Accessible
Designed to be inclusive, adaptable, and clear at any screen size.
“Working with Austen is a genuine pleasure as he thoughtfully considers each element of his designs to ensure they reflect the larger goals of our site visitors while being transparent with the strengths of our solution.”
— Kim Larson
Reflections
Because different directions were championed internally, the design went through several iterations. By prioritizing design exploration first, those changes could be made efficiently. Had they been discovered mid-build, they would have been far more time-intensive to adjust.
Lessons
One learning was the impact of lengthy strategy discussions on the overall timeline. In future projects, I plan to set clearer parameters around meeting scope so that more energy and resources stay focused on design and development.
Beyond
The redesigned homepage improved clarity and usability, but my complete vision included a custom vector hero graphic to strengthen storytelling. The mockup below shows the direction I intended for the final experience.
Retrospective
More Projects
← Previous
You Grow Girl! Website Redesign
A speculative case study where we took their single-page website and crafted a fresh, engaging site concept to showcase their brand.
Next →
Reality Kitchen Nonprofit Redesign
A collaborative effort with a small design team to strengthen community connection and create a trustworthy user experience to boost donations.
Loading
.
.
.