Athena
/01 Overview
The design challenge for the final group project of Columbia Engineering's UX/UI Bootcamp was simple: come up with a new idea and develop case study applying all of the UX/UI design principles and methodologies acquired throughout the course.
The Problem
We observed that museum visitors want to see and learn about specific exhibits/artwork but feel 1) information isn’t accessible, 2) museums are overwhelming and difficult to navigate. How might we improve the museum experience so visitors feel more oriented and information is presented in a more engaging, accessible, interactive, and personalized experience?
The Solution
Athena is an app that allows visitors to curate their museum experience by choosing, creating, and sharing ‘playlists’ with friends before, during and after visits.
Project Timeline
We had between January 31 - February 22 to complete our UX/UI case study and present it to the rest of the class and followed the iterative design process below
/02 Research
Proto-Persona
To kick-off the project, we created a proto-persona to begin thinking about our user archetype. As we continued our user research, we were able to validated and invalidated aspects of this proto-persona.
User Interviews
We collected qualitative and quantitative data by conducting user interviews and developing a Google survey. We conducted 6 user interviews and received 26 survey responses.
Affinity Diagram
We started to process and organize the data from our user interviews and survey into themes, and insights.
/03 Problem Definition & Ideation
User Persona
We synthesized the findings from our user research into the following user persona
User Journey Map
We created a user journey map to better understand what motivates our users and identify where in the in the experience our users are experiencing pain points.
Feature Brainstorming
We used the “I Like, I Wish, What If” methodology to brainstorm features based on our research and then conducted "dot voting" to begin narrowing down our ideas.
I wish…
What if…
Feature Prioritization Matrix
We mapped with the doted features on a “feature prioritization matrix” to determine which features to focus on (marked by stars in the diagram below).
Competitor Analysis
We conducted market research and identified 3 direct competitors: Rijksmuseum, Explorer - AMNH, and British Museum. We then evaluated their strengths and weakness relative to our product.
/04 UI Design & Prototype
User Flow Chart
To create a strong foundation for our app's design, we created user flows to map out how the user would interact with our app across difference devices (mobile, desktop, and watchOS). The user flow chart below follows a mobile user playing an existing tour.
Wireframes
We took the “mobile first approach” by prioritizing our mobile experience and using it to guide our desktop and watchOS designs.
We started by creating paper wireframes, allowing us to quickly jot down our ideas and iterate before creating digital wireframes.
The following digital wireframes tested our product’s cohesion across mobile, desktop, and watchOS
Lo-Fidelity Wireframe
We then created lo-fidelity digital wireframes to test the interactivity between screens. The following lo-fidelity wireframe follows the task of a mobile user playing a curated tour and tested our product’s usability
Design System
Typography
Colors
We tested and ensured the colors we selected for our website passed the WCAG2.1 level test.
#4947A5E
#5C3175
#182859
#3D79F2
#FF8C00
We conducted A/B testing to determine if users preferred 1) gradient vs. solid, 2) cool vs. warm purple. Our results showed us that our users preferred 1) gradient and 2) the cool purple.
Logos
Icons
Usability Testing
We conducted usability testing on our mid-fidelity prototype. Our goals were to 1) identify potential usability issues and 2) validate two core tasks in our product (1. Selecting and playing an existing 'playlist', 2. Selecting and purchasing event tickets).
Results
Hi-Fi Prototype
We incorporated areas of improvements identified during our usability tests to iterate on our mid-fidelity prototype and develop our final hi-fidelity prototype to demo during our case study presentation.
/05 Refine
Reflection
After the UX/UI bootcamp ended in February 2023, I revisited this case study because I wanted to incorporate additional critical feedback from our usability test and case study presentations.
Key Additional Areas for Improvement
The layout feels a little cluttered and some of the design between different screens isn't consistent
The app feels like it's trying to do everything and gets overwhelming with the number of features.
Refined Hi-Fi Prototype
