HUE website screenshot

HUE Project

Case study

HUE is a UCLA based UX network project.

As a start, we wanted to create a web platform to network, collaborate, and learn in order to be better prepared for professional UX opportunities.


  • Client: Sookie Cho, Self-motivated project
  • Duration: Web UX - 2 months, August - September 2020
  • Duration: Process Modeling - 6 month, Feburuary - July 2022

  • Team: Sookyung (Sookie) Cho (Project Manager, Research + Design, Development), Priyana Patel (Research + Design), Gabrielle (Gabby) Sumilang (Research + Design), Marina Souliman (Research + Design), Grace Zhu (Research + Design), Justin Grant (Planning)
  • Impact

    Context

    "I want to be a UX professional but I don't know how to start..."

    The Problem:

    Many students at UCLA are interested in getting into the UX space, however, they are unsure where to start. A typical UX job requires 3+ years of experience for applicants and most internship opportunities are discipline-based, therefore students from an interdisciplinary program like Digital Humanities with non-design and non-programming experience are hardly exposed to professional user experience project experience. This is despite the fact that UX research and design require a strong sense of humanities, exploring “human-centered” experiences, beyond technical skills design and programming.

    The Solution:

    To provide a web-based networking space between design and research volunteers and clients, with projects focusing on humans in the human-centered design process.

    The Co-creative Value:

    The volunteers will acquire the practical skills and outcomes by participating in a project, partly or fully as much as they can contribute; while the clients can have creative design solutions based on human research conducted by truly interdisciplinary (or transdisciplinary) team members.

    How might we build up a network space to help each other on UX projects?

    Process

    The design process for the product development (HUE) and web presence design (2020).

    Research
    Aspiring ux-ers face imposter syndrome

    The team interviewed peers at UCLA and completed a self-questionnaire to explore how individuals explore their career interests in user experience. Here is a summary of the findings:

    Theme Details
    Future Career Goals UX Designer/Researcher with a focus on humanistic research, aesthetic judgment, and experience
    Strengths or Weaknesses Strength: Empathy, Attention to detail
    Weakness: Confidence experience
    Common Challenges So much to learn, imposter syndrome -
    Research + data + craft/prototype experiences
    Social issues + humanistic purpose
    Expected Outcome Connect + collaborate + like-minded individuals
    Real-world problems
    Freelance
    Experience
    Competitive Analysis (Slack, Discord, Behance, Wix, Squarespace, Handshake)
    Overwhelming + difficult to keep up-to-date
    Portfolios - What to present? Feedback, Templates
    Meeting other individuals interested in UX through job-searching sites (Handshake, LinkedIn)
    Check the details of study and the collected data

    Ideation
    A desire to collaborate with like-minded individuals and solve real-world problems

    Based on findings between our own responses and expectations for a UCLA-based network, we outlined the key features of members, projects, and resources as what we wanted to see on our platform:

    HUE website features

    Four types of personas can be involved in this networking project:


    UXer-wanna-be
    (ucla student)

    HUE website features
    Amy
    UCLA undergraduate

    Amy is a psychology major and digital humanities minor at UCLA. She wanted to be a UX researcher but it was not easy to find out how to start the preparation due to the intense job application requirements like a portfolio and multiple years of industry experience.

    After taking DH150, she gained confidence and motivation to be UXer and joined HUE. She participated in Baloon project for usability testing. With this experience, she understands how to roll out her career prep for UXer and looks forward to more project opportunities.
    UXer-in-training
    (ucla graduates)

    HUE website features
    Neo
    Recent graduate

    Neo is a recent graduate of UCLA. He found UX design and became interested in an interdisciplinary approach as he experienced computer science, information science, and digital art. But it was still challenging to form a portfolio that appreciates his diverse skills.

    He searched for a UX community at UCLA where he graduated and found HUE. Neo found it very relevant to him by checking the diverse background of the current members. He joined HUE and enjoys spending time after work to build up a portfolio with the Baloon project.
    UXer-in-need
    (potential client)

    HUE website features
    Olivia
    Small business owner

    Olivia is a local artist and small business owner of a craft shop 'Baloon'. She wanted to make her business user-oriented but struggled to manage the user experience with online shoppers. She hoped to find better design solutions through research but couldn't afford the cost.

    She was connected with HUE and loved its idea of transparency and co-creative process. After the kick-off meeting to share her expectation, she joined the weekly meeting with the enthusiastic HUE members and collaborated on the user research and the design process.
    UX-experts
    (professional)

    HUE website features
    Mia
    UX professional

    Mia is a senior UXer with 8year experience. As a self-learned expert, she remembers well how hard it was to build a network to learn together, which is essential as a UX. Mia always loves to mentor beginner designers and researchers for giving back to the community.

    She was invited to HUE as an advisor to help members with the practices in UX research and design. Mia enjoys guiding the members and providing constructive comments, which helps her to learn and refresh her own research and design practice.

    Branding
    Humans in User Experience

    When deciding on the title of our design consulting project, we wanted to touch upon each of our team member’s roots in Digital Humanities. In striving for a humanities-based brand, we came upon HUE, an abbreviation for “Humans in User Experience”. While UE is not a common abbreviation for User eExperience (UX), we felt this was a part of our platform that we could leverage and differentiate ourselves from other UX networks. HUE is also a play on the design terms meaning a color or shade.

    HUE logoes

    Design
    Information Architecture

    Three main features of communication, collaboration, and information sharing are provided through the website.

    Original Menu Structure

    Wireframes

    Here are the key wireframes to test the core content and the layout.

    original wireframes

    User flows

    Depending on the user's situation, for non-members, current working members, and clients, users can complete different type of communication, collaborative relationship building, and information sharing tasks.

    Original user flows

    Low-fidelity Prototype (part)

    The detailed user sequence and interation points over the wireframes.

    Original user flows
    Check the wireflows

    Evaluation & Revisions
    Cognitive Walkthrough & Stakeholder Review

    We had three rounds of team review with cognitive walkthrough. We found that the mentor information was missing in the wireframe and added the list as 'advisors'. We replaced the inputs with Google forms to make it easier to share and manage the dataset to increase accuracy of data (avoiding bot entries) and ease of database management. The latest revision reflects:

    • One page layout: Integrated within menu structure
    • Simplified submenus: Member profile as a popup with 100 word bio
    • Project Dashboard: Utilize the progressive report templates toward the final presentation material
    • Add useful resources with the contents created by members and advisors

    final wireframe

    Prototyping & Development
    High-Fidelity Prototype (front page)

    By applying the design system developed with the brand logo (color scheme with warm orange, yellow and dark gray) interface design was drafted and tested. The detail contents were filled with. Accessibility audit was conducted to check the color contrast requirements.

    final wireframe

    Development

    We decided to use the ucla digital humanities webhost (humspace). Bootstrap was used as CSS framework. PHP was used for the member login process.

    Experience the interactive Beta Website (2020 Summer)

    final wireframe

    As increasing number of the members and the advisors, we slightly updated the interface design. It needs still more work for the mobile firnedly version.

    Experience the current Website (2022 Winter)

    Lesson Learned

    It has been like starting up a non-profit organization to deal with many ambiguous and ambitious plans. I have learned a lot about value cycles and business-oriented decision-making on top of quality management of members' voluntary works. HUE started as a small group of people who want to continue research and design momentum for voluntary service to the community, but it has been successful to connect people and resources to grow together. We are still working on the process modeling and how to optimize the client collaboration and new member onboarding. We will keep experimenting with a co-creative process on how to model the proper UX research and design practice and consultancy between student members, experienced members, advisors, and future clients.