Project Owner: United Nations Office for Disarmament Affairs (UNODA)
Tools: Articulate Rise, Articulate Storyline, Adobe Creative Cloud
This project was developed as part of the Small Arms and Light Weapons Fellowship Programme, an ambitious global effort to strengthen national capacities and foster international cooperation in small arms control. The course was built using Articulate Rise, chosen for its responsive design and accessibility on mobile platforms. However, I wanted to go beyond the software’s usual limitations and give the course a distinctive, customized look and feel.
While Rise is efficient and user-friendly, it offers less flexibility compared to its “big brother,” Articulate Storyline. To bridge this gap, I implemented several creative adjustments:
- Custom Visual Identity: I began by designing a color palette. I selected a dark blue tone—symbolic of the United Nations but darker than the standard shade—to enhance contrast with white text and improve accessibility.
- Personalized Animations: I disabled the default automated animations and introduced custom animated GIFs (non-looping) to create unique entrance effects.
- Interactive Elements: To add a game-like experience and enhanced interactivity, I integrated Storyline blocks within Rise. These included:
- A switch interaction (on/off) that revealed hidden content.
- A dial interaction, where rotating the dial revealed different layers of information.
- Responsive Visual Design: I designed a custom course header in Illustrator, ensuring it maintained its proportions and quality across mobile and desktop devices.
- Mobile Optimization Trick: Because Storyline blocks display a static black screen with a play button on mobile devices, I developed a workaround by creating static cover images (using a screenshot of each block’s first frame) to preserve the visual flow and avoid visual interruptions in the mobile version. Additionally, I hide all menus and navigation buttons, so the block seamlessly merged into the Rise system. These small design hacks ensured a consistent user experience across all devices.
- Integrated Imagery: Some course visuals were color-matched to the background, creating the illusion of floating images that blended naturally with the interface.
The Lights On! interaction was designed as a Storyline block and integrated into the Rise module. I designed the switches and lightbulbs in Photoshop: every state of the switch/light was positioned in a different layer, so when the user clicked the switch, the bulb turned on, revealing the information. The background colour matched the Rise background for a better integration.
The final result was a course with a strong visual identity and smooth interactivity across all devices. The project was very well received and has been translated into several languages for broader international use.
The dial interaction was also a Storyline block integrated into Rise. The different positions of the dial revealed different pieces of information. A small sound effect was placed on each layer, triggered whenever the user turns the dial.
GIF images with no looping and with a matching background added dynamism to the static pages beyond the predefined animation effects (the graph has an entrance animation).