Background
RockX is a hybrid history museum that relies on digital and physical artifacts to curate a lively experience for prospective rock and roll fans while paving the way for emerging rock and roll artists with a stage to showcase their artistic skills.
As an interaction designer, I worked on understanding the brief, formulating structures through ideations, and designing a website for hypothetical client to meet their needs.
A. Exploring different screen-centric goals.
A. Exploring different screen-centric goals.
B. Facilitating Goal focused hierarchy.
C. Sketching low-fidelity ideas to explore decisions.
D. Producing components and site pages using Axure.
Brief Comprehension and Ideation
To structure client needs into actionable goals, the brief was interpreted into a matrix and lists. The matrix and lists in question are referred to as the Object Action matrix and Object Attribute lists.
The Object-Attribute matrix enlists all possible objects and the characteristics associated with them. On the other hand, the Object- Action (OA) matrix enlists all possible objects and the actions users would perform with them. This matrix helps ensure that all requirements from the brief are met while enabling users to achieve all of their intended goals. The proposition of a dense OA matrix at the beginning of the project helps assess areas of action properly. It helps decrease the complexity and cognitive load that a user would encounter while interacting and navigating through the website.
Apart from psychological and goal-based achievements, it also helps all kinds of designers (UX, Product, Interaction, and Content) evolve a shared vocabulary for the project right from the beginning, thereby facilitating high-level task scenarios and making ends meet for bringing product requirements and actual design concepts closer.
In other words,
" Help people learn about, book, or register for museum events and exhibits. "
Prioritization Matrix
Making a Prioritization Matrix aids in determining which features and use cases of the design should be the most user-accessible. It's crucial to keep in mind that the levels of prioritizing aren't exclusively determined by the needs of the users, but rather by finding a compromise between achieving the users' broad goals and achieving business objectives (which would be selling ROCK X Museum Tickets in this case).
Making a Prioritization Matrix aids in determining which features and use cases of the design should be the most user-accessible. It's crucial to keep in mind that the levels of prioritizing aren't exclusively determined by the needs of the users, but rather by finding a compromise between achieving the users' broad goals and achieving business objectives (which would be selling ROCK X Museum Tickets in this case).
The easiest objectives to find and achieve should be those that users need to accomplish the most frequently. Therefore, the actions and items that are most closely related to these objectives should be more obvious and need fewer clicks.
Design Strategy
User Flow
Designing user flows is crucial since users getting lost in the navigation is a bigger usability problem than when they are having trouble understanding a specific screen.
This user flow illustrates the various routes a user could take to arrange a tour and buy tickets.
Design Sketches
I produced three different types of sketches that allowed me to experiment with various grammar implementation strategies. Sketches demonstrated below show object-oriented, action-oriented and hybrid (action + object) approach taken to design the sketches. This enables me to plan main layout of the app using this iterative technique while also making sure that users can easily traverse the interface.
Object centric approach for sketches
Action centric approach for sketches
Hybrid (Object-Action) centric approach for sketches - CHOSEN for the final design
Color Palette
I picked this color palette in an effort to be both warm and pleasant while also reflecting strong bright hues to mirror the colorful and thrilling spirit of Rock 'N' Roll. While red is generally related to the danger and signs that require urgent attention, the same could not be said for the red hue used here. The red and gold hues used in the design are used in harmonious tones, and this color combination is often regarded in media-centric presentations.
To keep it basic and avoid overwhelming users, I chose two primary colors. The majority of the Canvas used hues of white and black. This was crucial since I anticipated using a lot of photos in the design and didn't want the interface's colors to clash with those of the media.
User Interface Design
In order to simulate the interaction and experience a real user would have with the design and to highlight any interface flaws, I used Axure RP 10 to develop a high-fidelity prototype.
Home Page
Tours feature: Add an existing curated museum list, fill out the questionnaire, or connect to Spotify to add to a tour.
Spotify Curated Tour: Created by connecting a Spotify account
Guitars page : complete with filters and add to tour CTA
Events page: complete with bulk-ticket buy, event sign up and add to tour CTA
Emerging Showcase: A form portal for upcoming artists to apply to be featured
Tickets page: Buy tickets for General admission
Cart and Payment details page
Design Summary:
1. Users can explore several sites to add guitars, displays, and events. Additionally useful filters are available on each page, such as the option to search for objects by their names, filter by decade, area, and other category-specific filters like dates for events, guitar makers, and exhibit kinds for exhibits.
2. Users may also view in-depth screens of events and exhibitions that break down the many components of a Tour, provide additional details about events, and provide a brief history of the artists and guitars on show at the ROCK X Museum, which users can visit.
Interaction Design
All aforementioned interface screens have evolved into a clickable, interactive prototype. In order to simulate the interaction and experience a real user would have with the design and to highlight any interface flaws, I used Axure RP 10 to develop a high-fidelity prototype.
All aforementioned interface screens have evolved into a clickable, interactive prototype. In order to simulate the interaction and experience a real user would have with the design and to highlight any interface flaws, I used Axure RP 10 to develop a high-fidelity prototype.
My Learnings
- Receive and apply criticism when I presented my design during two design reviews with my peers and experts in the design industry (namely Daniel Rosenberg, former Chief Design Officer at Oracle and SAP, and Karl Mochel, former Senior User Experience Architect at Intercontinental Exchange and GE Research).
- Receive and apply criticism when I presented my design during two design reviews with my peers and experts in the design industry (namely Daniel Rosenberg, former Chief Design Officer at Oracle and SAP, and Karl Mochel, former Senior User Experience Architect at Intercontinental Exchange and GE Research).
- Work effectively with my team members because we had to make sure the product was consistent across other platforms: Business to Consumer (B2C) Enterprise and Business to Consumer (B2C) mobile)
- Create and refine a variety of interface drawings and layouts that differ based on the grammatical strategy used.
Things I'd do differently
- Spend extra time during the drawing phase accurately defining the gridlines to maintain uniformity across pages and to enable me to work more quickly during the high-fidelity prototype phase.
- Spend extra time during the drawing phase accurately defining the gridlines to maintain uniformity across pages and to enable me to work more quickly during the high-fidelity prototype phase.
- Prioritize screen planning more since I frequently encountered missing screen inflows during the creation of high-fidelity prototypes.
- To assess users' real capacity to achieve important objectives, conduct a usability test and/or a heuristic evaluation.
Handoff
Toward the end of this project, I delivered a team .RP file by collating the work of teammates work on different platforms (B2C Mobile and B2C Enterprise). Each review was met with constructive criticism to improvise the overall interface and interactive design of the website and was warmly received and appreciated by fellow peers.
Toward the end of this project, I delivered a team .RP file by collating the work of teammates work on different platforms (B2C Mobile and B2C Enterprise). Each review was met with constructive criticism to improvise the overall interface and interactive design of the website and was warmly received and appreciated by fellow peers.
Looping in a set of product and content design solutions helped me deliver and consult to build a cohesive experience across all platforms and fix any critical navigational issues before turning in the project.
Looking Ahead
I feel elated to have contributed to such an exciting project! Being an aspiring product designer, working on this product not only taught me the basics I should be aware of while collaborating with different teams but also introduced me to the niche of exploring a rich rock and roll culture and people's expectations towards the music genre.
While academic projects are comprehensive and time-sensitive, I always love working on such projects. They bring in new learning opportunities and teach the basics of design. Moreover, as designs are actively developed and updated, I find myself collaborating with teams more often and am always awed by the things that worked and that didn't. It always entices me how we thought and how people used a product and circle back to the aspects we think deserve better treatment for essential user experience.
RockX: Product & Interaction Design
