What Is Animap
AniMap is a database of people working in animation, events related to animation, and resources for animators. It was designed to serve early career animators, producers, directors, and others working in the field of animation. Through conversations with animators, we learned that producing, creating, and distributing a feature length animation takes a team of people working together. However, early career animators can have trouble building their network and finding opportunities. This feeling is amplified by the isolating nature of drawing animations which typically happens alone. To address these issues, our team designed a platform meant to connect local animators to each other and foster in-person relationships.
How does it work?
AniMap attempts to aid in-person connections by helping animators find other animators in their area. All the data stored in AniMap's database is tied to a location and searching for information is done similarly to how one might find a restaurant on Google Maps.
Why is it the right option?
The problem we are hoping to solve is not a new issue for animators. A lot of animators currently use social media as a way to self-advertise. However, there are a lot of issues with using social media. Getting the right people to view your pages on social media can be a complicated and confusing task since algorithms for these platforms are changing constantly to meet the needs of larger companies advertising on the same platforms. This is the main difference between AniMap and other social media platforms. AniMap is designed to be another tool in an animator's toolkit. It is designed to be easy and intuitive to use centered entirely on the needs of animators. It lacks unnecessary features and aligns with the design philosophies of other tools used by animators.
How we landed on our final design
Insight #1: Parallel Development
Another insight we got through this phase was how to navigate having multiple design directions on one team. We initially tried to have people work on different parts of the same prototype but quickly realized that when we did that there wasn't cohesiveness between the two designs, especially after our heuristic evaluation. This brought us to the question of whether all of us should work on one prototype or increase our workload and work on two different prototypes with different visions. We realized that despite feeling like it would slow us down, the quality of our work would be better if we had two prototypes with cohesive designs instead of one prototype that was an amalgamation of styles. Once we had two complete prototypes we took the time to decide what we liked from each to create our final prototype. This process made A/B testing especially useful toward the end of the phase since now our test could encompass our two functionally equal yet aesthetically different designs, and give us a clear favorite. Doing the A/B testing, it quickly became transparent that the Animators had preferences that favored our cleaner, more modern design.
This was for many reasons, the most important of which was their perception of applications that animators already use as tools. The fun throwback design might have had some initial intrigue in our early testing, but when faced with it and what seems like a more functional, professional UI, they unilaterally chose the latter. This is when we realized how important our parallel development had been. Early on, like most designers do, we projected a little too much of our preconceived notions of animators on our personas. Due to this, when we got to testing around halfway through the semester, there was a growing dissatisfaction with our current design. Parallel development and A/B testing, let us put our preconceived notions to the test versus the feedback the animators and classmates were giving us. Ultimately, let the animators choose what design they found more satisfying to what we think are good results.
Insight #2: Inspirations
Since we had decided to have a map interface as the primary interface of our site, we knew we wanted to draw inspiration from other sites that are also location-based. Based on Jakob's law, users will spend most of their time on other sites, we looked at several sites that use map interfaces in a way similar to ours using pins to represent different locations and allowing users to search through them based on what they're looking for. One of the sites we drew a lot of inspiration from was Google Maps. An issue we found was trying to display a large amount of information in a way that was accessible to our user, but that's a problem that Google Maps has handled really well so we modeled parts of our UI after their interface. Things like having a list view of results in the sidebar but also having them as pins on the map to see their respective orientations were something that we pulled from Google Maps.
When we created our initial paper prototype, we wanted to keep things as general as possible so that the user would have more flexibility in their searches. However, we realised that openness could be a double-edged sword. We wanted to find a way for users who don't have specific searches in mind to not feel intimidated while keeping the function fairly generalised. When looking at Google Maps, we realised a really helpful feature there was creating tag categories where commonly searched tags are displayed and a user can simply click that button to initiate a search. We chose to implement this in our later versions to solve the original problem of being too flexible while always adhering to the laws of UX since many people are familiar with the categories interface on Google Maps.
Insight #3: It's a tool not a social media
We figured out early on in our user research that there's no desire for (yet another) social media site as a means of connection. Many different platforms aid in creating online connections and friendships but we found that our users wanted to have more in-person connections. There was a general sentiment of animators having a lonely career path where most of their time is spent drawing/animating on their own. As we began designing our site, we realised that it lends itself really well to a chatting feature. We give people all these different profiles and event options but don't provide a built-in way of communication.
This was something we wrestled with because we knew that adding a chat would make it easier for our users to connect but it would also encourage more online connection. When do you compromise your user experience for your mission? While we knew that leaving out the messaging aspect might lose us some users who feel that the site isn't convenient, we decided that to stay true to our original mission and what we heard were the pain points of our users, we would need to sacrifice that aspect of the site. This is the way we ensured that our site remained a tool for our users rather than taking the place of social media as a communication platform.
Insight #4: Parallel Development
The last major insight we garnered was about striking the right balance between a formal and playful design. This insight emerged from our user feedback, where animators expressed the need for a professional platform, yet also desired a touch of creativity reflecting their artistic industry.
In the world of animation, professionalism is key, but so is creativity and innovation. Our initial designs leaned heavily towards a more playful and whimsical aesthetic, mirroring the imaginative nature of animation. However, user feedback suggested that this approach, while visually appealing, did not instill a sense of professional reliability. Animators, especially those in the early stages of their career, are looking for platforms that are not only inspiring but also serious and functional for professional growth and networking.
To address this, we iterated on our design to create a more balanced interface. We incorporated cleaner lines, a more subdued color palette, and structured layouts to bring a sense of professionalism. Simultaneously, we retained elements of creativity through the use of animation-inspired iconography, dynamic shapes, and a more vibrant color scheme in selected areas of the interface. This harmonized approach caters to both the professional needs and the artistic sensibilities of our users.
Through this balance, AniMap stands out from conventional professional networking platforms, which often lack a creative flair, and from purely artistic platforms, which might miss the mark on professional networking needs. Our design now effectively communicates that AniMap is a serious tool for professional growth, yet one that understands and celebrates the unique creativity of the animation industry.
This insight was crucial in shaping AniMap into a platform that animators find relatable and useful, bridging the gap between a professional network and a creative community, thereby fulfilling our mission to support and empower animators at every stage of their career.
Design Revisions
If you're interested in reading more of the feedback we got from our heuristic feedback, check out the documentation here:
Based on the feedback that you received during the Design Refinement phase, including the Heuristic Evaluation review, we made many different changes. We've organized this in response to each of the categories used in our heuristic eval which is linked above for context and the specific violations.
Navigation between pages
We didn't do much to change the concern of the search bar being confusing (as it just said “Search for …”) since it wasn't intended to function as a full search bar in our prototype rather than just a placeholder for the concept which would be implemented if the site was to actually be built. We added the popular tags categories to the map pages to make the function more obvious as a filter. We added an additional feature to the logo at the top of the screen to go back to the home page since that's something that many sites also do and would be relatively easy to understand as a user. We didn't add a specific exit button like they requested because we felt that many other sites have a similar method to ours where people can click off a pop up in order to get rid of it. We also disagreed with the idea that the buttons would be the more regular route for site usage and felt that concern came from the fact that the search bar doesn't function as a search bar in the prototype whereas it would on the actual site. The eval also brought up that there weren't many shortcuts for expert users so we fleshed out our feed page to be something that users could see as a catchall of the interests they've curated on the site.
Pins on the map
Rather than have different icons to represent events vs people and not explain those very well, we chose to change it so that events and people are on different pages and used clearer icons like a person for a profile and a signup poster for an event. One suggestion they made was to use the profile pictures for our pins instead of icons and we chose not to implement that because we felt it would be visually overwhelming. Since we used only one “pin” icon, we felt that resolved any confusion on where to click to get more information.
Instructions
We chose to address the issues from the heuristic eval about instructions by making our website look like a more traditional site. They frequently mentioned how having non-standard icons and features (like the “PassDoodle”) was confusing and those are things we either changed to align with current industry standards or removed. We did also change our color palette which helped with avoiding using colors like red to signify non-destructive actions.
Pass-doodle
We ended up removing this feature entirely as the heuristic evals correctly pointed out many fallacies with this system and there wasn't a good way to simply fix it. We also added forgot password/username buttons to our login page for the traditional password.
Design
We removed Animan entirely and focused on creating a smaller scoped animation (using a person running on our distance filter) to keep the playfulness we originally wanted. We also limited our color scheme significantly so that there was more consistency across the site and it was an easier design on the eyes. We also took the consistency piece further and worked to ensure that we maintained a few standard design choices across pages. By changing the color palette and focusing more on consistency, we made our design a bit more formal so it looks more like a tool designed for adults than a children's game site. Overall we standardized color and design decisions so that the entire site was more cohesive.
Menu Information
The primary change we made to our menu information is reducing the filters to just the distance filter which is the most important one to our site. We did this to reduce the overwhelming amount of information we were offering to our users but still have those functions via the search bar. If a user wants to search any particular filter they're able to do so via the open search bar. Since we reduced the number of filters we also no longer needed a filter drop down which blocked the search results.