northstar
Revamping an app to efficiently assist work routine of CN's truck drivers
project overview
NorthStar is an app that assists drivers in each workday’s process. The NorthStar team has launched a brand-new application in both tablet and mobile phone versions in response to new adaptations in the company's outdated ecosystem.
ROLE
UX Researcher / Designer
TEAM
2 UX Designers
1 Product Manager
1 Specialist Innovation & Projects
Development team
TOOLS
Figma, Sketch, Azure DevOps, Microsoft Teams, Agile Methodology
TIMELINE
May - December 23
OUTCOME
Responsive Application
how might we ...
"redesign the outdated NorthStar app to improve usability, increase productivity, and while ensuring driver safety"?
The old app was outdated in both functionality and design. It offered poor usability and required significant updates to align with the company's evolving ecosystem and adoption needs. When I joined the team, the main pain points had already been identified, and the team was working on revamping the application.
sketch-to-figma migration
While the development team focused on building the app's pilot version, I collaborated with another UX designer who managed the Sketch files, creating and updating UI designs based on feedback from the daily scrum meetings. As the lead for the Sketch-to-Figma migration on the NorthStar project, I coordinated the transition, ensuring alignment between the two design tools and facilitating smooth collaboration between the design and development teams.
01 LOCAL DESIGN SYSTEM CREATION
- ▶︎ Aligned with the company’s native design system for consistency
- ▶︎ Utilized components in mockups and prototypes
-
02 MOCKUP MIGRATION & REGULAR UPDATES
- ▶︎ Created and updated 750+ mockups in Figma
- ▶︎ Regularly refined UI mockups based on insights from daily scrum meetings
- ▶︎ Designed UI mockups for standard app features
03 PROTOTYPE DEVELOPMENT
- ▶︎ Developed 3 prototypes for the NorthStar project
- ▶︎ Prototypes were used for app demos, informal user testing, and the first official user testing session
observation & usability testing
As the app’s pilot version was being developed, the UX team prepared for a formative usability testing session. Before the testing, I was sent to Montreal for field observation. Based on my observations, I developed three categorized questionnaires. I then visited a terminal with another UX designer and conducted the usability testing session, gathering valuable insights to guide the app’s development.
01 FIELD OBSERVATION
- ▶︎ Observed a CNTL driver’s work process for a day
- ▶︎ Conducted 1 informal usability testing with the pilot prototype
- ▶︎ Shared insights and developed a questionnaire for official usability testing
02 FIRST USABILITY TESTING
- ▶︎ Facilitated the 1st usability test session with another designer
- ▶︎ Used the pilot prototype and 3 questionnaires for testing
- ▶︎ Collected insights, with 4 key ones implemented in app development
post-test refinement
After reviewing the analyzed insights, the team identified four actionable insights to implement within the project timeline. Based on these insights, I proposed UI design improvements for specific features with another designer. Simultaneously, I worked on the preparation for the second usability testing session, ensuring alignment between the proposed changes and testing objectives.
01 ACTIONABLE INSIGHT INTEGRATION
- ▶︎ Integrated Insight example: A feature for viewing past work summary was suggested, redesigned, and implemented as shown above
-
02 SECOND UT PREPARATION
- ▶︎ Created a detailed usability testing protocol document under the guidance of the UX manager
- ▶︎ Actively observed and gained insights into usability testing preparation and documentation
offboarding
HANDS-ON EXPERIENCE IN UXD, UXR, AND AGILE METHODOLOGY
During my 8-month internship, I collaborated with cross-functional teams in daily scrums, gaining hands-on experience with agile methodology and effectively applying it to the NorthStar project. Understanding the organization’s ecosystem was particularly rewarding, as it provided me with a comprehensive view of how our work contributed to the larger business context. I had the opportunity to engage in a variety of UX design tasks and conduct usability testing, all under the mentorship of a senior designer.
In September 2023, the redesigned NorthStar app was launched on the Play Store. It brought back fond memories of my first internship at CN Railway, and I couldn’t express how excited I was to see an application I contributed to being released for use. I am deeply grateful for the invaluable support and guidance from my team manager, the senior UX designer of the NS project, and the entire NorthStar project team.
achievements
- ▶︎ Developed 2 local design systems (ISAAC, mobile) for the NorthStar project
- ▶︎ Migrated 750+ UI mockups from Sketch to Figma
- ▶︎ Developed 3 prototypes from scratch (ISAAC pilot, ISAAC standard, and responsive mobile standard)
- ▶︎ Conducted 2 usability testing sessions (informal and formal) with drivers, collecting 5 results
- ▶︎ Designed the responsive UI for external drivers’ personal phones
- ▶︎ Created a detailed formal usability testing protocol document
