Overview
The Company
Lumenus is a company that specializes in wearable tech to enhance safety, experience, and performance. The CEO, Jeremy Wall, developed an intelligent bike light called ioLIGHT to boost visibility and safety for urban cyclists.
My Role: UX Design Team Lead | Interaction Design
Timeline: 3-Weeks
Team: Jahla Pope, Johnny Young, Rodrigo Sabillon
Tool: Figma | Miro | OptimalSort | Otter.ai
Discover
A closer look at our competitors
We started the project by analyzing the websites of Lumenus’s direct and indirect competitors, aiming to understand the industry better. We reviewed:
• The design layout
• Features offered
• Areas of opportunity
• Shopping experience
Getting to know our audience
1) User Interviews
We conducted 8 in-depth interviews with casual weekend and avid everyday cyclists to gain insight into their motivation to cycle, occupation, primary concerns, purchasing behavior for bike accessories, and willingness to spend on a "smart bike light."
2) Survey
The interviews provided valuable insights into users' personalities and lifestyles, but we needed more crucial information regarding their online shopping habits.
Therefore, we sent a survey to 18 participants asking about their preferred websites for buying bike accessories and the reasons behind their choices.
Key Insights
Target Users
Users cycle 4x a week and prioritize visibility, especially at night.
Shopping Preference
We needed to prioritize the mobile experience since our users are always on the move.
Payment Method
Apple Pay and PayPal were the preferred payment methods for online shopping due to their convenience for busy users.
Personas & Journey Maps
I often relied on our personas and journey maps when making critical design decisions as they illustrate the users' needs and emotions before, during, and after visiting the website.
Define
Click to enlarge
Casey’s Retrospective Journey Map
Design Workshop
To generate some ideas quickly, I facilitated a design workshop that spanned over two days. Given the urgency of the project and the need for a responsive design, I split the work with my colleague. I focused on the desktop version while Rodrigo handled the mobile version.
Design & Deliver
Usability Testing
Clear Actions
In our initial round of usability testing, we discovered that users needed clarity on scrolling down the site. This resulted in a brief moment of hesitation before they continued browsing. Therefore, we added an arrow and text to make it more transparent.
Faster Checkout
Users found the checkout process long due to the separate sign-in screen. We streamlined it by asking for sign-in information while adding shipping details, leading to a smoother experience and confirmed by our usability test.
Floating Primary CTA
The final adjustment we made was allowing users to select the "Shop Now" button from any point on the homepage. Users shared it would improve the buying experience by eliminating the need to scroll back to the top of the page when viewing the product details.
Final Words
Next Steps
With more time, I would have liked to create an additional layout and conduct an A/B test. As user attention spans continue to decrease, exploring new methods to keep them engaged on the website and enhance their shopping experience is essential.
What I Learned
Leading a team
This project provided me with my first opportunity to lead a team. Being accountable for the project's success taught me to pay closer attention to the details, strategize, and work with different personalities.
Functionality and design aesthetics
Design for functionality first to create a delightful UX for all users. This project reinforces the fundamental UX principle that I should always strive to design for functionality first to create a delightful experience for all users.