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 create develop case study using the all of the UX/UI design principals learned throughout the course.
The Problem
We observed that museum visitors often want to see specific exhibits/artwork and learn but feel like 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 presented information 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. It also integrates to desktop and Apple Watch to make it easy to use and navigation.
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.
/02 Research
Proto-Persona
Creating a proto-persona (which is not research backed) was the starting point for our group to begin thinking about our user archetype. As we continued our user research, we validated and invalidated aspects this proto-persona.
User Interviews
We collected qualitative and quantitative data by conducting user interviews and creating a Google survey. We completed 6 user interviews and received 26 responses to our survey.
Affinity Diagram
We began to process, organize, and consolidate all the data from our user interviews and survey into key relationships, themes, and insights.
/03 Problem Definition & Ideation
User Persona
We synthesized the findings from our user research into the following user persona which allowed us to better understand and empathize with our end user.
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.
to learn about what I'm looking at
having a paper map because i can make notes on it
being organized
finding information easily
having a plan
I wish…
WiFi were reliable in museums for navigating
I could save what I liked / want to learn more about
I didn't get lost
I could easily get my questions answered
I had the option for more in-depth information
What if…
there were suggestions for similar pieces in the museum?
info placards were more accessible?
museums integrated more tech?
I could get live directions?
I could create my own tours?
Feature Prioritization Matrix
We mapped with the doted features on a “feature prioritization matrix” to determine which features to focus (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 prototype, we created user flows to map out how the user would interact with our app across difference devices (mobile, desktop, and watch). 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 it to guide our desktop and watchOS devices.
The following wireframe follows the task of a mobile user playing a curated tour and tested our product’s usability
The following wireframe tested our product’s cohesion of our home page across mobile, desktop, and watchOS
Style Guide
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-fi prototype. Our goals were to 1) identify potential usability issues and 2) validate 2 common tasks in our product (1) Selecting and playing an existing tour, 2) Selecting and purchasing event tickets).
Results
We were able to recruited 5 participants from our class
All 5 of our participants were able to successfully complete both tasks
4 of 5 of our participants found it easy to navigate through the app
Hi-Fi Prototype
We incorporated areas of improvements identified during our usability tests to iterate on our mid-fi prototype and develop our final hi-fi 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 feedback from our usability test and case study presentations and create additional screens.
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
