My submission to the 2025 DesignFlows competition by Bending Spoons. With just 4 days to complete the challenge, I designed a mission-critical interface that enables seamless coordination between humans and special robots.

THE BRIEF

Participants were presented with a scenario about designing a given user flow showing how a user navigated through the app to complete a specific task. The steps can be shortened into these bullet points:

1. The user opens the app
2. The user checks the status of the Hexabots
3. The user monitor a Hexabot’s progress assigned with a task
4. The user receives updates on the status of the Hexabot

THE DATA

During the 4-day challenge, participants would not have enough time to collect and analyze the necessary personas in order to create user scenarios. Fortunately, the brief gave out all the information needed to have a complete picture of the app’s users personality along with their profiles, behavioral patterns and preferences, which really help speed up the design process.

1. Real-time, easy-to-read status updates are crucial.
2. Fast task assignment process with proper guidance can significantly reduce user stress.
3. Accessible interface: Users operate in challenging physical conditions.
4. Voice-activated task assignment and status checks could improve usability.
5. Providing options for customization could increase engagement and usability.
6. Clearly highlighting task locations and potential overlaps can prevent confusion.

TIMELINE

Effective time management for project success was crucial. Hexa was created under time pressure, so every decision counted. The timeline above represents the time allocation for every steep in the whole design process, from processing the available data of the brief until the final additions and minor alterations before the published product.

Data Processing: 20% : The first step to this design process was to take a thorough look at the available data of the brief in order to extract every bit of information that could be useful for the later steps. This procedure included analyzing the meaning behind every sentence while grasping the whole project information and direction.

Results analysis: 40% : This was the biggest and the most important step of the whole process. BendingSpoons wanted to see how designers think, analyze and finally take action fast and produce results based on their cognitive abilities. Also, this was the part where misinterpreting information would lead to design inexpediency if the creator did not fully interpreted the data the correct way. During this phase, I created conclusions based on the brief, categorizing information based on importance. I dug deeper into user personas in order to translate their wants and needs into design solutions that adapt to each case individually. Finally, I created a theoretical user flow indicating every necessary user interaction to reach the end goal and complete the brief’s user journey.

Design: 30% : After all the research, it was time to design. As the base was already set and deeply analyzed, the design process did not take a long time. I only had to connect the puzzle pieces from my own analysis visualizing the conclusions of the previous step. This step included the design of the Low Fidelity screens focusing solely on the user experience and navigation with no colors and placeholder text. It was the time to construct the base of the whole experience that would make or break the design.

Refinement: 10% : Finally, it was time for the High Fidelity screens. Colors, typography and icons work together to elevate the Low Fidelity design and actually bring it to life while it approaches the closest it can get before the final production, by the programmers. In this final step, I had to create the UI part: the color scheme, the typography and the icon library while making sure everything fits aesthetically.

LOW FIDELITY - UX

The low fidelity flow presented above is the representation of the user scenario provided by the brief. It showcases the 4 unique screens that the user must follow to complete the necessary steps for the provided job.

The key goal was to prioritize efficiency and clarity before aesthetics as one of the most prominent requirements of the interface is to be fast and easily accessible. This low fidelity design shows the user experience approach above all and the way users navigate and interact with the app.

Steps to achieve the final result:
1. In the home screen (1st screen) the users can be updated at any time about issues, job status an task progress. What is more, they can easily find and assign tasks to robot through the search bar while being updated live about any changes to the tasks and robots.
2. As the brief indicates, users need to find the necessary information about a specific robot met with a task. When the user navigates to the bot details, they are met with all the information about the robot in detail (status, battery, assigned job, task history).
3. After navigating to the job’s page, users can easily spot its progress in detail along with live updates, starting and ending times and take some actions like changing the job status (pause) or view the job progress on the Map.
4. After that, users navigate to the Map page where they can see live the whole active location where robots are working along with any available tasks they can assign there.
5. Finally, users navigate back to the home screen through the dedicated button on the bottom navigation bar in order to spot any new updates and finish the user journey.

FEATURE: CODENAMES

#AD4

An integral part of a successful user experience in Hexa is based on fast Hexabot recognition and customization. That’s why, I introduced “Codenames”. This feature uses a 3 character sequence, called “Unique ID” in order to identify each bot in the app and during service support.

No images:
Images can get distracting when in large quantity and to close proximity. Unique IDs ensure that no duplicate models have the same distinguishable feature while aiding in faster communication between users and the service team. Additionally, bots have a separate nickname that can be changed by the users and is only visible to them, giving a sense of customizability while keeping the important information safe and unified.

HIGH FIDELITY - UI

High Fidelity design is focused on aesthetics and can really make or break the first impression of a user. For this project, simplicity but elegance was the key. Focusing on keeping the assets easy to recognize and emphasizing on the most important aspects were the principles that were derived from the brief.

Space is dark and lonely,
Hexa doesn’t have to feel like that.

Colors
• Futuristic but not extraterrestrial and somewhere between green and blue, the accent color helps push out the important information while keeping a sleek aesthetic and neutrality. The use of gradient is an old trend coming back again in existing apps but in a more serious and toned down style. Here, it’s used to indicate progress; starting from a darker hue and ending into a lighter tone, it implies movement and duration and since time management is our most important asset in this product, it should also be clear inside the app.
• Blending in with the surroundings, dark mode follows the space’s dark tint in order to harmonize our eyes with the environment. Information pops out easier, battery consumption is lower while the user focuses on taking care the most important part of the colony, the almighty Hexabots.

Typography
The key to an effective typography is to be readable while offering some variety. That’s why Neue Regrade was the optimal choice combining easy to read glyphs suitable for all text types (title, text, button) with a subtle futuristic character in their design.

Iconography
Icons convey meanings without text, that’s why they have to be as exact as possible. An icon that misses its definition can be misinterpreted, leading to unwanted results. That’s why in Hexa, icons were selected based on familiarity, respecting the fast pace while using the app; easy to understand icons are effective in faster user navigation and satisfaction.

Q&A

Can you describe your experience of this small time frame?
Four days was a really small time frame that made me value every second. Focusing on all the parts of the brief was crucial while figuring out the information hierarchy before everything else. I had to take decisions in a short amount of time while making sure everything looked and felt polished. I was anxious I wouldn’t have enough time to go through my whole analysis of the brief and my design would have gaps that the user could feel.

What would you do if you had more time?
If I had more time, I would focus more on the actual user experience. Instead of taking so much time analyzing the brief, I would experiment more on how the user interacts with the interface and how the user scenario could become more fluent and aligned to the user’s persona. I feel like the navigation has some gaps and points where the user is not sure where to go next. So, having had more time, I would try to make a better use of the navigation experience and what parts of the brief are the most important for that.

What are you the proudest of?
Being my first ever participation in a UI/UX design competition with so many other honorable designers, I am proud that I even was a part of it. Having the jury go through my work, actually taking time to analyze every bit to see whether I would make it to top 40, made me very confident about my skills. Also, I am very fond of constructing such a interface is just four days! I really enjoying challenging myself for things I love and I would say I felt very relieved with the final results.

Final thoughts?
Reflecting back on this project, I see myself really focused and excited on this idea. Creating interfaces that are above all easy to use is something I really enjoy doing. Also, the brief’s idea was something I would never think of and it really pushed through my imagination. Overall it was an exciting but stressful experience that challenged my analyzing and designing skills to another level.