Mina

UXUI Designer & Front-end Developer

hokahoka.website

  • hokahoka.website⬈

    2023

  • Case Study

    Designing and developing a website for HokaHoka, a web design/development service by Mina System.

    Duration

    6 Months

    Key Skills

    Product design, ideation, sketching, information architecture, user interface design, interaction design, prototyping, website development, logo design, brand identity

  • “HokaHoka needs an online identity that is impressive and innovative”

  • Problem

    I, Mina System, am a designer without a website for the web design/development service I was trying to launch. Having relied on a portfolio site to apply to positions, I was ready to start taking more initiative in my client acquisition.

  • Vision

    Facing limitations of my current lack of website, I needed a new way to approach my online presence. The final product would need to showcase my portfolio and skills in a web service oriented manner: a way that instills a sense of trustworthiness, reliability, and superior quality.

  • Brief

    I took on the challenge of creating HokaHoka’s web presence. I began with conducting research of competitor web design/development services, and building a solid understanding of best practices in terms of usability and accessibility. Designing and prototyping were done on Figma. The site was built using WordPress as a CMS, while relying heavily on custom PHP, JS, CSS, and HTML.

  • “HokaHoka needs to be a viable alternative to other website builders including online CMS platforms, as well as other designers and developers. “

  • Research

    Competitive Analysis

    I conducted competitive analysis with several professional web designers and developers with web presences that were successful.

  • Target Audience Analysis

    I conducted target audience analysis through Reddit, Behance, Dribbble, and Adobe’s websites. I analyzed posts from web designers showcasing their websites for effective and impressive UXUI implementations. I also analyzed industry leaders’ portfolios to learn more about what made them successful.

  • Results

    The analyses were synthesized into trends and compiled into an overarching user problem statement.

  • I need a website but i don’t know how to build one myself, and I don’t want to hire an expensive in-house developer, so:

    ・

    I will search on Google for possible solutions of designers who develop

    ・

    I will use social media platforms and their hashtags to find web designers and developers whose work I am drawn to

    ・

    I will find web designers and developers with professional web presences

  • I need a designer who can also develop, so I look for these things on their website:

    ・

    A concise and impressive résumé

    ・

    Thorough and professional documentation of past projects

    ・

    Just as thorough and professional documentation of design process

    ・

    A profile photo as well as an about page so I know who I am working with

  • User Problem

    “I am looking for a talented web designer and developer, and I need assistance in finding one online.”

    Solution

    HokaHoka is the one-stop solution to all of your website creation needs, from UX design to front-end development, HokaHoka has got you covered.

  • Features to Implement

    ・ Animated logo
    ・ Easy access to live sites
    ・ Easily navigable site menu
    ・ Case studies
    ・ Process description
    ・ Contact page
    ・ Résumé

  • User Testing

    Goals

    Utilizing screenshots of the prototype on Figma with AI generated images and stock images, I was able to create a user experience test. Using this I gathered data regarding the usability and accessibility of the website.

  • Process

    User tests were conducted on specific demographics, including: small business owners, therapists, artists, photographers, contractors, and creatives. By focusing on these demographics and utilizing the prototype as the basis for the study, I was able to find crucial key points in improving the design of the site.

  • Results

    By leveraging this prototype, I was able to gather valuable data pertaining to the website’s usability and accessibility. The test provided insights into how users interacted with the interface, how easily they could navigate through the content, and whether the design elements were intuitive and visually appealing. The results obtained from this user test will inform future improvements and optimizations to enhance the overall user experience of the website.

  • MVP/Wireframes

    Wireframes

    Wireframes were created to refine the MVP and affirm critical red routes.

    Prototype

    The prototype was refined to be closer to a high fidelity model.

  • “UXUI of the site must be innovative and professional, there should be no bugs in the code in terms of front-end development.”

  • UI Design

    Style Guide

  • Implementation and Development

    Architecture

    The architecture of my website follows a user-centered design approach, ensuring a seamless and intuitive browsing experience for visitors. By prioritizing user needs and efficient information retrieval, the architecture of my website aims to create a user-friendly platform that effectively showcases my expertise and drives engagement.

  • Stack

    Platform: WordPress
    DB: MySQL
    Backend: PHP (WordPress Admin was used as a CMS.)
    Frontend: HTML / CSS / JS
    Digital Asset Management: WordPress Media Library

  • Integrations (plugins, etc.)

    Header/Footer/Post Injections by Stefano Lissa

    Copy Anything To Clipboard

  • Search Engine Optimization

    SEO Integrations

    Yoast SEO was used to evaluate the SEO score of the website and changes were made to improve performance

  • Meta

    Web Design | Front-end Development| UXUI | Web Development – New York, NY & Brooklyn, NY.

  • Keywords/Phrases

    ・Design
    ・Designer
    ・Web Designer
    ・Web Developer
    ・Front-end Developer
    ・User Experience Designer
    ・User Interface Designer
    ・UXUI

    ・Product Designer
    ・Motion Designer
    ・Interaction Designer
    ・Custom Websites
    ・Website Builder
    ・CMS Developer
    ・WordPress
    ・Animation

  • Outcomes

    Accomplishments

    A screen recording of the final product is viewable here.

  • Through my comprehensive web design, web development, and SEO work on the HokaHoka project, I achieved significant outcomes and accomplished key milestones. Overall, my efforts have contributed to positioning myself, Mina System, as a reputable, professional, and talented designer and developer at HokaHoka.

  • Web Presence Creation

    Concerning web design, I created a visually appealing and user-friendly website that effectively showcases my past projects, clients, and design process. The seamless web development implementation ensured smooth navigation and optimal performance across various devices.

  • SEO

    My strategic SEO efforts led to improved search engine rankings, increased organic traffic, and enhanced online visibility for hokahoka.website, resulting in a broader reach and higher conversion rates.

  • Back to Homepage