Seamless Connection
The myBWXT app, built for iOS and Android; a digital gateway that seamlessly connects the web experience and empowers mobile users. Everyone loves little teasers, you can use this space to add your own.
— PROJECT NAME
"Nuclear"
— ROLE
Team Leadership
Creative Direction
Design Critique
Project Management
User Experience
Cross-Functional Collaboration
— DATE
2024
As VP of Design and part of the project team at Rightpoint, I supported the end-to-end creative execution of the myBWXT app, BWXT’s internal employee platform, used for information, communication, news and other support. My team developed the foundational art direction and updated brand identity, our team was also responsible for building the full app including backend development and front-end implementation.
My role centered on guiding the visual articulation of BWXTs new style across all phases of the project; from the initial sketching and weekly sprints to the full launch app. I participated in internal reviews, provided ongoing design fidelity feedback, and ensured our implementation stayed true to the companies new branded direction.
- - Oversaw visual implementation of BWXTs brand and art direction across multiple design phases of their new design system
- - Participated in weekly internal reviews, providing guidance on design fidelity, layout, motion, and transitions
- - Collaborated cross-functionally to maintain creative alignment through ideation, development and full launch
- - Ensured consistent execution across all app components, including fonts, icons, colors and form vocabulary.
Developed using React Native, the myBWXT app offers unparalleled flexibility. This framework allows us to bridge the gap between the traditional SharePoint workspace and the dynamic capabilities of a mobile app.
What does this mean for the customer?
The myBWXT app unlocks a world of possibilities, leveraging the strengths of both web and mobile experiences.
Visual framework
How it feels
We leveraged Microsoft Fluent Iconography as a common visual language on App and Web experience.
https://github.com/microsoft/fluentui-system-icons
A unique button design language for the app, distinct from the buttons found on the SharePoint website.
Enhanced Tappable Area:
By increasing the button height in the app, we create a larger tappable area.
Prioritizing Mobile Usability:
Our custom design prioritizes mobile usability, making button interaction more intuitive and comfortable for users on the go.
Visual Engagement:
The app utilizes a more visually engaging button design than the standard SharePoint buttons. This includes color gradients and subtle shadows. These visual cues enhance the interactivity of the app and encourage user engagement.
We drew inspiration from the unique shapes and forms within the brand logo. These elements serve as building blocks reflected various app design components.
The dashboard cards provide a personalized gateway to key information. We offer the ability to leverage custom imagery on these cards. This allows for a more visually engaging and informative user experience.This is a description underneath your image.
We leveraged editorial content formats like Executive blogs to engage users ensuring a consistent brand experience.
Typography
Segoe UI serves as the base font for Microsoft SharePoint.
By adopting the same font throughout the myBWXT app, we create a sense of familiarity and visual continuity for users transitioning between the two platforms.
To ensure consistency with the broader Microsoft ecosystem and streamline development efforts, the myBWXT app primarily utilizes the Segoe UI font family, in line with Microsoft’s Fluent and Spark design systems. While this approach offers numerous advantages in terms of user familiarity and development efficiency, it also presents certain limitations.
Customizing typography within the SharePoint environment is a complex process, often requiring significant development resources. To avoid inconsistencies and maintain a cohesive user experience, we’ve opted to adhere to the mandated Segoe UI font family for both the app and web platforms.
Color Palette and Theming
Microsoft SharePoint Colors:
Base colors have been extracted from the Microsoft SharePoint color palette to maintain brand alignment and user familiarity.
These colors are stored as color styles within the BWXT theme file.
App theme Collection:
To accommodate different display modes, alias tokens have been created for each base color. These tokens represent color variations for light and dark mode and are stored as local variables within the BWXT theme file.
While the initial design concept adhered closely to the established brand color palette, subsequent iterations introduced variations due to several factors:
- Feedback and specific requests led to adjustments in the color scheme.
- The use of gradients and effects, while visually appealing, resulted in color variations that diverged from the original palette.
Navigation
How its organized
Prioritizing the employee mindsets
A framework for innovation
The myBWXT app breaks free from conventional app design by focusing on innovation within the modern digital workplace.
To achieve this, we’ve embarked on a comprehensive exploration of five key dimensions that define a successful digital work environment.
The first tab , "myBWXT," is the central hub for staying informed, connected, and empowered within the digital workplace. This core section prioritizes three key functionalities:
- Content & Knowledge Management:
- Easy access to relevant and up-to-date news articles, blog posts, and other informative content ensures users have the knowledge they need to excel in their roles.
- Streamlined Communication:
- This section provides users with a central location for accessing important announcements, updates, and internal communication channels.
- Powerful Search Functionality:
- The “myBWXT” tab integrates a robust search function, allowing users to quickly locate the information they need.
A personalized engine for enhanced Productivity
The dashboard acts as a personalized productivity engine. This design prioritizes empowering users by providing them with the tools and information they need to maximize their efficiency and work effectively.
- A key feature of the dashboard is its focus on personalized content. By leveraging Microsoft d365 user groups, the app can dynamically populate the dashboard with content specifically relevant to each user’s role, department, or function.
Tools
The “Tools” page takes center stage when it comes to streamlined task management.
- This section prioritizes user efficiency by showcasing a curated selection of functionalities specifically tailored to each user’s role.
The "Announcements” or “Alerts" tab serves as a central hub for all official internal communications.
- Company-wide announcements:
- Updates on organizational goals, strategic shifts, or upcoming events.
- Department-specific news:
- Targeted information relevant to specific teams or departments.
- Important policy updates:
- Clear communication regarding changes to company policies or procedures.
- Emergency alerts:
- Time-sensitive information requiring immediate attention from users.
The "Announcements” or “Alerts" tab serves as a central hub for all official internal communications.
- Company-wide announcements:
- Updates on organizational goals, strategic shifts, or upcoming events.
- Department-specific news:
- Targeted information relevant to specific teams or departments.
- Important policy updates:
- Clear communication regarding changes to company policies or procedures.
- Emergency alerts:
- Time-sensitive information requiring immediate attention from users.
Accounts
- The “Account” tab in the myBWXT app functions as a utility center, empowering users to personalize their app experience and manage their preferences.
Experience
How it works
OS App presence
Guided onboarding flow
The myBWXT app prioritizes user productivity.
Visual Alignment with OOTB SharePoint Cards:
The cards within the app visually echo the design language of the OOTB cards found on the SharePoint web experience. This fosters a sense of familiarity for users transitioning between the two platforms. Elements like background color, typography, and basic layout remain consistent.
Focus on Link Functionality:
These dashboard cards function primarily as a central dispatching point or repository of links. They are not integrated with third-party APIs to minimize potential complexity within the app.
Efficient Information Delivery:
Clicking on a card triggers a quick view modal. This modal displays a concise list of links, each directing users to a specific area of the web experience or internal tools. This avoids cluttering the app interface with unnecessary information.
