Project Overview
Why am I doing this project?
To create an Interactive Information Guide that explains an idea, a process, a relationship, or a complex concept through a larger device-based solution. Gather the information/data and communicate it in a visually compelling way to reach and resonate with targeted audiences. This must be intellectually informative, and visually engaging.
The project aims to achieve several objectives: first, to thoroughly understand the pros and cons of specific graphical forms of communication. Second, to develop a robust and effective solution through a systematic design process. Third, to present useful and interesting information in a way that grabs and holds the audience's attention. And finally, to analyze and evaluate the importance of user interface design for a dedicated display device. By meeting these objectives, we strive to create an informative and engaging experience that effectively communicates our message while maximizing user interaction and satisfaction.
Project Goal
What am I trying to create?
I want to create an engaging and attractive tablet app displaying factual information about the world’s serial killers throughout history. I want my users to be actually be engaged with the information and not feel as though they are reading from an encyclopedia format. I want the visual style to appeal to my users and draw them in.
Users lack a platform for easy access to understand and comprehend the information of past serial killers and their mental contributions to physiological circles.
Solution
How am I going to solve it?
This project is going to solve this problem by creating a unique application with compelling visuals and role playing scenarios while stating factual information plain and simple; it will also be available to everyone as it will be a mobile application for any operating system.
Problems/Opportunities
What kind of problems or opportunities do i want to address?
The project faces several challenges, including the absence of previous examples of a similar interactive guide, the difficulty in creating illustrative assets that accurately represent serial killers, and the sensitive nature of the topic, which may make some people uncomfortable. Additionally, there's an ongoing debate among professionals and individuals with personal experiences regarding the behavioral and psychological aspects and differing perspectives on the topic. However, there are also significant opportunities. The guide could cater to those uncomfortable with the topic by focusing on factual information and statistics while appealing to those interested in the subject through role-playing scenarios. Ultimately, it presents a unique chance to explore a disturbing topic in a visually engaging and immersive way beyond traditional mediums like reading or watching documentaries.
Competitive Analysis
Historical Events and Figures Apps
Historical Figures AR App
The Historical Figures AR app revolutionizes historical learning by combining augmented reality with AI chat functionality, enabling users to converse with virtual representations of famous figures and explore their historical environments. From discussing philosophy with Socrates to gaining insights from Marie Curie, the app offers immersive experiences that bring history to life. However, its availability is limited in certain regions, posing a challenge for widespread accessibility. To overcome this hurdle, partnerships with cultural institutions and regulatory navigation could help expand its reach, ensuring that users worldwide can benefit from its educational and interactive features, ultimately fostering a deeper appreciation for the complexities of the past. One major flaw is that it is not avaliabe in the US.
Hello History- AI chat
"Hello History" is a chat-based AI app enabling users to engage in dynamic conversations with famous historical figures such as generals, presidents, philosophers, revolutionaries, and artists. By prioritizing dialogue over immersive experiences, the app offers a platform for meaningful exchanges that deepen understanding and appreciation of the past, making history accessible and engaging to a wide audience
Infamous America
"Infamous America" is an interactive exploration map showcasing the locations of various crimes and events throughout American history. Despite its comprehensive coverage of kidnappings, robberies, disasters, mass murders, and more, the app's visual quality is similar in its resemblance to Google Maps and has low-resolution imagery. Additionally, its focus solely on American incidents limits its appeal for those interested in global historical events. Nevertheless, for users seeking to explore the darker chapters of American history, "Infamous America" provides a broad overview of significant events and their geographical context.
Murder Minute- True Crime
"Murder Minute- True Crime" provides an engrossing platform for enthusiasts of true crime narratives, delivering gripping stories in a captivating narrative format. Through a combination of compelling storytelling, immersive multimedia elements such as photos and videos, and detailed accounts of crimes and infamous serial killers, the app offers users a deep dive into the darker aspects of human behavior. However, its premium option and trial week introduce barriers to full access, potentially constraining its user base and limiting the reach of its content. Despite this drawback, for individuals fascinated by true crime and eager to explore the depths of notorious cases, "Murder Minute- True Crime" remains a valuable resource, offering a compelling and comprehensive exploration of some of history's most chilling events.
Design Trends
Data Visualization
Data visualization is a pivotal aspect of UI design, converting complex data into visually compelling narratives that tell a story to users. This trend involves arranging data into coherent compositions, such as Spotify's annual summary feature, which offers users visually rich insights into their listening habits. By making data digestible and interactive, this approach enhances user engagement and understanding, reflecting the increasing importance of intuitive data visualization in modern UI design
Experimental Navigation
Experimental navigation in web design has emerged as a dynamic extension of a site's branding, pushing the boundaries of conventional patterns into more creative realms. Through the integration of kinetic typography, animations, hover effects, and unconventional layouts, navigation becomes a visually stimulating experience that guides users in a specific manner. These experimental elements not only add visual interest but also delight users, making the process of digesting information and content more enjoyable. By incorporating fun menus and engaging animations, designers can create visually attractive and engaging navigation systems that captivate users while effectively leading them through the website's content.
Drag Interactions
Drag interactions provide users with a personalized experience and a sense of control, mimicking physical actions for familiarity. Structured typography guides users' attention, offering stability in navigation. Cinemagraphs enhance engagement by leading users' gaze through complex layouts, encouraging continuous scrolling.
Layering
Layering in web design adds depth to the user experience and effectively communicates the brand's narrative. It's particularly advantageous for websites that lack inherent depth, as it creates visual interest and dimensionality. By strategically layering elements, designers can guide users through the site's story, creating a dynamic and immersive experience. Additionally, layering can help organize content hierarchically, ensuring important information stands out while maintaining visual harmony.
Mixing horizontal and vertical text
Mixing horizontal and vertical text in web design breaks conventional norms, offering a delightful and intriguing experience for users who appreciate innovation. This unconventional approach draws users in by creating visual interest and challenging their expectations. It's particularly effective for websites with minimal styles, as it adds a unique flair without overwhelming the design. By blending horizontal and vertical text strategically, designers can create dynamic layouts that enhance both readability and aesthetic appeal. Additionally, this technique can be utilized to highlight key information or create focal points within the design, guiding users' attention effectively.
Overlapping text and images
Overlapping text and images in web design serves to optimize space on the page, allowing for more efficient utilization of layout real estate. This technique creates a dynamic visual effect that captures users' attention and adds depth to the design. By strategically layering text over images or other elements, designers can create a sense of depth and dimensionality, enhancing the overall visual appeal of the website.
Sophisticated scrolling
Sophisticated scrolling techniques like parallax scrolling elevate the user experience by adding depth and dimension to web pages. This technique enhances elements on the screen, providing entertainment and stimulation through unique imagery and animations. By leveraging sophisticated scrolling, websites can establish a deeper connection with users, engaging them on a more personal level and fostering a memorable browsing experience.
Personas
My users' needs will be an interactive app based on a larger screen for better view and access. A unique and compelling visual direction to draw in audiences and not make it look like an encyclopedia. The fact that it will be a mobile app will allow users to access it anywhere. The target environment would be anywhere and anywhere as long as the user has a table device. They do not necessarily need to have an internet connection, but it would surely help. The application would be available from their device's app store and be used at home, at work, at school, at the gym, at the library, at the coffee shop, at the bus stop, anywhere and everywhere. My target audience is those individuals who have a fascination and interest in serial killers and which to learn about them visually instead of through audio or video. My secondary target is people who wish to learn why studying serial killers is important and what contributions have been made in behavioral and psychological circles.
My first user would be a young adult with a fascination with serial killers. My second user would be a psychology major interested in the behavioral aspects of serial killers and how they shaped what we know now and how we behave towards/around them. My throat user would be someone who has no interest or liking for anything gruesome but is forced to learn about this topic and would rather do it in a compelling and interactive manner than read it from a textbook or article.
Key Features
A historical app detailing the beginnings, the life, and the ends of famous serial killers throughout human history. The main categories will be the killers themselves. Within each category, there will be two sections: one section will be a geographical map of the killer's location, path, and murder spot. The map will be interactive so that the user can travel the path they took, and each spot will also be interactive, detailing numerical and factual information about the victim, killer, scene, and situation. There will also be a situational component to each spot that will put the user in the place of the victim, giving the user different scenarios and situations in which they will have to decide the best outcomes to survive against the killer. In the short term, this component will be a role-playing simulator for the user to try and outrun the killer.
The second section will be a historical evaluation of the killer(s) themselves, listing their life story, statistics, and how they were caught. It will also explain how society and people, either within the area or not, have coped in the aftermath. It will also explain useful data and information the government, law enforcement, and psychological groups have gained from these killers and situations.
This app will highlight the importance of how knowing your history and/or living through it could impact one's life. It will give users information about such a harrowing and frightening event, how that has impacted people and societies, as well as the useful information we gathered to develop the law and psychological evaluations further.
Site Map
The site map allows for a visual view of the navigation flow of the project. it illustrates the possible flows available to the user. Starting from when the app is first opened, the user has the option of heading to the Settings, World Map, Card View, Scenarios, or Profile. Within the Settings and Profile, the preceding steps are self-explanatory. The two main flows are from the World Map and Card View.
From the World Map, the user can view the timeline, serial killers, victim killing path, and the impact on society. They can also see the life, capture, and death of the serial killers and all information relating to them.
Sketches
These are my initial sketches. They are very rudimentary and rough and is only meant to give a viewer a brief idea of what the project would visually appear as. The sketches show 2 of the main navigation screens: the World Map and Card View. The third sketch plays off the first one, showing how the screen would appear when zooming in and when information appears.
Target Device
My target device is an iPad 12.9”.
The target environment would be anywhere and anywhere as long as the user has a table device. They do not necessarily need to have an internet connection but it would surely help. The application would be available from the app store of their device and be used at home, at work, at school, at the gym, at the library, at the coffee shop, at the bus stop; anywhere and everywhere.
Wireframes
Version 1
These are the initial wireframes I've done. They include the World View and Card View, as well as the World View when zoomed in on specific victims of the chosen serial killer. There was also the Scenario tab, as this was when I still planned on making a choice-based mini-game. This RPG option was intended to put the user into the shoes of a supposed victim of a chosen serial killer and ask them a series of questions based on their encounter with the chosen killer. This was meant to emulate and depict the often cunning and manipulative nature of many of these killers.
I wanted the World View to have a minimal onscreen UI to focus on the world map itself, with only the slidable timeline being visible. When zoomed in, the places where the serial killer's victims either died or were found would be visible with clickable pinpoints. Clicking on one of the points would bring up a card with the victim's information.
For the Card View, I wanted the portraits of the serial killers to be the prominent feature. I drew inspiration from Pinterest and how their focus is on images, which take up the majority of their screen. So, by having the killer's faces done in an illustrated style, users would be drawn to clicking on a killer and reading more information about them. The filter options would be toggled by a button on the top right of the screen, below the header. The user could filter between male or female, whether all their victims were documented or undocumented, by last name, and by the number of victims.
The World View and Card View would work simultaneously, so any inputs made by the user in the World View would carry over into the Card View. This would make switching between both Views more conceisive and lead to confusion on what information is being displayed. Examples: In the World View, the user could dictate the year. In the Card View, only killers who operated within that year would be displayed. The same is true in reverse, any filters drawn in the Card View would dictate who was shown in the World View. And if a specific killer was chosen in the Crad View, then the victims would appear in the World View.
Version 2
This is my second take on wireframes with minor changes to the layout. I played with having all filtering actions within a slide-out tab coming from the left side of the screen. The three main Views would be within as well as an option to specify a country. The Year slider would be vertical instead and placed inside the tab, as well as the male or female filter.
The Card View would be in the same format, with the only difference being the last letter filter being placed at the bottom. I immediately hated it.
World View screen. The map would be interactable and there would be marker points indicating serial killers at those locations. The amount and frequency of points is dependent on the filters.
This screen depicts what would appear when the user zooms in on a location on the map after picking a specific serial killer.
This screen shows an example of what happens when a user clicks on one of the points, which indicate a serial killers victim. A popup box appears holding information pertaining to that victim.
This is the Card View screen. This is where the user can see all the serial killers in a card view without having to scroll around a map. The amount of cards and who appears is dependent on the filters.
Inspo Boards
Going into this project, I wanted the styles to be rooted in their ability to shape user perception and emotional response while effectively delivering information.
The first inspiration board, A Normal Day, embodies a bubbly, round, and soft aesthetic, making use of blocks and shapes of color to create a fun and approachable visual design. The Infographic Show was my immediate go-to design style when I was in the ideation stage for this project. How they went about delivering haunting and horrifying information about serial killers and fatal disasters of human history to an audience of all ages is phenomenal. It's engaging and keeps the user drawn in and focused. That was my goal with this board: to present complex or even disturbing information in a way that remains digestible to everyone. This design makes it easier for audiences to engage with content without feeling overwhelmed, ensuring that even the most intense topics remain accessible. I wanted a visual design that created an inviting and non-threatening atmosphere, making the experience enjoyable rather than intimidating.
The second inspiration board I titled: Future Wanted. In contrast, this style embraces a dark, minimal, and high-contrast look with bright warning highlights, evoking a sense of urgency and control. The design draws inspiration from wanted posters and dystopian aesthetics, using sharp lines and strict navigation to guide the user with no distractions. This structured and directive approach forces engagement and reinforces the feeling of danger or pursuit, making it highly effective for content that needs to command attention and instill urgency.
Each of these styles serves a distinct purpose—one softens difficult content for accessibility, while the other amplifies intensity and focus, each tailored design to both emotional impact and user interaction.
UI Components
These are a few of the main UI components used in the project. Many of them have second variations to indicate a clicked state and some contain moving animations. I tried to keep the components in a sci-fi. tech style and sticking to a very limited color palette.
Typography and Palette
Version 1
As always, I played around with quite a few different typefaces simply because I am a very visual person. I prefer to see how they appear and compare them next to each other. I also tried two different palettes, which aligned each with the two inspiration boards. One to match the futuristic tech vibe and the other to be more energetic and colorful.
Version 2
It was during my final visual compositions that I solidified what font and color palette I wanted. I wanted it to reflect that sci-fi futuristic atmosphere to emphasize the dangerous nature of serial killers. I drew inspiration from how some sci-fi video games whose settings are in major cities have their wanted posters displayed with bright neon yellow or orange colors and text.
I landed on using Tomorrow for most of the headlines and body text and Teko for smaller headlines. My typeface had to be a perfect blend of digital analog and modern sans serif. So, angled corners were a must.
These were my first compositions, which relate to the Version 2 wireframes and the Version 1 typography and color palettes. These were more copy-and-paste of the fonts and colors to get a more immersive feel for the design. I also experimented with a transparent version, but this option just caused too many problems and conflicts. Would it stay permanently on screen? Will it confuse the user while they explore the world? Just too many questions, plus it was not visually appealing. For the composition with the colorful gradient, I explored more with the font choice and buttons, as well as the year filter. However, through feedback, having two separate filters for the year would end up confusing the user.
For the black and neon blue composition, I ended up using a scroll year style for the year filter as that was more familiar to most users. I also found myself loving the font I chose for this composition and how it matched the dark aesthetic of the filter tab. This led me to lean more towards the futuristic sci-fi aesthetic in my next rounds of visual compositions.
For this round of compositions, I went for a very different UI and visual style. I drew inspiration from Iron Man's tech hub when he interacts with JARVIS and when he's inside his suit. I did follow along with the more futuristic, high-tech appeal as I found it better suited for my project. My color palette was also created based on that, so a neon blue, dark blue, and purple palette to recreate that advanced intelligence and digital interface vibe.
I found that this direction creates an atmosphere that reinforces the idea of restricted information and classified databases, perfect for the topic of serial killers. I brought most of the components to a more minimal, modern aesthetic while maintaining that tech-driven yet engaging design. I made the world map more minimal and contained to a single location on the screen but still kept it as the main focus. I also removed the year filter simply to experiment with how I could keep the World View minimal.
I do regret not putting more time into this round of comps, but it was more of an exploration of a different UI than my last round of comps. .
This is my final round of visual compositions, and I am very pleased with how it came out. I did follow my second round of comps more but with a few changes here and there. The main one is the color palette, with the minor one being the component layout. I decided to use a darker color palette with bright red and neon yellow highlights as I felt it added to that sense of classified information. The use of red and yellow emphasizes the dangerous nature and horrific acts related to serial killers.
For some of the changes, I added an additional filtering option (single vs multiple states) to filter if a serial killer crossed state lines. This was because, throughout my research, I found how crucial this piece of information was concerning how they were caught and how they went too long without being caught. I also added a danger meter that would display a percentage of how "dangerous" a serial killer is. This is rooted in several factors: the serial killer's preference for victimology, the method of capture, personality traits and behaviors, and their past actions. This is in no way rooted in proven facts and would need to be assessed by professionals and more in-depth research, but I felt that it would increase the visual aesthetic and please the users.
Splash Screen
Ideally, the logo and title would animate in a glitchy and tech format.
World View
This is how the World View would look with those specific filters. The map of the world is contained within that section and is interactive. The year wheel would also ideally be interactive, and the user can change the decade with the horizontal slider inside the wheel. Then, a specific year would be chosen with the outer wheel. Each pinpoint relates to a specific serial killer and is based on what location is associated with the killer, where they operated the most, or their hometown. The pinpoints would appear or disappear based on the filters chosen.
World View
This is how the World View would look when a specific serial killer is chosen. Their danger level would update, an image of them would appear, and it would display a CAUTION sign. Depending on where the user moves the map and which pinpoint they press, the killer's image would change location so as not to cover any important information.
Card View
This screen shows an example of one of the serial killer's information when their card is pressed or when they select a pinpoint in the World View. It displays their danger level, victim count, their full name, their killer name (if given one), and a summary of them. There is also an option to read a more in-depth account of their lives, kills, victims, death/capture, and what they contributed to psychological circles.
During this project, I learned a few major things. One: I greatly enjoyed this project. From start to finish, I was able to create something that I am passionate about. I love anything horror and enjoy researching serial killers. This project became a passion project for me, which is why I am disappointed in myself that I wasn't able to complete most of it and make it fully functional. I had so many plans and ideas I wanted to complete and flush out, the biggest one being the Scenarios section. However, I learned that I bite off more than I can chew, which meant that I couldn’t do all the screens and flows I had planned. I wanted to show off more of my project, but the end of the semester was just not agreeing with me. It became very hard for me to focus and get through everything.
Another thing I learned is that maps are very hard to draw. I spent so long drawing the map, the serial killer faces, and creating the UI components that it was painful at times. I learned that oftentimes, your initial idea is not always the best and that it takes a while. I had a few trials and errors to finally get a visual style down. I know I changed my visual design frequently, and now it looks very different from the initial designs, but it was a mix of all the feedback I was given and me just experimenting, exploring, and learning. Feedback from your peers is indeed the greatest tool to improve and grow.
If I were to get the time to finish this project, I would love to fully flush it out. I would get the screens created, put in the animations and interactions, And I would get to complete the Scenarios section. I also aim to narrow down what I can accomplish and to get a visual style set much earlier. I always do end up changing my visual style of projects in the middle or end anyway, but I found my ideation process beneficial for me.
I have also learned that creating a sci-fi tech UI style is extremely hard because it walks a fine line between looking legit and looking like a bunch of shapes and lines. I spent a great chunk of time making sure spacing was even throughout all my components.
Resources
Serial Killers, Part 2: The Birth of Behavioral Analysis in the FBI
A Behavioral Sequence Analysis of Serial Killers’ lives
The Importance of Behavioral Analysis in Murder Investigations
The Psychology behind a Serial Killer
7 of History’s Most Notorious Serial Killers
America’s deadliest serial killers
Gary Ridgway: American Serial Killer
How a crime lab missed evidence that could have stopped the Green River Killer
Works
Digital State IDSpring 2023 | Class | Solo
Retail KioskSpring 2023 | Concept | Solo
Killer KillerSpring 2023 | Concept | Solo
MOLD.Spring 2024 | Exhibition | Collaboration
Contact
Email: adeliamartinez20@gmail.com
Instagram: a.deli.martinez
LinkedIn: /martinez-adelia/
© 2024 Adelia Martinez
Jack of all Trades Designer
Website built with tears, spite, and hope