Studioloku PROJECT
INTRODUCTION
StudioLoku is a new post-production business that needed a professional online presence to clearly communicate its services and build trust with potential clients.
The client had already defined their signature colours and logo, I led the rest of the visual direction — including typography, layout decisions, and the overall design system.
The goal was to create a clean, accessible platform where the client can introduce their work, and advertise their services while giving them room to grow as they take on more projects.
TIME-FRAME
2 weeks
ROLE
UI/UX & Web Designer
tools
Figma (Prototyping), Wix (Web design), Discord (Client Communication)
Challenge
The client had no pre-existing online presence and was in need of a professional website that clearly communicated their services, showcased their portfolio, and made it easy for potential clients to get in touch.
CONSTRAINTS
To meet the tight deadline, the UX workflow was condensed to focus on the most essential stages — research, wireframing, prototyping, and user testing before moving straight into high-fidelity design. This ensured the website was delivered on time while still supporting clear, user-focused functionality.
Scan for Mobile version:
STUDIOLOKU DESIGN PROCESS
The research phase combined in-depth conversations with the client to define their goals, services, and visual expectations, along with industry research to understand common structures and best practices within the post-production industry.
INDUSTRY COMPETITION
RESEARCH INSIGHTS
​​
What worked well across competitors:
-
Clear, straightforward presentation of services
-
Projects displayed prominently and easy to access
-
Short, easily scannable text
-
Strong contrast and accessible visual design
-
Sticky navigation that improved ease of use
-
Simple contact forms without too many required fields
​
​​
Common visual and structural themes:
-
Minimal layouts with a clean, uncluttered feel
-
Smooth motion and transitions for a premium experience
-
Clear hierarchy for services and project showcases
-
Testimonials used to reinforce credibility
-
Visual previews are preferred
-
Dark themes that created a cinematic, polished aesthetic
​
Information architecture
Design approach: Desktop-first
Sitemap:​
Header structure:
Sticky and minimal for easiest navigation
Chosen colour scheme:
Reasons:
-
Strong contrast - more accessible and improves user experience
-
Red draws attention to key information and CTA
-
The palette mirrors the dynamic, high-impact nature of post-production work
Chosen typeface: Poppins
Reasons:
-
Clean, modern look suited to creative and digital industries
-
Highly readable across headings, body text, and UI elements
-
Wide range of weights for strong visual hierarchy
-
Works well with the brand’s bold colour palette
-
Web-friendly and consistent across devices
Wireframing played a key role in shaping the structure of the website before moving into visual design.
It allowed me to map the layout, prioritise content, and ensure the user journey was clear and intuitive.
By focusing on function over visuals at this stage, I was able to quickly test ideas, confirm decisions with the client, and set a strong foundation for the final design.
FINALISED DESKTOP WIREFRAMES
HOMEPAGE
ABOUT
SERVICES
Portfolio
In the early steps of this stage, the client finalised their list of services, which are reflected in the designs.
Building low-fidelity prototypes enabled quick testing of interactions and navigation, ensuring the layout met user needs and preventing unnecessary revisions in the final stages.
NAVIGATION
Prototype layouts
HOMEPAGE
ABOUT
confirmATION
SERVICES
Portfolio
Testing was an essential step in refining the overall user experience before the final build.
It helped identify usability issues, confirm that interactions felt intuitive, and ensure the navigation flowed naturally across the site.
By gathering feedback at this stage, adjustments could be made early, allowing the final design to feel more polished, functional, and aligned with user expectations.
USABILITY PROMPTS
"You’re interested in StudioLoku but aren’t sure what they offer. Find out what services they provide."
Tests how easily users can find service information offers and locate the services section with ease.
“You want to see examples of StudioLoku's work before making a decision. Where would you find this information?"
"You’ve decided you may want to work with StudioLoku. How would you get in touch to discuss your project?"
Tests how easily users can find a clear path to getting in touch and taking the next step.
Tests how effectively users can locate past projects to build trust and confidence in the brand.
TESTING OUTCOME
User testing confirmed that the core navigation and content structure were clear and easy to understand, allowing users to complete key tasks with minimal guidance.
However, feedback revealed opportunities to streamline the contact journey and improve the visibility of social links.
These insights helped refine the layout and interaction points before final development, ensuring the site better supported both user needs and business goals.
IMPROVEMENTS
Based on feedback, a dedicated Contact page button was added to the header to make it quicker and more intuitive for users to get in touch. Social media icons were also introduced in the footer (initially as placeholders in the low-fi stage) to clearly indicate where external social links would live. These updates strengthened both usability and clarity across the site.
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​​​
​
Final navigation
FINAL Prototype layouts
HOMEPAGE
CONTACT
ABOUT
confirmATION
SERVICES
Portfolio
With the structure, layout, and visual direction defined, I moved into the final build phase using Wix.
This stage brought together the UX decisions, branding, and content into a fully functional website, ready for real users and real business needs.
complete template
USER journey
Conclusion
The StudioLoku website is now complete, with all service information, current project work, and supporting brand content successfully implemented across the site. The information in the about page and wider brand details were developed through consistent communication with the client, ensuring their vision, values, and direction were accurately reflected in the final design.
Following completion, the website was handed over as a fully functional and adaptable template. The client now has full control to manage updates, refine content, and continue adding new projects as the business grows on their own.
FINAL DESKTOP DESIGN
HOMEPAGE
ABOUT
CONTACt
SERVICES
Portfolio
Scan for Mobile version:
