ULTIMISTER STUDIO

Responsive One Page Branding Website

PROJECT BACKGROUND

Ultimister is a startup creative studio with a big vision and passion to deliver innovative and effective solutions for its clients.

This creative studio offers a range of services, including Branding and identity design, Motion Graphic design, Web design-development, AR and Videography.

Role

UX/UI Designer

Tools

Timeline

4 Weeks

Process

Discovery, Ideation, Design, Test, Reflection

PROJECT OVERVIEW

Ultimister, a cutting-edge creative studio, required a visually stunning one-page website to effectively present their services and portfolio

Our team mission was to design a site that attracts and engages potential clients through a seamless user experience and aligns with the studio’s innovative brand identity.

PROBLEM

The existing online presence was insufficient in showcasing Ultimister’s creativity and services, leading to potential clients not fully grasping the studio's capabilities.

SOLUTION

I crafted a user-centric, visually appealing one-page website with intuitive navigation and dynamic visuals to captivate and inform visitors.

GOALS

The goal was to highlight Ultimister’s unique services and portfolio, to ensure seamless, intuitive navigation for an optimal user experience and to create a visually engaging website that aligns with the Ultimister brand.

DISCOVERY

INSIGHTS

Qualitative user research revealed a strong preference among our target audience—potential clients and partners for a visually engaging and easy to navigate website. They emphasised the importance of an intuitive experience that effectively communicates Ultimister’s services and showcases the portfolio dynamically. These insights guided our design approach, ensuring we meet both user expectations and business goals effectively.

TEAM QUESTIONS BROARD

During the discovery phase, the team, including the project manager and myself, asked key questions to understand user needs and business objectives: ⟶

IDEATION

USER STORIES

To guide our design process, we developed user stories that reflect the needs and goals of our target audience. These stories help ensure the final design meets user expectations and business objectives.

USER FLOW

Users begin their journey on the visually striking landing page, where they can use the "Discover" button to scroll down to various sections. In the Portfolio section, they can click to view gallery photos. The Testimonial section allows users to read client feedback. In the Hire section, users can select a suitable hiring plan from available service offers. Finally, they can scroll to the Contact section to get in touch with Ultimister using the provided form.

INFORMATION ARCHITECTURE

DESIGN

WIREFRAMES

I meticulously finished the wireframes and crafted to define the layout and structure of the site, ensuring a seamless and intuitive user experience. As a UX/UI designer, I designed these wireframes serve as the blueprint, guiding the placement of elements. Each design decision aims to enhance usability, ensuring that users can navigate effortlessly from one section to the next, creating a cohesive digital experience.

LOW-FIDELITY PROTOTYPE

At Ultimister, I spearheaded the development of the low-fidelity prototype. This early-stage model focused on mapping out the website's layout and functionality, providing a clear structure for each section: Home, About, Services, Portfolio, Testimonials, Hire, and Contact. Using basic wireframes, I facilitated rapid iteration and feedback collection from our creative team and stakeholders.

UI INSPIRATION

At the outset, I led design sessions where team members explored competitor product screenshots and adhered closely to Ultimister's logo guidelines for color inspiration. Through these sessions, we meticulously reviewed and discussed how to leverage these colors effectively to establish a cohesive and visually compelling user interface. Our aim was to ensure that the design not only reflects Ultimister's brand identity but also enhances usability and engagement across the platform.

STYLE GUIDE

This section establishes the visual and design principles derived from Ultimister's logo guidelines. It defines a cohesive framework for the website's aesthetics, encompassing color palettes, typography choices, visual elements such as refreshing the logo design with 3D animation, layout structure, iconography and interactive behaviors. I ensured consistency across all design elements, reflecting Ultimister's brand identity while enhancing user experience and reinforcing brand recognition.

COLOUR PALETTE

Principal Colours

LIME

#DDFF00

Dark Grey

#262626

Grey

#777777

White

#FFFFFF

TYPOGRAPHY

Font Family | Poppins Sans Bold

LOGO

Design & 3D Animation

ICONOGRAPHY

HIGH FIDELITY PROTOTYPE

In the team meeting, I shared "High Fidelity Screens" that presents the detailed and polished visual representations of the final website design. As you can see below, these screens incorporate the Style Guide principles, showcasing precise colour use, typography, layout, and interactive elements. This section ensures a clear, realistic preview of the user interface, aligning closely with Ultimister’s branding and user experience goals.

TEST

USER TESTING

These prototypes were then tested with real users to gather feedback on usability, design aesthetics, and overall functionality. Insights gained from user testing informed necessary refinements, ensuring the final product is both user-friendly and aligned with Ultimister’s vision.

REFLECTION

TAKEAWAYS & NEXT STEPS

My user-centric design approach, grounded in qualitative research and iterative feedback, highlighted the need for a visually appealing and intuitive website aligned with Ultimister’s brand identity. Adhering to logo guidelines ensured consistency, while prototyping and user testing refined the final product to meet user and business needs. Moving forward, we will focus on continuous improvement, performance monitoring, feature expansion, marketing integration, and regular accessibility audits to maintain and enhance the website’s effectiveness and user experience.