House of The Rising sun
Overview
The "House of the Rising Sun" project was a captivating journey into the world of interactive storytelling, where I explored the intersection of design and narrative. Drawing inspiration from the iconic song covered by Nina Simone, this project delved deep into themes of regret, choices, and consequences. I meticulously crafted a visually immersive experience, complete with hand-illustrated backgrounds, to engage users in a compelling narrative. As the UI/UX Designer for this project, I aimed to strike a balance between aesthetics and functionality, creating an emotionally resonant user experience. By blending storytelling, design, and interactivity, "House of the Rising Sun" became a testament to the potential of digital narratives to evoke powerful emotions and engage users on a profound level.
Project Description
- Challenge: The challenge was to design an interactive story that effectively communicated the song's narrative while engaging two distinct target audiences: parents and troubled teenage girls. Understanding their motivations and desires was crucial for the project's success.
- Solution: I developed "The House of the Rising Sun" as an interactive story, incorporating user research, storytelling, and digital design. The story aimed to engage both parents and troubled teenage girls by addressing themes of regret and consequences.
- Personal Roles: Conceptualized, designed, and developed the entire interactive story, including hand-drawn illustrations and user interactions, to convey the emotional depth of Nina Simone's rendition of "The House of the Rising Sun." Conducted user research, aligned the story with the target audience's interests, and utilized design tools like Figma and Adobe software to create an engaging user experience.
design process
- Tools and Software Used: I utilized Figma, Adobe Photoshop, and Adobe Illustrator to create a visually captivating and emotionally engaging interactive story.
- Deliverables Produced: I produced a unique hand-drawn visual style for the interactive story, ensuring it would appeal to the target audience.
- Team: I worked independently on this project, taking on all aspects of design and development.
- Responsibilities: My responsibilities included conceptualizing, designing, and developing the entire interactive story, from visual elements to user experience, to effectively convey the narrative's emotional impact.
Title Screen
Purpose
The Title Page for the "House of the Rising Sun" interactive story project showcases my creative and immersive design skills, offering users an enticing entry into the narrative. Its engaging layout and captivating visuals aim to draw users into the story, making it an ideal representation of my capabilities as a UI/UX Designer.
Explanation
- Navigation Elements: The top navigation bar, featuring a hamburger menu, an information icon, and an icon in the middle, is strategically designed to provide users with intuitive access to various aspects of the story. This user-centric approach reflects my commitment to user-friendly design.
- Visual Atmosphere: The background image, depicting four ace cards on a wooden desk with a striking element of blood, immediately sets the tone for the story. Overlaying this image, the bold heading "The House of the Rising Sun" and the tagline "By New Beginnings" are presented in all caps, creating a visually captivating introduction. The "Begin" button serves as a clear call to action, encouraging users to start their storytelling journey.
- Bottom Navigation: The bottom navigation bar, with its black background and 50% opacity, adds functionality with a volume icon on the left and an information icon on the right. These elements offer users control over the audio experience and access to additional project details, enhancing their overall experience.
Significance
- Immersive Storytelling: The Title Page aims to immerse users in the narrative from the very beginning, demonstrating my ability to create engaging and captivating digital experiences, a valuable skill in the world of interactive storytelling.
- User Engagement: The strategic placement of the "Begin" button and the intriguing visuals are designed to engage users immediately, aligning with the project's goal of drawing users into the story.
Role
- Creative Designer: As a creative UI/UX Designer, I combine professional design principles with a touch of personal flair, resulting in visually appealing and immersive interfaces.
- Strategic Storyteller: The Title Page serves as a strategic storytelling tool, reflecting my understanding of how to create an enticing and engaging narrative experience for users.
Story Page(s)
Purpose
The Story Pages within the "House of the Rising Sun" interactive narrative project illustrate my proficiency as a UI/UX Designer in creating a cohesive and immersive storytelling experience. These pages serve as the canvas for the narrative, blending seamlessly with the overall design while providing essential navigation elements for user engagement.
Explanation
- Background Illustrations: Each Story Page features a background image meticulously illustrated by me. These custom illustrations contribute to the unique and captivating atmosphere of the narrative, showcasing my artistic and creative abilities.
- Narration Text: Positioned between the volume and info icons, the narration text serves as a vital component of the storytelling experience. It guides users through the narrative, enhancing their understanding and immersion in the story.
- Page Navigation: To facilitate seamless navigation through the narrative, clear directional cues are provided.
Significance
- Immersive Storytelling: The Story Pages emphasize my ability to create immersive and engaging narrative experiences by seamlessly integrating custom illustrations, navigation elements, and narration text.
- Consistent Design: The continuity in design elements, such as the top navigation and bottom navigation bars, showcases my commitment to providing users with a cohesive and user-friendly storytelling interface.
Role
- Creative Illustrator: As a creative UI/UX Designer and illustrator, I bring a unique blend of artistic and design skills to create visually stunning and immersive narratives.
- Narrative Facilitator: The inclusion of narration text and clear page navigation underscores my role in guiding users through the story and ensuring a smooth and enjoyable storytelling experience.
About Us
Purpose
The "About Us" page within the "House of the Rising Sun" interactive narrative project serves as a testament to my UI/UX design skills in crafting an engaging and informative character introduction. This page is designed to provide users with a deeper understanding of the musician Nina Simone, designer Alexus Jenkins, and fictional author, Kelly Collins, enhancing their connection with the narrative.
Explanation
- Background Illustration: The background is artistically adorned with two outlined cards pointing in different directions. These cards, set against a gradient background transitioning from #000 to #5E5E5E and back to #000, create an aesthetically pleasing backdrop that complements the narrative's tone.
- Introduction: Positioned prominently on the page is a picture of the musician, author, and designer. To the left of this image, her name and the title "Musician" are displayed, introducing users to her role in the narrative. This design choice reflects my commitment to user-friendly information presentation.
- Biographical Description: Below the musician's introduction, a black background with 50% opacity sets the stage for a detailed description of Nina Simone's life. This section invites users to delve deeper into her background, enriching their understanding of the narrative. Three square-shaped black-and-white pictures of Nina Simone accompany the text, providing visual context to her story.
Significance
- Character Engagement: The "About Us: Musician" page highlights my ability to engage users with compelling character introductions. By combining visual elements, descriptive text, and artistic backgrounds, I create an immersive experience that draws users into the narrative.
- Consistent Design: The page maintains design consistency with the rest of the project, ensuring a seamless and user-friendly journey through the interactive story.
Role
- Character Presenter: As a UI/UX Designer, I excel in presenting characters effectively, leveraging visuals and descriptions to enhance user engagement and connection with the narrative.
- Storytelling Designer: I skillfully integrated narration, visual elements, and navigation to create a seamless and immersive storytelling experience, emphasizing my ability to engage users through visual storytelling.
- Aesthetic Illustrator: As an aesthetic illustrator, I not only designed the background but also carefully selected and integrated images and colors to evoke emotions and enhance the overall artistic and narrative quality of the page.
Our Mission
Purpose
The "Our Mission" page is designed to convey the primary mission and values of New Beginnings, creating a profound emotional connection with the audience while providing easy access to testimonials for validation.
Explanation
- Mission Statement: The page prominently features New Beginnings' mission statement, emphasizing transparency and trustworthiness in line with the organization's commitment to helping troubled teens and their families.
- Empathetic Design: The background color choice, a black overlay with 50% opacity, symbolizes empathy and understanding while highlighting the mission statement's importance.
- Informative Content: The detailed narrative below the mission statement articulates the organization's approach, principles, and expected outcomes, demonstrating my ability to present complex information in a digestible format.
Significance
- Emotional Connection: The page is designed to establish a strong emotional connection with the audience, which is vital for an organization dealing with sensitive issues like troubled teens.
- Trust Building: By openly sharing its mission and principles, New Beginnings builds trust with potential clients and their families, fostering confidence in its services.
- User Engagement: The "Testimonials" button prompts users to engage further with the content, offering social proof and reinforcing the organization's mission.
Role
- Empathetic Designer: Through the choice of colors and content presentation, I infused empathy into the design, creating an emotionally resonant experience for visitors.
- Strategic Communicator: I effectively communicated New Beginnings' mission and values through the design, aligning visual and textual elements to convey the organization's essence.
- Conversion Optimizer: By strategically placing the "Testimonials" button, I aimed to optimize user engagement and conversions, reflecting my focus on achieving specific goals through design.
Testimonials
Purpose
The "Testimonials" page serves as a platform for visitors to gain insights from previous clients' experiences with New Beginnings. It also encourages visitors to contribute their own testimonials, fostering community engagement and trust.
Explanation
- User-Centric Testimonials: The page focuses on user-generated testimonials, making it easy for visitors to access authentic and relatable feedback from others who have benefited from New Beginnings' services.
- Design Cohesion: The use of a black background with 50% opacity maintains design cohesion with other pages, creating a consistent visual identity for the website.
- Interactive Form: A well-structured testimonial submission form is presented on the right side, ensuring user-friendly interaction and data collection. The form's fields are clearly labeled, making it easy for users to provide their feedback.
Significance
- Trust Building: User testimonials are a powerful tool for building trust, and this page leverages them effectively to instill confidence in New Beginnings' services.
- Community Engagement: By encouraging visitors to share their own testimonials, the page fosters community engagement and enables individuals to become part of the organization's success story.
- User-Centered Design: The layout prioritizes user-generated content, reflecting my commitment to user-centered design principles.
Role
- Trust Builder: Through the presentation of authentic testimonials, I contributed to building trust in New Beginnings' services and mission.
- User Experience Enhancer: The interactive form design enhances the user experience, making it seamless for visitors to share their feedback.
- Community Builder: By facilitating user contributions, I helped create a sense of community and collaboration among visitors to the site.
Personal TakeAways
My engagement in the House of the Rising Sun project as both a UI/UX Designer and creator was a transformative experience that left me with invaluable insights. Firstly, the project emphasized the profound impact of storytelling in design. Crafting a compelling narrative and fostering an emotional connection between users and the content is essential in creating engaging and immersive user experiences.
Moreover, this project underscored the significance of personalization in design. Tailoring the storytelling experience to the user's emotions and experiences deepened their engagement and understanding. The project reinforced the importance of context and relevance, encouraging users to associate information with familiar feelings and situations.
Collaboration played a pivotal role in this project, highlighting the importance of clear communication and the synergy between creative roles. Working on this project as a UI/UX Designer and creator allowed me to strike a harmonious balance between aesthetics and functionality, emphasizing the enduring importance of user-centric design principles. These takeaways will undoubtedly shape my future endeavors in crafting meaningful and immersive digital experiences.
your insight matters
As I am enthusiastic about becoming a UI/UX Designer in the gaming industry, your feedback would be invaluable!
Whether it's a spark of inspiration, a constructive critique, or a simple word of encouragement, I'd love to hear from you through a meeting!
Help me refine, evolve, and reach new heights.
Check out my next project!
exploring a creative student hub of valencia college
Dive into a project I'm proud to be a part of—Valencia Graphics. Here, we fuse cutting-edge design with innovative user experiences, showcasing the brightest minds from Valencia College. Experience firsthand the digital masterpieces crafted by tomorrow's UI/UX leaders.
