App Launcher
UI Design | Visual Design
Team:
1 Product Owner and Engineers
Duration:
Nov 2024 — Dec 2024, 3 weeks
My Role:
Product Designer
Background
EA provides multiple applications that are used by educators across many states. Previously, separate links were required to access each application. However, with the addition of new applications, this approach has become increasingly inefficient.
My Contributions
To address this issue, I designed a portal that enables users to access all applications. This portal is now utilized by administrators and educators in California, Texas, and South Carolina, helping them improve efficiency and save valuable time.
Workflow
Users can log in to the website using their social accounts and select their tenant if they have more than one. Once selected or there is only one tenant, they will be directed to the portal, which displays a view of all available applications with environments.
Wireframing
Each card contains an icon, name, explanation, and a dropdown to select product environments.
Vertical Layout
✅ Pros:
Easy to scan and matches the common reading patterns.
❌ Cons:
Vertical cards can lead to excessive white space, making the interface feel inefficient.
Horizontal Layout (Selected)
✅ Pros:
Can fit a lot of information in a small horizontal area, making it ideal for layouts with multiple items in a row.
❌ Cons:
It will be more difficult to develop for engineers.
Painpoint #1 Single vs. Multiple Environments
Most users won’t have multiple environments for each app, meaning they would need to open all the dropdown menus to check if additional options are available.
Situation 1: If there is only one environment,
it will be production, and there will be no dropdown, as the user doesn't need to make a selection.
Situation 2: If there are multiple environments,
Type A: If there is a production environment, it will default to "production", as it is the most commonly used environment.
Type B: If there is no production environment, it will display "Choose" to allow the user to select.
Painpoint #2 Alignment
If there is no dropdown, the cards will have different heights, making it difficult to align with the others.
Option 1: Use tags to select
✅ Pros:
Users will see all the options without having to open the dropdown.
❌ Cons:
However, there are limitations with the addition of environments.
Option 2: Move to the same line
✅ Pros:
Move the dropdown to the same line as the button.
❌ Cons:
However, this approach is not scalable if longer text is needed.
Option 3: Combine with button
✅ Pros:
Combine the button and dropdown into a single component to ensure it doesn't affect the layout, providing a more consistent and scalable design.
Visual Design
Before
Some colors are similar, making it difficult to distinguish them. Fonts are not aligned with each other.
