My role in creating the Astroblack app
I was the visual design lead; my responsibility was to create the UI and develop the visual elements. I also participated in wireframing, compiling our data from the survey and usability testing into measurable charts and presenting to the client.
Problem
Afrofuturism resources are scattered around the internet and there isn’t a database or centralized location to find them.
Solution
Our solution was to provide an equitable resource of information through an adaptive learning tool that helps us achieve our goal of providing information on Afrofuturism in the form of a digital resource to educate students about the topic.
Our goal
Our goal was to create a product that provides information and access to digital resources to educate students about Afrofuturism.
Scope
Our scope was to create a minimal viable product for Astroblack that functions as a learning tool for targeted users.
Users
Our target audience is students 18+ and Afrofuturism aficionados.
Aesthetic
Our aesthetics are minimal, futuristic and bold.
We used a creative and strategic approach for the Astroblack project. In our design sprint we mapped, sketched, decided as a group, created a prototype, tested it with potential users, validated decisions and shared the evolution of our design.
Where we collaborated
In Miro we shared our ideas and collaborated; this shows all of the steps we took in our design sprint.
Our Long Term Goal Defined
Here we identified and determined our long term goal. Through discussions with our client we identified why it was important and our focus was to improve social awareness and to educate people on a topic that is not discussed in mainstream media.
Why
To provide education about Afrofuturism.
Improve social awareness.
Who
College students
lifelong learners
Artists/creators
Social activists
What
Audio/music/podcasts
Visual/film/animation
Literature/comics/articles
News feed/events
Gia Brown is a persona we developed; she is a creative student, is 18 and has goals of being an artist and having an art studio where she can represent marginalized communities. In resourcing social awareness information, this persona of Gia Brown reflects what the user would be like.
Storyboarding
We created a scenario with Gia being introduced to the application through a friend while they watch a movie. We picked the Wiz as a Afrofuturism context. Then she would go to download the application. After she downloads the app she explores the subjects, choose a genre, go down this rabbit hole of learning, thus learning more about Afrofuturism through this exploration process. She would be experiencing the music, media and the history.
User Flow
Sketches
We brainstormed as a group and sketched individually and regrouped. This first sketch is what we initially agreed upon as the flow we felt was most intuitive and reflected the goals of the client. We wanted the user to be informed about Afrofuturism immediately and have access to all of the categories on the home screen. We also decided a bottom navigation would be the most beneficial to the user and could hold the most important links.
Wireframes
We then divided the screens and made digital wireframes individually which is referenced below. The first screen is our first iteration of the home screen, the second was a resource screen, then timeline, details and a profile screen with a progress tracker. We determined the most important screens for the user to achieve the gain of information would be to begin by choosing a category, then to further refine their search within that category, then choose an artist/musician and listen to their music, watch a video and read their bio. Initially we wanted the user to have a personalized experience so we included the profile page.
Second Iteration of Wireframes
We structured the app to identify where we were going to place the key features that the client would need. We wanted to structure it in a way so the user could ultimately learn. We determined through assessing our goals and through meetings with our client, we decided to not include the profile option in this iteration so it would not potentially limit someone from accessing the content. We discussed we could develop this further in the future if we decided to. The tiles with categories on the home screen were changed to further refine the search for the user with less screens. The categories now get specific on the home screen to include all types of music. So the user can select Jazz or another type of music, then they are taken to all of the Jazz artists. We refined the bottom navigation at this point to include home, favorites and search.
Our Prototype
Beginning with the homescreen, you can see the tiles are vibrant against the muted background to place focus on the features. We used two complementary fonts Michroma and Roboto; Michroma for headings and buttons and Roboto for body text. Michroma was chosen because of its futuristic feeling. This home screen features different categories, focusing on the definition of Afrofuturism. The categories are genre specific and you can scroll horizontally to browse and choose from the different genres, or scroll vertically to choose a category. This home screen allows you to navigate to the second screen when you select a tile. When you navigate to the genre screen, Jazz in this case, the options are set up on a timeline, by decades. We thought this would make the most sense to explore a topic that has history. When you select an artist, we chose Sun Ra as an example in our prototype, we provide history and then the user can proceed to listen to his music or watch a video if they choose to do so.
Survey Findings
Usability Testing
Participants Scoring
We created a scoring system based on how well the participants were able to navigate the prototype and complete the tasks. If they were able to navigate it with no problems, we gave them a 5. It added up to 90 points based on the 6 tasks we evaluated their completion on. The majority of our users were able to navigate our prototype with minimal or no issues.
Tasks for Testing
We also examined our questions we had, the 6 tasks we asked the participants to complete. We asked them to find Jazz, so they had to locate the tile and select it. Then we asked them to find Sun Ra which is a Jazz artist, we wanted to know where he was born, and to locate a song by him, also to find a video, and to show how the user would go back to the previous screen using the back button and then finally to the home screen. With 3 of these tasks the users had no problem at all. This helped us identify any issues, anything we needed to fix to increase the accessibility.
Key Insights
8 recommendations from our participants:
Reasons were provided by the users for why they made these suggestions. They suggested bold visuals to appeal to creative interest, alerts to inform users about interests, definitive bio about Astroblack brand, a hamburger menu to streamline categories and data, splash screen to ensure greater brand identity awareness and category detail for growth in content access and extended material.
Outcomes
Based on the data from user testing and final feedback from our client, we consider our app a success. We met the needs of our client and we created an efficient and adaptive learning tool. We would like to add more features in the future and complete further iterations based on user feedback.
Development Proposal
Some of our users suggested providing an onboarding tool for new users. We could also potentially have a daily read that highlights history, related news and events as a focal feature on our main screen. We could also create a better UI by adding feedback indicators, incorporating more color, making it include the visuals that are often seen in Afrofuturism, bright colorful and animated, otherworldly.