Mina

UXUI デザイナー・フロントエンドデベロッパー

hokahoka.website

  • hokahoka.website⬈

    2023

  • ケーススタディ

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

    プロジェクトの期間

    6ヶ月

    主要スキル

    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”

  • 問題

    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.

  • プロジェクトのビジョン

    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.

  • プロジェクトブリーフ

    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. “

  • 調査

    競合分析

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

  • ターゲットオーディエンスの分析

    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.

  • 結果

    分析結果はトレンドにまとめられ、包括的なユーザーの課題の文言としてまとめられました。

  • 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

  • ユーザーの課題

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

    解決策

    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.

  • 実装すべき機能

    ・ Animated logo
    ・ Easy access to live sites
    ・ シンプルで使いやすいサイトメニュー
    ・ Case studies
    ・ Process description
    ・ お問い合わせページ
    ・ Résumé

  • ユーザーテスト

    目標

    Figma上のプロトタイプのスクリーンショットとAI生成の画像、ストック画像を活用して、ユーザーエクスペリエンスのテストを作成しました。これにより、ウェブサイトの使いやすさとアクセシビリティに関するデータを収集しました。

  • プロセス

    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.

  • 結果

    このプロトタイプを活用することで、ウェブサイトの使いやすさとアクセシビリティに関する貴重なデータを収集することができました。このテストは、ユーザーがインターフェースとどのように対話し、コンテンツをどれだけ簡単にナビゲートできるか、デザイン要素が直感的で視覚的に魅力的かどうかについての洞察を提供しました。このユーザーテストの結果は、将来の改善と最適化に関する示唆を提供し、ウェブサイトの全体的なユーザーエクスペリエンスを向上させるための指針となります。

  • MVP（Minimum Viable Product）/ワイヤフレーム

    ワイヤフレーム

    ワイヤフレームは、MVPを洗練させ、重要なレッドルートを確認するために作成されました。

    プロトタイプ

    プロトタイプは、より高い忠実度のモデルに近づけるために洗練されました。

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

  • UIデザイン

    スタイルガイド

  • 実装と開発

    アーキテクチャ

    私のウェブサイトのアーキテクチャは、ユーザーセンタードなデザインアプローチに従い、訪問者にシームレスで直感的なブラウジング体験を提供します。ユーザーのニーズと効率的な情報検索を優先し、ウェブサイトのアーキテクチャは、私の専門知識を効果的に展示し、エンゲージメントを促進する使いやすいプラットフォームを目指しています。

  • スタック

    プラットフォーム：WordPress
    データベース：MySQL
    バックエンド：PHP（WordPressの管理画面をCMSとして使用）
    フロントエンド：HTML / CSS / JS
    デジタルアセット管理：WordPress メディアライブラリ

  • 統合（プラグインなど）

    ヘッダー/フッター/投稿インジェクション（Stefano Lissaによるプラグイン）

    Copy Anything To Clipboard

  • 検索エンジン最適化（SEO）

    SEO統合

    ウェブサイトのSEOスコアを評価するためにYoast SEOが使用され、パフォーマンスを向上させるための変更が行われました。

  • メタディスクリプション

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

  • キーワード/フレーズ

    ・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
    ・アニメーション

  • アウトカム

    達成事項

    最終成果物のスクリーン録画はこちらからご覧いただけます。

  • 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.

  • ホームページに戻る