Play Game
Year
2022
Project type
Interactive Experience / Game
Skills
Concept Art | UI design
The Octopus Cycle is an interactive experience website / game that takes users on a captivating journey through the fascinating life cycle of an octopus. This project aims to provide an educational and entertaining experience through a gamified approach, combining interactive elements, engaging visuals, and a wealth of knowledge about these incredible creatures. The Octopus Cycle is designed to captivate users of all ages, fostering a love for marine life and promoting environmental awareness.
Traditional educational materials lack engaging and interactive experiences, making it challenging to capture and sustain users' interest in learning theoretical knowledge.
The driving goal was to transition 4Industry’s customers over to the ServiceNow platform. To achieve this, we needed to reach feature parity with 4industry's existing product.
Our approach as a platform is to think broadly and adapt specific requirements to fit multiple use cases, therefore, our vision was to leverage the opportunity from the acquisition to tackle pain points from our backlog and enhance the user experience. Our ultimate goal was to create a generic solution that can be customized for different agent personas - FSM field technicians, ICW operators, Healthcare workers, Retail employees and more, enabling them to complete their work more efficiently.
Our design goals:
Modernize the UI layout with clearer hierarchy and section organization
Introduce new inline actions per input: comments, attachments, and navigation to other screens
Introduce new input types: descriptive elements and a numeric slider
Reduce the number of taps required to complete a workflow
Give admins greater configuration control over workflow optimization
Improve the user experience on Tablet and iPad devices
Given the large scale and fast-paced nature of the project, our research strategy focused on efficiently leveraging existing insights:
4Industry’s approach is built on years of valuable feedback and insights from their legacy products and on-site customer workshops, these contributed to the requirements we received and many of our design decisions
On top of that, our design decisions have been shaped by the backlog we’ve collected over previous releases from various BUs (FSM, EE, and customer requirements)
The team visited Brightspeed's Virginia office, B2C Telco FSM enterprise customer with ~1,800 technicians. A key quote from our mobile PM summed up the stakes:
“The upcoming mobile platform innovations will go a long way toward helping Brightspeed technicians. In particular, enabling inline editing and Improving the UX of inline choice lists literally solved over half of their most critical issues.”
As a platform team, we design a single product that must serve all customers - without knowing exactly who the end user will be. Every design decision needs to be flexible enough for admins to configure it for any persona. This means solutions can't be tailored to one persona; instead they must be configurable by admins to fit any use case.
How we addressed it: Rather than designing for a specific persona, we shifted control to the admin layer while considering the needs to multiple personas. Every new feature - descriptive elements, inline actions, section grouping, slider input - was designed to be fully configurable. Admins can decide what appears, in what order, and how it behaves, allowing the same screen to feel tailored for a factory operator completing a guided task or a field technician resolving an incident.
The 4Industry acquisition introduced a persona, operators are equipment owners working in demanding physical environments - helmets, dirty hands, loud surroundings - often with limited connectivity. They're not tech-savvy, they work in shifts, and they need to complete guided tasks quickly and without confusion.
How we addressed it: We used 4Industry's years of on-site customer workshop insights as a design foundation, and translated the Operator's needs into generic, configurable features - so the same solution could serve them without excluding our existing personas. This included features like descriptive elements for user guidance, inline actions for reduced tapping and improved hierarchy and sectioning for easier perception, as well as considering edge cases of offline mode, ensuring large tappable areas for actions and accessible approach to sliders.
The existing input form had accumulated significant UX debt. The layout was flat, visually undifferentiated, and non-scalable. Users were forced into repetitive back-and-forth navigation just to complete a single form - too many taps, too much disorientation, and no room to grow. On top of that, there was no way to provide contextual guidance inside the form itself. If a user needed instructions or reference material, they had to navigate away entirely - breaking their flow and adding unnecessary friction. This was a hard blocker for 4Industry's Guided Task model, which relies on inline instructions and visual aids.
How we addressed it: We introduced a modernized layout with section grouping and clearer visual hierarchy. Inline choice selection, inline actions, and direct navigation from inputs dramatically reduced the number of taps required. We also introduced Descriptive Elements - a new configurable input type supporting a title, description, and image - giving users the context they need right where they need it, without leaving the screen.
The input form simply stretched responsively to fill the tablet screen - no real adaptation, no use of the extra real estate and not consideration for maximum readable width patterns. For users who rely on tablets in the field, this was a missed opportunity to significantly improve their workflow.
How we addressed it: We designed a dedicated tablet split-view layout - full task visibility on one side, with seamless sub-task navigation and a dedicated knowledge base panel on the other. Admins can configure which content appears in split view, making it fully adaptable to different workflows.
A redesigned input form screen - scalable, configurable, and built for every persona.
The redesign shipped as part of the Yokohama release and received strong positive feedback across teams and customers.
• ICW (4Industry) confirmed the new features met their requirements and were very satisfied with the enhancements
• BUs including FSM reported positive responses to the updated experience
• Inline choice lists and descriptive elements directly reduced the number of taps required to complete workflows
• Admins gained significantly more control over workflow configuration, reducing the need for workarounds
• The solution established a scalable foundation for future input types and actions across all personas
-poster-00001.jpg)
Through a thorough analysis of existing route planning apps and user interviews, the research identified that users were looking for more control over their routes and a more personalized approach to route planning.
To achieve this goal, the project had the following objectives:
Design a UI supporting and balancing different types of uses, allowing efficient daily use and full customization.
Provide users with additional data about their routes, improving their experience and giving them more control over their transportation choices.
The process began with a thorough analysis of existing route planning apps (Read more in CA research tab).Then, I conducted user interviews to gain insights into the pain points of the users and the problems of the existing solutions (Read more in Personas & User Flows tab).
The research concluded that most of the existing apps are limited in their ability to customize routes, leaving users with few options to optimize their route according to their preferences.
Daily use:
This is the basic, repetitive use of the app that is intended for everyday usage. It is designed to be efficient and quick, allowing users to quickly access the information they need, such as bus routes, schedules, and arrival times. This type of use is ideal for commuters or people who rely on public transportation on a regular basis, and need a quick way to plan a route.
Advanced use:
This is a more specific and customizable use of the app that allows users to plan and customize their routes. It is intended for users who want to make specific adjustments to their route according to their needs, plan combined routes or explore alternative options. This type of use is ideal for people who want more control over their route planning.
One of the main challenges was designing a user-friendly and intuitive interface that allows advanced route customization.
To solve this challenge, I introduced the route construction interface through a drag and drop function.Drag & drop makes the process of customization more intuitive and user-friendly, as it allows users to visually construct their route, provides users with a sense of control, and enhances the user experience by making the app more interactive and engaging.
Another main challenge was to design an app that caters to both daily uses and advanced uses. The app needs to provide a fast and efficient flow for daily/regular use, and a full customization flow for users who need to create a new route.
One of my approaches to solve this challenge is an initial onboarding stage, where users are asked to set their preferences on certain aspects of route planning. Using this data, the app is able to provide better and more personalized route suggestions, without the need for full customization, resulting in an efficient daily use experience.
The second approach to solve this challenge is the progressive disclosure approach, design that gradually reveals more information and features as needed, in order to prevent users from feeling overwhelmed. This technique can be used to support both novice and expert users, by providing a simple initial interface with advanced options available if needed.
In Yump, when a user searches for a route, they receive top suggested options based on their set preferences, as well as a tabs bar with general filtering options (Best option, fewest transfers, least walking). When a user wishes to further customize their route suggestions, they can select a suggested route and click "Edit". This leads to an advanced editing screen, enables users to easily construct their route by dragging & dropping, and adjusting various options.
One of the pain points I identified in relation to lack of control, is the lack of information provided to users about their routes.By providing users with more information, they can feel more in control of their decisions, and make educated choices when selecting from a few options.Which leads to another challenge - What information should the app provide, and how does it get that data?
Based on my research, I designed a set of features aimed at providing users with more diverse data about the routes.
These features included:
- Social data reports system: Live bus congestion level, Reliability of buses.
- Route live navigation and real-time arrival estimation
Live bus congestion levels
Based on a social report system, encouraging users who got on their bus to send live reports to help others, the app can provide real-time information about how full the bus is at a given time. Information that can help users who dislike very condensed bus environments choose a different route to their destination, or wait for the next bus.
Bus arrival reliability rates
Based on a social report system, encouraging users to send reports if a bus is running late or doesn't arrive at all, the app is able to provide information about how reliable a specific bus line is. Information that can help users choose a route that is more reliable over more efficient, to avoid the chance of the bus not arriving or being late.
that elevates the festival experience, capturing the attention and interest of the participants, while promoting environmental awareness and encouraging better habits, such as recycling and sustainability.
to support the needs of the participants during the festival, enriches their experience, and reinforces the event's eco-friendly approach by reducing printable materials.
To create a memorable experience for kids and their families, I began by developing a compelling theme and storyline for the festival. Drawing inspiration from various online computer games, I created an imaginary narrative centered around the planet of Laksy, together with unique characters I designed to help immerse participants in the story.
As an environmentally-conscious festival, I wanted to ensure that we minimize waste and reduce our ecological footprint as much as possible. With this in mind, I decided to create a mobile app that would serve as the primary point of interaction for participants. By offering features like the ability to purchase food and drinks, access the festival schedule, and get real-time updates on the activities and game progress, we could significantly reduce the need for printed guidance materials and minimize the overall impact. Additionally, I saw an opportunity to create a more immersive experience for the kids, who are often drawn to mobile games and digital interactions. By designing the app with a fun and engaging user interface, with features like points, leaderboard, team progress bar and more, I hoped to enhance their experience and deepen their engagement with the festival.
The main need points the app tackles are:
Onboarding upon arrival and introduction to the festival
Food and drinks purchase
Individual and team game progress tracking
Live guidance through the festival's games
Home page
Leader Board
Login
Onboarding
Food purchase flow
Drinks purchase flow
App Prototype
Festival Posters
Festival snacks & drinks packaging
Made from recyclable ecological plastic and paper.
Festival Flyers
Introduction Cards
Stickers & Visual assets
Traditional educational materials lack engaging and interactive experiences, making it challenging to capture and sustain users' interest in learning theoretical knowledge.
The primary goal of the project is to create an immersive and interactive platform that educates and entertains users about the life cycle of an octopus. By combining elements of gaming and storytelling, the project seeks to engage users actively, encouraging their participation and exploration.
Through this interactive experience, users embark on a virtual journey, following the life cycle of an octopus from its birth to adulthood. At each stage of the life cycle, users are presented with new information that they must use to actively engage with the game and progress further. This interactive approach ensures that users not only passively consume information but also actively apply their newly acquired knowledge to advance within the game. This method helps solidify the educational content, making the learning experience more effective and memorable. Furthermore, through the implementation of captivating visuals, a simple UI, and an intuitive and enjoyable user experience, the game fosters a sense of curiosity, promoting exploration and experimentation.
To bring this project to life, I leveraged my skills in UX/UI design, concept art, and illustration, as well as game design. Utilizing Construct 3, I constructed a fully functional prototype of the game, which is currently accessible and available to play on desktop platforms.
*Enter full screen for best experience | Only for desktop
*Note: The link provided is for presentation purposes only, therefore some features may not work.
Created on Webflow
© 2023 by Heli Markman