.png)
.png)
I was hired as a contract designer by FlyMoney Games LLC. to redesign the Comped app for the renowned Boston entertainment and nightlife company, Big Night Entertainment.
I worked under my project manager, Max Albert, and with a small team of developers. As the solo UX designer, I meticulously outlined project goals, curated an inspiring mood board, gathered valuable insights from secondary research, conducted multiple explorations, and presented a collection of proposed prototypes.
Comped is a mobile app that allows friends to gift each other food and drink at participating venues around the Boston area. Big Night Entertainment is a high-end restaurant and nightclub owner in the Boston area. All Big Night venues will be early adopters of this product.
The goal for the redesign was to simplify the app. In addition, the leadership wanted the redesign to take great influence from Venmo’s mobile app considering Venmo has parallel functionality of sending friends monetary gifts.
The leadership team was eager to launch their app, expressing their desire for a swift release: "If it was ready yesterday, we would've launched it yesterday."
Within a demanding timeframe, I completed the first milestone of the project in just four days, delivering a robust set of new designs. Despite the limited time available, I remained focused and efficient, laying a strong foundation for the subsequent stages.
I worked closely with my manager to clearly define the project goals, constraints, user flow, and user personas - ensuring a solid understanding of the project's direction.
They are bold, DYNAMIC, and classy.
Establishing the aesthetic, tone, and emotional context for the Comped app. We're talkin drinks all around.
I generated numerous sketches and user flows for each milestone and user experience.
One of my proudest achievements during the project was shaping the direction of the UI theme. An important consideration that arose was whether to incorporate both light and dark modes.
A dark theme suits our needs as a nightlife app better.
As we decided on dark mode, I took the initiative to deepen my understanding of its principles.This led me to present a detailed analysis of my learnings and a comprehensive plan to revamp the designs accordingly. Noteworthy modifications I introduced encompassed:
.png)
Unfortunately, purple does not do well on a dark background when it comes to meeting the AAA (Triple A) compliance.
At best, we can do what Netflix does. And that is to minimize the usage of the color.
Neutral colors like grey make up the majority of the UI in order to create a more natural shade and depth.
The previous shade of purple, derived from the logo, was deemed tacky. The updated UI purple showcases a more refined hue that aligns harmoniously with the project's aesthetic.
Likewise, the colors of the icons and linked text were modified to comply with accessibility standards. A lighter purple shade was implemented to enhance the legibility of smaller icons and text elements.
.png)
To establish a consistent visual identity, I developed a style guide. Given the primary brand colors of black and purple, I ensured that the selected colors adhere to accessibility standards (WCAG color contrast). Furthermore, to prevent eye strain, I consciously avoided using pure black or white tones.
Having no established set of basic elements or components, I designed and created over 20 new components. Following Brad Frost’s Atomic Design structure, I built a set of new components such as buttons, form fields, and search bars.
.png)
"I had the pleasure of working with Lily on a mobile app project and was extremely impressed with her strong design skills and relentless curiosity. Lily was always willing to go above and beyond and was an excellent communicator who was always available to answer questions or offer assistance. She was a pleasure to work with, and I would highly recommend her for any UX project. I have no doubt that she will be an asset to any team she joins." - Max Albert (Project Manager)
This experience has taught me 3 important lessons.
1. When designing for dark mode, utilize neutral colors, avoid pure whites and blacks, and create depth through shades of grey to enhance readability and visual appeal in low-light environments.
2. To expedite development time, prioritize sharing simpler pages like the settings page with developers, while also providing user flows in advance to aid their comprehension of the interconnectedness of different elements within the design.
3. Acknowledge the possibility that your design may not be carried forward and be prepared to align with the decisions and guidance provided by leadership or stakeholders involved.
For further information about my design decisions or to discuss the project in more detail, please feel free to reach out to me at hulilydesign@gmail.com. I would be delighted to share additional insights or simply have a conversation.
.png)