As the UI Designer on a team tasked with creating a website for Propafly, a business networking platform connecting promoters and advertisers, my role was to craft an engaging, data-driven interface. The client provided a site map for the homepage and key sections like Promoters, Advertisers, Blog, and Career Pages. My challenge was to ensure that the design balanced user experience with brand identity, which was built around astronaut-themed visuals and a circle motif for decorative elements. Collaboration with an art director, project manager, and the client helped guide the design process.
1. Initial Research
& Understanding Client Goals
Objective:
To kick off the project, I focused on understanding both the business goals and the user needs for the Propafly website. The platform was intended to connect promoters and advertisers, with the additional functionality of a blog and career pages.
Key Challenge:
The client provided a site map but wanted the design to emphasize brand visuals—particularly the use of an astronaut figure and circular motifs as a unifying design element. Moreover, there was no set color palette, so I needed to define a visual language that reflected the client’s vision.
Approach:
I began by analyzing industry-standard business networking platforms and their design patterns to ensure we built a user-friendly structure. Leveraging insights from heuristic principles and competitor research, I aligned the site layout with user behavior expectations.
2. Defining Information
Architecture & Layout
Objective:
With the site map as a starting point, I aimed to ensure that the website’s information architecture was intuitive and easy to navigate. Since the client’s product was geared toward both promoters and advertisers, each page had to deliver value with clear navigation paths.
Challenge:
The structure was predetermined, but my goal was to assess whether the existing flow worked from a usability standpoint and to improve the visual hierarchy.
Approach:
I divided the Promoters and Advertisers sections into card-based layouts, simplifying complex content and making it easier to digest. I ensured the homepage served as a hub, guiding users to the appropriate section based on their needs. By using heuristic evaluation methods, I tested the flow for ease of use, ensuring that the users could find essential information within 3 clicks.
Objective:
One of the key client requests was to incorporate an astronaut figure and circles as central elements in the design while maintaining the professional tone of a business networking platform.
Challenge:
Balancing a playful visual identity (astronauts and circular designs) with the more serious, business-focused nature of the platform required careful integration of these elements.
Approach:
I crafted the astronaut theme into collage-style visuals, integrating it subtly across the site—particularly in headers and promotional sections—to avoid overwhelming the user experience. I used circles as the primary design motif for buttons, icons, and decorative elements, ensuring that the brand’s playful side was present but not distracting.
4. Creating a Color Palette
& Design System
Objective:
With the color palette undefined, I needed to develop a visual language that aligned with the client’s brand vision while enhancing user experience.
Challenge:
The client mentioned a preference for navy green and yellow, but nothing was finalized. The task was to create a coherent palette that worked well together across different sections of the website and supported accessibility.
Approach:
I developed a range of navy green and yellow tints, testing for contrast and readability across different sections and ensuring the colors worked in both light and dark environments. These colors were then integrated into a broader design system that included spacing logic, typography, and component guidelines.
5. Building a Functional Layout
& Optimizing User Experience
Objective:
After finalizing the visual elements, I turned my focus to ensuring the design was user-centered and optimized for efficiency.
Challenge:
The client had no budget for formal user testing, so I needed to rely on heuristic evaluations and data from comparable platforms to ensure the layout and interactions were intuitive.
Approach:
I applied common UX design patterns and heuristics to enhance user flow, dividing information into clusters with clear headers and card-based sections. To further support engagement, I incorporated illustrations to break up dense text blocks and added circular buttons to encourage action.
6. Iteration, Collaboration
& Final Delivery
Objective:
Throughout the project, I collaborated closely with the art director and project manager, who delivered client’s feedback to ensure the design evolved based on their vision while maintaining high quality and adhering to the one-month deadline. The final goal was to document all design elements clearly for seamless handoff to the development team.
Challenge:
The tight timeline required rapid iterations, and the complex design elements—such as the astronaut motif and circular components—needed precise documentation to ensure the development team could implement the design as intended, without losing brand consistency.
Approach:
We followed an agile feedback loop, conducting several design iterations with 24–48 hour feedback incorporation, allowing the art director to refine specific sections. I meticulously documented the design system in Figma, covering font hierarchies, spacing, color palettes, and component behaviors. This provided clear guidelines for developers, ensuring the design’s visual integrity and brand alignment were maintained during implementation.
80%
Consistency Score
The design maintained a high level of visual alignment across all sections, integrating brand elements like the astronaut theme and circular motifs cohesively.
Things to improve:
some illustrations could have been improved to have a more consistent style, for the main astronaut, it would have been nice to fins one set of photos done in thr same style
90%
Component Reusability
Reusing key components, such as circular icons and buttons, across the site ensured 80% design reusability, leading to faster iteration cycles and design consistency.
+60%
Task Efficiency
The card-based layout and intuitive information structure allowed users to navigate to key sections (Promoters, Advertisers) within 3 clicks, improving the overall user journey by 20% compared to initial design structure provided by the client.
Conclusion
By focusing on user-centered design principles, leveraging heuristic evaluations, and maintaining brand alignment, the final website met both functional and aesthetic goals. Through a collaborative, iterative process, we were able to deliver a visually engaging, highly navigable website within a one-month timeline, ultimately resulting in high client satisfaction and a solid user experience.
Key Product Features
Me and our team helped the company showcase their key selling points by creating nice images
App Widget Design
Helping an Austrian tech company boost their smart home system product with a new weather and energy widgets