InMotion

InMotion Get moving and grooving! Fitness apps help people track and manage their health, providing an experience many look forward to using to log and track daily exercise. However, few have managed to make exercise and fitness easy or enjoyable. I was tasked with creating an app that gets people active while implementing iOS and AI chatbot interactivity. As a fitness app user myself, InMotion needed to bring a refreshing, motivational twist to the functionality everyone appreciates. It had to get people active without having to dedicate entire afternoons to the gym or a lengthy run. It also needed a variety of workouts and challenges users can participate in to craft a distinct, community-based approach to daily exercise. The Resolution InMotion incorporates a fast-moving identity through its bright yet pleasant color palette and straightforward typography. It provides the positive energy users need to feel refreshed and ready for a fulfilling day. If people feel stuck, the app’s AI chatbot can help them feel motivated and adjust goals when needed. That way, each user’s experience is uniquely their own. The Protagonist After researching market competitors (Fitbit, Peloton, FitOn, etc.) and creating a user persona for the app’s target demographic, I determined the app’s one goal: get people active, especially after sitting for extended periods. I knew it could also feature more niche offerings (dancing, yoga, walking tours, meditation, etc.) when competitors offered little outside of running, swimming, or weight training. I made its color palette and typography reflect its accessible, energetic, and stress-free approach to exercise. InMotion’s purple and yellow palette represents clarity, optimism, and relaxation, helping users manage stress and anxiety by building easy-to-complete routines throughout the day. Lastly, I realized the logo needed a better sense of motion, and inserted speed lines demonstrate the brand’s approach and tone to exercise and provide a strong icon that matches its identity. Once the brand’s aesthetic was established, I explored the app’s user flow via wireframes before fleshing out the app and its components. This was where I began incorporating iOS elements and functions (e.g., status bar, tab bar, and Face ID) with other components custom-made for InMotion (e.g., check marks, buttons, and text fields). The Lesson Through intense market research and prototyping, InMotion’s fitness app is as distinct and interactive as its competitors. It offers all the bells and whistles many are used to, with its AI offering more algorithmic personalization through a chatbot, daily challenges, and guided walking tours, increasing user interactivity and accessibility. AI integration is a valuable asset that brings the user experience to life in today’s tech-savvy times, so learning how to use it to a user’s benefit without feeling tacky or out of place proved worthwhile. The app also refined my ability to prototype an end-to-end user experience and consider feedback from user testing to determine what could be improved. Figma Prototype PreviousNext

Lincoln

Lincoln Small gains lead to big things. Industry leaders have integrated technology into their user experiences through clear affordances and calls to action. However, there is often a lack of simple, trustworthy kiosks and ATMs for users to access their accounts efficiently. The challenge was to introduce a brand relevant to the banking industry that provides users with a pleasant solution to a tedious end-to-end experience. Building a brand and a kiosk revolving around monetary value led me to the man on the penny, Abraham Lincoln. This decision was intentional, showing how even small monetary gains can lead to bigger and better things. Thus, Lincoln’s brand identity implements a colorful yet trustworthy voice in an often stiff and formal industry, prioritizing a user’s needs and what they dislike about using ATMs and kiosks. The Journey To function as intended, ATMs require high interactivity. Users must conduct standard cash-related functions (deposit, withdraw, transfer, request loans, etc.) while inputting the required information; the ATM then receives their requests and provides an overview to ensure nothing was incorrect. The issue often arises with how ATMs display their information with minimal consistency or efficiency. Therefore, Lincoln had to provide users with a seamless end-to-end experience that provides the right amount of information for their transactions and easy-to-understand directions and notifications to guide them in or out of a given function. The Protagonist To start, I considered my personal experience with ATMs and my reluctance to use independent kiosks compared to those from official banks. I allowed this to guide the rest of my user research and underline what I hoped to solve with my vision for an ATM kiosk. Abraham Lincoln came to represent that vision because he is a historically reputable figure, and his placement on the penny reflects the brand’s equitable, building-block tone of voice. With this, I incorporated copper into the color palette and the kiosk’s overall aesthetic. This then provided the brand an overall aesthetic that stands apart from other banks and ATMs and alleviates the unease people often have when using them. Next, I wireframed the user experience, keenly considering who would use an ATM and how people use them. With this in mind, I created two separate paths, one for returning customers and another for new customers, and built their menus around what I and others use an ATM for. Once the wireframes were streamlined, I produced high-fidelity mockups with the interactivity and direction required for a seamless kiosk experience. The Lesson Lincoln proves itself as a simpler yet equally effective alternative to traditional ATMs, with an identity that embodies the building blocks to equity. Prototyping high-fidelity mockups showcased the concept’s potential to remain uncomplicated and replicable while processing and displaying banking information. The concept also taught me how to prototype with Figma components to better simulate the kiosk’s intended user experience. Figma Prototype PreviousNext

Starlight Toys

Starlight Toys A Different Kind of Learning Experience I was tasked with creating deliverables for a fellow classmate’s brand. Starlight Toys develops hands-on learning toys and games and requested an e-commerce website for their brand and an infographic detailing their latest memory toy, Echo. The deliverables also had to be distinguishable from the brand’s products and speak to the company’s target audience. Goals and Process I considered the client’s target audience, as well as their background, provided brand guidelines, and industry competitors. I meticulously worked through sketches of the infographic and website before bringing them to the computer for further refinement. One element of these iterations was the memory toy itself, which uses the company’s mascot to best represent the brand’s approachability to parents and children. The Results The resulting infographic and website showcase my client’s and my thought process surrounding the brand’s execution. The infographic is sleek and incredibly legible, making it applicable at multiple scales and an attention-grabber when put in a storefront window. My favorite element was the memory toy’s digital mockup, with my knowledge of Illustrator creating a toy that feels interactive the moment people lay eyes on it. The website is effective and purposeful, providing users everything they need to make a valued and educated purchase. After much communication between myself and the client, we felt the end deliverables fulfilled their desired attributes and features and provided consumers with a poignant and stress-free experience that made them look forward to shopping with Starlight Toys for their new toys and games. PreviousNext

Story Corner

Story Corner A Crossover of Two Creative Paths What started as an exploration of the Bootstrap library demonstrating a user-friendly, visually consistent website effectively showcasing my ability to build a complete website using its components, utilities, and grid system in a seamless experience became Story Corner—a website to share my past and current library of written work (essays, short stories, WIPs, etc.) for people to explore and discover Goals and Process I created wireframes in Figma outlining the site’s core functions before turning them into high-fidelity mockups utilizing a desired color palette and typographical scheme. Its scheme would be based on books and scripts, which my written work could be identified as when provided in a physical form factor. The site also used a straightforward aesthetic to avoid overcomplicating its interface, later lightening some colors for better legibility. The Results In the end, the website became a companion piece to my design portfolio in illustrating my strengths as a creative. The site is concise and poignant, doing exactly what it needs to without making the user experience too extensive or difficult to read. Its black-and-white aesthetic allows for clear and concise contrast between elements, making hover effects on text boxes incredibly eye-catching. My pre-existing limitations in experience and expertise in creating such an expansive and high-fidelity website forced me to problem-solve and create something that functions effectively, which is fundamental to the creative and design process and knowing where your areas of improvement lie before, during, and after it. Visit Website PreviousNext

Toonly

Toonly A Service Built To Preserve and Validate Animation First conceptualized from a ten-logo design challenge, Toonly is an animation network dedicated to connecting new and returning viewers to stories new and old and help them rediscover their childhood nostalgia—a community made by and for lovers of the medium. To expand upon the brand, I was tasked to create a supplemental brand standards booklet, documenting its style, guidelines, and applications for future brand and client use. Goals and Process Everything, from the logo to the brand guidelines and its executions, were all done first on paper. Each element of the brand and its logo had purpose and spoke to the brand’s mission and the content it provides. Its inception from a ten-logo design challenge helped form constant iterations to the logo’s typography and color palette before being applied to its brand booklet. The brand executions don’t shine away from using animation’s advantage as a medium for all ages. They hint at its younger demographic, with the content populating the service hinting at the inverse. The logo illustrates animation’s often playfulness and accessibility as an artform. The brand booklet is sleek, simple, and concise, with all other executions illustrating Toonly’s approach to being a streaming service and the experience it offers. The Results Everything, from the logo to the brand guidelines and its executions, was all done first on paper. Each element of the brand and its logo had a purpose and spoke of the brand’s mission and the content it provides. Its inception from a ten-logo design challenge helped form constant iterations to the logo’s typography and color palette before being applied to its brand booklet. The brand executions don’t shy away from using animation’s advantage as a medium for all ages. They hint at its younger demographic, with the content populating the service hinting at the inverse. The logo illustrates animation’s often playfulness and accessibility as an art form. The brand booklet is sleek, simple, and concise, with all other executions illustrating Toonly’s approach to being a streaming service and its offerings. https://benruehl.com/wp-content/uploads/2024/04/Toonly-Animation.mp4 PreviousNext

Creative Insight

Creative Insight Think creative. Fitness apps help people track and manage their health, providing an experience many look forward to using to log and track daily exercise. However, few have managed to make exercise and fitness easy or enjoyable. I was tasked with creating an app that gets people active while implementing iOS and AI chatbot interactivity. As a fitness app user myself, InMotion needed to bring a refreshing, motivational twist to the functionality everyone appreciates. It had to get people active without having to dedicate entire afternoons to the gym or a lengthy run. It also needed a variety of workouts and challenges users can participate in to craft a distinct, community-based approach to daily exercise. The Journey Many of the media outlets people love and respect are those most tied to their brand values and tone of voice. Creative Insight’s color palette, typography, and tone of voice do the same‌ under the guise of subtextual and thematic storytelling—elements that are already backbones to many of the world’s most renowned movies, TV shows, and video games. The Protagonist Creative Insight intended to offer people a chance to read an enthusiast’s thoughts on storytelling and what makes it so profound, and design a brand system across print and digital to showcase its presence in both mediums. I wanted to explore color theory and typography to learn how they could enhance or embody a brand’s perspective on journalism and content creation. The brand also required consistency across platforms to best reflect my love and appreciation for the ‌discussion of narratives. To do this, I researched competing media outlets and publications and how they display information across their websites, print publications, and social media. This helped to identify attributes that may help or harm each brand’s identity and how they reach their target audience. The breadth of information and design elements within each brand execution was immense and difficult to implement. Considering this, I allowed my initial concept and sketches, namely Creative Insight’s more playful and narrative-based tone of voice, to fuel the rest of the brand’s identity. Then, I chipped away at making each execution legible and enjoyable for users and readers alike. I wanted people to understand the brand at a fundamental level—from its aesthetic, positioning, and tone of voice—and how it all makes for a cohesive product that stands out from its contemporaries. The result is an expansive outreach across print, website, and social media—all crafted entirely from scratch to support the same identity and allow each to stand tall in its own way. The Lesson Creative Insight is my longest-running exploration into brand identity, tone of voice, and advertising, whether on social media, in a minizine, or on a from-scratch HTML website. It continues to influence my approach to design and represents my attention to detail, creative process, and eye for storytelling with an energetic and philosophical twist. It’s also a playground for me to use while developing my design, writing, and coding skills, whilst making stories out of stories—pivotal to making strong visuals and understanding what makes the best stand out from the rest. Visit Website Read Minizine PreviousNext