RightOn
Strengthening RightOn’s visual identity and user experience through card design
+++ at a glance
Eliminated Inconsistencies
Reduced variable components and unified styles to create a strong brand identity.
Streamlined Development
Standardized design elements to optimize feature development across teams.
Improved User Experience
Established a cohesive visual system for an intuitive and polished experience for users.
PROJECT SCOPE
RightOn found themselves buried under inconsistent and variable styling across its web apps and website…
As a startup that has undergone multiple iteration in both design and development, the lack of a standardized design system had led to visual inconsistencies and inefficiencies creating :
Extended Feature Delivery Time
Too many components for the same purpose overloaded the development team.
Confused Users
Inconsistent visual styles created a disjointed experience.
To resolve these issues, the UX team was tasked with establishing a cohesive design system to unify branding, enhance usability, and streamline the design and development process.
Above: Highlights some of the inconsistent styling across RightOn's different screens (Click to enlarge)
THE PROBLEM
How might we unify design inconsistencies to strengthen brand identity and streamline the design and development process?
Sneak Peek
A quick product preview of the solution
TLDR: Cards got a glow-up—cleaner, clearer, and much more user-friendly.
Redesigned cluttered cards into clean, intuitive layouts, creating a cohesive design system that improves navigation, scanability, and overall user experience.
UNDERSTANDING UI CARDS
Cards were everywhere, but their designs felt unintentional and hard to use.
At RightOn, cards were used for various functions like game creation, image uploads, and displaying game details. However, they were cramped, cluttered, and hard to navigate, with design choices that didn’t prioritize the user’s experience.
So that got me wondering, what makes a good card?
Instead of jumping right into ideation, I took some time to step back and study the design practices that make an effective and user friendly card component.
The key takeaway was this: cards should make it easy for users to find important information. When designing cards, three principles are essential:
Visual Hierarchy
Consistency
Purposeful designs
With these insights in mind, it was time to start remaking the RightOn cards.
ITERATION
I redesigned the RightOn cards in three rounds, using feedback and data to improve each version. This sprint focused on three main cards: Create Question, Create Game, and Game Display.
Create Question Cards: Establishing Visual Hierarchy
Iteration 1: UI Changes
To improve the UI, I kept the overall layout consistent while making key refinements to enhance clarity and usability. The first iteration focused on quick yet impactful changes:
Changes Made:
Adding more breathing room by increasing margins to make the content feel less cramped.
Creating uniformity by using consistent border radii for all components inside the card.
Softening the visuals by swapping out harsh colors (like the grey) for more subtle, balanced contrasts.
Improving clarity by updating placeholder texts to make them more user-friendly and intuitive.
Iteration 2: Layout Changes to Optimize User Experience
The main feedback from Iteration 1 was that the structure of information created a disconnect in the user flow. To enhance clarity and usability, I refined the layout by restructuring the hierarchy of information:
Creating a Logical Flow
I implemented a Top-Down Hierarchy flow, placing organizational items towards the top, and content items at the body.
The interface now follows a structured flow, guiding users through a clear sequence:
Set preferences → Enter content → Add media → Review and finalize.
Layout from iteration 1 design
Fixed Layout from iteration 2
Iteration 3: Intuitive Image Upload
Previously, users chose between two separate buttons to upload an image. This was inefficient, requiring multiple screens and forcing users to switch if they changed their upload method.
To streamline the process, I combined both options into a single button, merging both methods into one seamless screen.
*Skip to the solution to see the final designs!
Game Display Cards
Iteration 1: Horizontal vs. Vertical Cards
Most of RightOn’s original cards used a horizontal layout, similar to the "Create Question" cards. However, for the Game Display cards, I found this format to be overwhelming and restrictive.
To improve readability and user experience, I experimented with a vertical layout, making content more engaging and accessible.
Iteration 2: Making Cards Easier to Navigate
The biggest challenge with the game display cards was navigation across different games:
Titles were getting cut off.
There wasn’t enough space for descriptions.
The layout felt cluttered and inconsistent.
Switching to a vertical layout helped, but the key improvement was ensuring consistency across all cards by aligning titles and balancing content.
Version 3 ended up being the best choice for the game display cards. It kept the design consistent while optimizing scanability, especially when laid out in a grid.
Final Designs
The Old Cards, But New & Better
After lots of brainstorming, meetings with my UX team, discussions with the dev team, and even input from our CEO, we finalized the card designs to be implemented in the new design system.
Old vs New Cards
Seeing the designs in context…
DESIGN SYSTEM
With the card components finalized, it was time to put the finishing touches on the design system
By combining the card components, navigational elements (designed by another talented intern), and solidifying text and color styles, we were able to create an official design system for RightOn to use moving forward.
Above: Highlights our explorations with accessible color combos
DESIGN HANDOFF
With everything ready to go, it was now time to officially hand them off for the dev team to start implementing.
To finish up the handoff process, my team and I went to work with documentation of the new components, and redlining when necessary.
Above: A section of the "Create Cards" documentation, following RightOn’s standardized format.
IMPACT
It didn’t take long to see the importance of this design sprint.
As my internship progressed, we began new sprints focused on improving existing features and designing new ones. It became clear that the time we invested in creating a well-organized design system with clearly defined components, played a huge role in boosting our team’s productivity and efficiency. The two main areas I saw directly impacted were:
Brand Connection
New features now seamlessly fit the RightOn brand, while the updated cards ensure designs are intuitive, accessible, and effective.
Time Efficiency
With the new design system in place, development time has been streamlined. Developers can now implement features quicker than ever, freeing up more time for testing and iterations when needed.
Even feature exploration became more productive, thanks to the clear guidelines we had established.
Above: Feature explorations with new design systems
See next project
