Music Mash - UI Design Project

Class: User Interface Design

Overview

The goal of this semester-long project was to investigate some computing-related task as part of a team. We then had to develop interface design alternatives for the task. Finally, we implemented a prototype and evaluated the design. This provided an end-to-end experience of the UX/UI Design process.

My Role

I worked in a team with 2 others to brainstorm app ideas, wireframe potential designs, and conduct user research.

Technical Highlights
Use Cases
User Personas
Mobile App Design
UI Critique
Wireframes
Prototyping
Usability Testing

Functional Requirements
UI Critique

Aided the design process by allowing us to look at similar products and identify strengths and weaknesses of the design. My role consisted of analyzing two existing music mixing mobile applications. I discovered several potential features and also realized that our application would require a much more simplistic approach in order to reach our target audience.

User Characteristics

I delivered three user personas and characters based on different user goals. Each persona was given a relevant backstory and their own personalized usage criteria including key characteristics, pain points, usage goals, and potential questions they might have when using the application.

VIEW DOCUMENT
Usage Scenario

I created three short stories for each persona which captures them using our application in their everyday life.

VIEW DOCUMENT

Design Space
Prototyping

During the prototyping phase, each team member applied different design tactic to achieve our goal of an optimal design space. Some of our design focuses included social media functionality, simplicity/aesthetics, and mixing functionality.

The final design concept draws on our simplistic layout design while maintaining the social and mixing functionality of the other designs. Before finalizing our design, we received feedback from classmates and peers. Popular design features were noted and carried into the next phase of prototyping.

Design Assessment

To aid the evaluation of each design approach, I compiled an assessment which analyzes the interface based on seven criteria:

  • checkColor Scheme
  • checkSimplicity
  • checkPersonalization
  • checkVisibility
  • checkFeedback
  • checkConstraints
  • checkAffordances

Evaluation Techniques
Observation

Observing the subject in the act of using the interface can help identify more subtle affects of the interface. This is achieved by observing behaviors, reactions, and body language. In our scenario, we walked users through various tasks. Being present for the evaluation allowed the user to ask questions and comment, thus identifying pain points in the design.

Thinking Out Loud

While observation covers the visible reactions to a UI, it is hard to know what a user is thinking. Employing the Think Out Loud method gives insight to the cognitive processes of the user. During evaluation, users were asked to vocalize each step of the interaction.

Questionnaire

We implemented a short questionnaire at the end of each task in which we asked the user's opinion about features including ease of navigation, improvements, possible flaws, and visibility. We chose a larger amount of short questionnaires because it would provide a greater amount of feedback and more accurate trends in data. We were able to identify recurring feedback, which reduced the possibility that issues were objective and design related, as opposed to a one-off opinion.