Lolo Gifts
Web app for gift curation of local small businesses.
Client: Lolo Gifts
Role: UX/UI Designer (Team of 5)
Toolkit: Figma, Miro, Zoom, Usertesting.com
Duration: 5 Weeks
Background: Lolo Engagement is a dynamic startup committed to empowering local independent businesses through an innovative monthly gifting subscription service. With a mission to strengthen professional relationships and foster meaningful engagement.
Challenge
The client wanted to improve user retention during the website sign-up process. The current flow lacked clarity on service benefits, and the outdated UI did not align with the company’s branding. Our goal was to enhance both functionality and design to address these issues.
My Impact
I worked on redesigning multiple screens of the product and led a team of 5 designers. Providing guidance, feedback and overseeing project timelines, ensuring our design deliverables are completed on time and within the project scope. I concentrated on updating the old designs, developing a new design system, creating components, and enhancing the user experience for both new and existing users.
My team and I developed a set of targeted questions to better understand our client's needs and enhance the user experience for Lolo Gifts. During our discussions, the client highlighted their need for a smoother sign-up flow that clearly communicates the value of their services, helping users engage more effectively with their platform.
Heuristic Evaluations: Our team evaluated the current design of Lolo's website and came across a few issues. We addressed these flaws in the heuristic evaluation and presented our findings to the client.
Some fonts have readability issues
Improve the nav bar to conform to industry standards
Lacking a sign-up button for new users
Missing location look up in the sign-up flow
Lacking a clear way to go back or return in the sign-up process
Competitive Analysis
Client Giant is another online gifting subscription website for real state and local businesses. They have a simple minimalist design that's easy to navigate through. We took a look at their services and sign-flow process. This information will be helpful to understand the way a gifting engagement platform functions.
Key Takeaways:
They have clear instructions on what to do on each page.
Users have the ability to add contacts manually or import a CSV.
Simple menu navigation with clear buttons.
User Stories
After looking over the research and competitive analysis, I wrote up some user stories to help us gather a few ideas about the features we would like to implement. I organized the user stories from high to low priorities.
Sketches
I've created a few sketches for the email preview screens because our client has observed that users frequently skip this step rather than engaging with it. It seems that the value of these screens isn't immediately clear to users. To address this, I propose simplifying the screen to highlight the most relevant information for the user. Below, I’ve included examples demonstrating how both the recipient and sender will view the gift details and the redemption process.
Wireframes
Given our tight schedule, I went ahead and created some rapid wireframes to help our team decide which ideas to pursue. I got inspiration from Client Giant and other subscription websites to develop these initial concepts. Here are some wireframe examples I created.
Moodboard
We team created a mood board to focus on the brand identity and highlight UI inspiration to get an idea of how other websites are visually designed.
Style Guide
This style guide was created to show which direction we took for the overall design decisions we took the emphasis on the color palette, typography, iconography, and buttons. We annotated some components to help specify the UI for developers to identify button hover states.
Navbar Redesign
The team and I discussed several issues with the current navbar: it lacks context, uses confusing terminology, and doesn’t include a sign-up link, which could be puzzling for new users. Additionally, the logo and links are misaligned, and the "What We Do" link doesn’t accurately reflect its destination.
To address these issues, I redesigned the navbar by removing the "What We Do" link and realigning the logo to the left. I also simplified the link arrangement and updated the wording for clarity. Additionally, we decided to add new buttons for sign-up and dashboard access.
Sign-Up Redesign
We noticed their sign-up page doesn't go well with Lolo Engagement's theme. I revamp their sign-up page to make it go well with Lolo's color scheme. I added their logo with a simple welcome message, followed by the sign-up details Lolo users need to fill out to gain access to their services.
Email Preview Redesign
We aimed to enhance the email preview page, which is a crucial step for gift receivers. I took the initiative to develop the second part of the email preview and included annotations to clarify the flow for the client.
Client Feedback: The client was unclear about the functionality of the modal pop-up and requested a redesign with a similar flow.
In response, I created a new design version that mirrors the current process, as the client seems more familiar with this approach. The updated design features a more polished look, incorporating imagery, additional buttons, and a gift message. We also added double back and next buttons to streamline navigation, eliminating the need for users to scroll excessively.
The client approved the second redesign, expressing satisfaction with the outcome and confidence that it will improve user understanding of the functionality.
Hi-Fi Screens
The primary objective was to enhance the Lolo Engagement sign-up experience, ensuring users can easily navigate and fully appreciate the services offered. I focused on refining the on-boarding flow, including the sign-up process, contact uploads, email preview, subscription plans, and confirmation page. Additionally, I aimed to improve spacing, alignment, and overall styling for each of these components.
Desktop Prototype: I am excited to present our prototype, showcasing interactive elements to highlight key user flows. With Lolo Engagement's refreshed, modern design, this prototype will walk you through the thoughtful user journeys that bring these screens to life.
Usability Testing
We implemented a testing plan using usertesting.com, where we tested 5 users to evaluate the prototype we developed. Our goal was to gain deeper insights into their overall impressions of the design and functionality.
Key questions included:
Do you understand the importance of uploading contacts to Lolo’s platform?
What were your initial thoughts when navigating to this section of the website?
During the signup process, did uploading contacts feel overwhelming?
Were you able to easily access your dashboard?
Testing Insights: Overall, the feedback was positive, with only a few users expressing confusion about the wording on the 'Upload Contacts' page, specifically the phrase '500 is the maximum. Some users mistakenly interpreted this as the minimum number of contacts required. Based on their suggestion, we revised the text to 'Maximum number of contacts that can be uploaded is 500' to eliminate any potential confusion moving forward.
Client Hand-off
For the final deliverable, we provided a detailed handoff, annotating each screen in our user flows to guide developers through the functionality of every element. The UI specs include precise details on hover states, as well as the navigation and progress bar components, ensuring clarity and alignment during the development phase.
Conclusion
I thoroughly enjoyed collaborating with the team and our client on Lolo Engagement. This experience helped me grow as a designer, honing my ability to advocate for my designs while offering alternative versions to enhance the user experience. I’m grateful to have been part of a team that worked cohesively to meet tight deadlines and bring such a meaningful project to life.
Reached the end? Plot twist—there’s more to see!
