Menu

UX & Web Design for a Design Studio

Philadelphia University | Fall 2015

Challenge:


Design/redesign a website based on UX principles and techniques.



Story:

This project was part of my graduate program at Philadelphia University for Essentials of Interaction Design course.
The goal of the project was to design and develop a practical small business website individually to demonstrate a quality of knowledge and application in the areas of research, design, software competency and basic web programming (HTML, CSS and JavaScript). For this project, we had to either choose an existing website to redesign or design a website from scratch which I decided to do.


Process:


For this project, we were supposed to work on six phases, each phase was consisted of different requirements.

  • Auditing & Market Research
  • User Research
  • UX/UI
  • User Testing
  • Design
  • Development


Competitors Analysis: Auditing & Market Research


  • SWOT analysis
  • Sitemap
  • User flow
  • UI kit

    • User Research

    • Target audience overview
    • Persona Profiles and stories


    UX/UI & User Testing

    • Sitemap
    • User flow
    • Wireframes
    • UI kit
    • User Testing

    For creating future website's sitemap, I conducted five rounds of Card Sorting as a user testing technique to identify the future structure and information architecture of the website.
    To gain faster results and feedback from the user in this process, I chose the paper prototyping technique for the initial prototype of the website.
    Based on users' feedback, two sets of user flow and scenario were defined.

    The final version of the prototype was created on Balsamiq.


    Design

    The first step was to create the moodboard of the website, which was created based on company's branding.

    Moodboard:

    Following the responsive design aspects, three versions of visual design were created for mobile, tablet and desktop version.




    Measurements:


    As the final step after the visual design phase was completed, was creating the mesearments for each page and device.

    Moodboard:


    Development

    The final phase was front end development of this website that was coded as HTML, CSS and javascript: IDEX Design Studio