Ratwalk - UX/ UI Design, Brand Identity
Overview
Ratwalk is a gamified mobile app that allows users in big cities to go on customized adventures to see new neighborhoods and sites. It relies on the concept of progressive disclosure to create an element of surprise and users "cityrats" can collect points "trash" at destinations to play the game! The scope of the project includes an app and associated brand identity.
Role
Ratwalk is a mobile application created under the guidance of Kent Millard for Interaction Design II at Northeastern University. The project spanned 3 months.
The Project
My main deliverable is an app that prioritizes your well-being and allows you to find your center amidst your busy schedule through habit-building techniques and daily prompts. A brand identity, website, and print campaign will showcase the app and encourage people to download it. The project will be geared towards millennial and Gen Z adults who are stressed and constantly busy but are looking for ways to prioritize their well-being and find their center amidst the chaos.
The Problem
Young adults who are stressed and overwhelmed with busy schedules need a way to relax and reflect while going about their daily lives.
Competitors
User Interviews
To better understand who I was designing for, as well as their needs, wants, and pain points, I spoke with target users about their current and past experiences with journaling. This helped inform my user personas, as well as key features that I wanted to include in the app. After several interviews, common themes emerged which I was able to sort out and explore more thoroughly.
%201.png)
Branding
As I thought about how I wanted to brand Daili, I was cautious of how typical journaling platforms look. In my research and interviews, I found that journaling platforms are typically very sterile and neutral in their design, which only perpetuates the idea that journaling is for negative thoughts or problems rather than positive ones. For Daili's brand, I wanted to create an atmosphere of fun and approachability, to show how journaling can be a part of your life in the highs and lows - when you're feeling down but also when you're doing great! To achieve this, I focused on a bright color palette that was clean and playful and type that was accessible for mobile while matching the unique energy of the brand.
Meet Daili
Your new favorite journaling app, Daili seeks to make journaling a seamless experience by providing daily prompts, habit tracking, and photo features - all in one delightful interface.
Try the app!Other Deliverables
In addition to the Daili mobile app, I created a sales website, widget set, and print campaign. These deliverables expanded on the Daili brand and helped bring the app to life.
Problem
It’s easy to find nice makeup, but it’s hard to know if it’s nice for the planet, people, and animals.
In today's world, it is super easy to find new beauty products, but it can be difficult to know the impact of those products. As younger generations become more and more concerned with ethical consumption and sustainable business practices, it will be increasingly important for companies to be aware of this shift.
Research
Preliminary Research
I began my research by looking at beauty trends, sustainability metrics for Gen Z, and talking to friends. I created hunch sketches, an A-Z brainstorm, and reverse personas to narrow my focus and identify a targeted concept.
_Page_2.jpg)
_Page_1.png)
User Interviews
After defining a primary user group, I went through a quick round of structured user interviews. I conducted the interviews in person in Boston, MA and all were recorded with the permission of interviewees. Participants were selected based on them being female-identifying, between 18 and 24, and using beauty products daily for at least 5 years. I dissected these interviews and mapped key quotes to find common themes. This led me several important takeaways.
Key Insights and Takeaways
Most people want to shop sustainably but whether that consideration comes first depends on how much they are willing to spend among other factors like reading reviews and trying out the product before hand.
A lot of brands say they are ethical so understanding exactly what they are doing, both in a product and also as a company, is important. Furthermore, having all of this information in a convenient place that is easy to access would make the whole process significantly easier and cut down on user effort.
Smaller brands can be harder to access because they don’t have as much recognition and popularity as larger, typically less sustainable companies.
People shop both in person and online for beauty products and everyone has a unique process which specific processes and priorities.
User Personas
Define
After working to empathize and understand my target user, I generated a series of how might we questions to ideate potential workflow options. I then refined these statements and narrowed down to two primary workflows that would best encompass my user's wants and needs.
How might we scan ingredients quickly so that we can purchase products that align with our values without relying on labels?
How might we learn about new companies as well as their products so that we can feel better about supporting ethical organizations?
Ideate
Sitemap
Next, I created a sitemap to visualize the layout of the website. This step made it easier to understand what to build and where to put it in my flows. From here, I was able to build a brand identity that replicated the look and feel I was aiming for and begin to design my wireframes.
Prototype
After defining the brand identity and information architecture, I began working with low-fi wireframes. I focused on a two-pronged approach where users could deep dive into specific products to discover companies as well as deep dive into companies to then find specific products.
After several iterations, I began user testing. I asked users to perform certain tasks like searching for a product or researching a company, as well as to provide feedback about their experience. I then made necessary changes and tweaked pain points that were slowing users down. Finally, I built out high fidelity wireframes for my two primary workflows on desktop and mobile.
Chuck Taylor
Working with a 24 x 36 poster, I used Chuck Taylor Converse to demonstrate my understanding of fundamental design principles. Throughout this project, I focused on differentiating type as information by creating distinct layers. I also used a flexible yet cohesive color system to highlight important pieces and achieve balance in both color and composition.
Process was a critical part of this project, as it spanned two months of classwork. Below I have included a chronological order of drafts that demonstrate my progress as I worked towards my final version. Some of my "a-ha" moments include introducing a color system, finding the delicate balance of black type, and achieving dynamics shifts in scale.
The Ladies' Book of Etiquette
The Ladies' Book of Etiquette was created under the guidance of Mark Laughlin for Typography II at Northeastern University. This project, a full-length book, emphasizes the importance of building a hierarchy between type and image and creating a flexible yet comprehensive system that can be used throughout each chapter. In this project, you will find six distinct hierarchies of type. For this project, I pulled text from The Ladies' Book of Etiquette and Manual of Politeness, written by Florence Hartley in 1860, and used images from Ashley Armitage's archive. I wanted to juxtapose the crude and sexist advice given in the text with images that provide glimpses into the life of the modern woman. Not only was this a fun opportunity to highlight how the perception of women constantly changes, but the visual opportunities to contrast dress, attitude, and behavior from the late 19th century and early 21st century are endless. When establishing hierarchies throughout the book, I used signaling systems like Bodoni ornaments to call attention to my captioning systems as well as layered black and white images over colored ones to highlight the drastic changes outlined in the body text.
Full Project AVAILABLE HERE
Opportunity
Create a brand that embodies the fun and light-hearted spirit of the Bavarian Alps while appealing to a young audience looking for fun, new alcoholic beverage options.
To understand how I would build the brand, I needed to understand the market. I did some research and found out the following. This helped me narrow down my target audience and start to piece together elements of the brand.
Ready-to-drink cocktails are the fastest growing alcohol category, growing 50% from 2019 to 2020
The global premix market is expected to grow to 20.33 billion dollars by 2023, up from 17.05 billion in 2020
What are consumers looking for?
low calorie
low alcohol content
convenience
Who is our target audience?
aged 25-37
social
on the go
Ideation
I began the ideation process by looking at sources of inspiration. I was drawn to the elderflower plant, a key ingredient in any hugo. I started experimenting with abstracted elderflowers and wordmarks that embodied the flower's playful yet elegant identity. The logo's minimalistic shape matches the modern brand identity and represents the simplicity of the drink.
The lettering, set in Losta Masta, is an inviting and fun typeface designed by Kadek Mahardika. The use of lowercase letters evokes a familiar and friendly feel, in contrast to most alcoholic branding and on target with our audience.
Color Palette
The Elder color palette reflects the vibrant and inviting tone of the brand and product. Designed for millennials, the colors are youthful and versatile, ready to be used for a wide variety of applications.
Application
To demonstrate the look and feel of the brand, I designed the product packaging on a sleek 500ml can. I wanted Elder to stand out on a shelf of prepackaged cocktails as a non-intimidating option that is just as refreshing as the drink itself.
Opportunity
Create a brand that embodies the fun and light-hearted spirit of the Bavarian Alps while appealing to a young audience looking for fun, new alcoholic beverage options.
To understand how I would build the brand, I needed to understand the market. I did some research and found out the following. This helped me narrow down my target audience and start to piece together elements of the brand.
Ready-to-drink cocktails are the fastest growing alcohol category, growing 50% from 2019 to 2020
The global premix market is expected to grow to 20.33 billion dollars by 2023, up from 17.05 billion in 2020
What are consumers looking for?
low calorie
low alcohol content
convenience
Who is our target audience?
aged 25-37
social
on the go
Ideation
I began the ideation process by looking at sources of inspiration. I was drawn to the elderflower plant, a key ingredient in any hugo. I started experimenting with abstracted elderflowers and wordmarks that embodied the flower's playful yet elegant identity. The logo's minimalistic shape matches the modern brand identity and represents the simplicity of the drink.
The lettering, set in Losta Masta, is an inviting and fun typeface designed by Kadek Mahardika. The use of lowercase letters evokes a familiar and friendly feel, in contrast to most alcoholic branding and on target with our audience.
Color Palette
The Elder color palette reflects the vibrant and inviting tone of the brand and product. Designed for millennials, the colors are youthful and versatile, ready to be used for a wide variety of applications.
Application
To demonstrate the look and feel of the brand, I designed the product packaging on a sleek 500ml can. I wanted Elder to stand out on a shelf of prepackaged cocktails as a non-intimidating option that is just as refreshing as the drink itself.
The Problem
College students and other young adults in Boston don’t have ways to inexpensively explore the city and have fun outside.
Who is the user?
18-35 year old Boston city-rats who are interested in exploring the city, taking risks, and being a part of a fun and vibrant community.
What do users want to do?
Users want to explore new areas and feel a sense of adventure and excitement while doing so.
The Process
To develop the brand and identity of the app, I spent several weeks working on various process driven activities such as mapping out the environment user's would be interacting with, storyboarding workflows, creating a concept video, playing with various type pairings and scales, and doing "Crazy 8's" to finalize my logo and characters. Some of these process elements are seen below.
The Brand
Understanding my users and the core value of my app, I decided to find typefaces and color palettes that were fun, engaging, and playful. I looked at various games for inspiration and one of the main challenges I faced was finding the balance of "childhood fun" energy and the app being targeted towards adults. To intertwine the two, I chose a purple gradient palette and incorporated a series of characters to build the Ratwalk identity. These elements evolved throughout the design process as I tested my app and went through rounds of critique.
The Mobile App
The core deliverable of this project was the mobile application where users play the game. Ratwalk consists of 3 main workflows where users take a quiz to determine their preferences and are sent on a progressive disclosure adventure to explore new neighborhoods and monuments of Boston. They can then rate and review these adventures, as well as share them with friends as they gain points.
You can view Ratwalk's development below, as well as click through the final prototype.
Background
This project aimed to redesign the TOM UI product search page for Takeoff's warehouse management software. The software is used by employees in large grocery warehouses to manage inventory and track orders. The current product search page was identified as a pain point for users, who found it difficult to quickly locate the products they need.
The study began by conducting user research to understand the current user experience and identify specific business needs in the form of user interviews. Based on the findings, a new design was created and tested to ensure it met client needs and addressed concerns identified in our initial research. Additionally, usability testing and surveys were used to track progress and measure success. Ultimately, the goal of the redesign was to create a product search page that was intuitive, efficient, and effective for Takeoff's clients.
Discovery
The core problem Takeoff's customers (grocers with large warehouses used to pack online orders) faced within TOM UI was that the product search page, a first-stop to troubleshoot order issues, view inventory, and generate data sets for various business needs, was practically useless. With massive assortments and pay tied to hitting KPI's, warehouse associates were wasting valuable time trying to navigate a search page with limited functionality. Below outlines the existing page prior to this redesign.
Define
After conducting user interviews and visiting several of our MFC's (warehouse centers), I worked with internal stakeholders to define business needs and establish MVP features. A large consideration was tied to the massive amount of data that we could display, and prioritizing which pieces were most relevant to warehouse associates. I worked with clients to create force ranking exercises which yielded prioritization insights and helped narrow the focus of the project.
See below for data that needed to be included in the functionality of the page.
Design
Over the course of the design process, I met regularly with our principal designer, product manager, and dev team, to ensure the project was on schedule and under budget. Given the nature of the organization and the newness of its products, I also worked to build out necessary components and refine our design system as I was building out this project. This set a precedent for future redesigns and ensured best practices were bring followed early on. I've outlined some of the design process below:
- created low fidelity and high fidelity wireframes
- iterated based on UX research and client feedback
- developed pixel-perfect wireframes in Figma
- built out a versatile design system, refined current components and guidelines
- conducted a usability study with 100 warehouse associates to better understand their needs and solicit feedback for the redesign
- led client-facing calls, meetings with our dev team and PM's
- advocated for my work to leadership, resulting in increased prioritization of the project
Further Applications
After completing the product search page redesign, I explored ways to build responsive designs that could provide additional compatibility on mobile devices. While mobile access to TOM UI was not available during my time on this project, all warehouse staff were equipped with a Zebra device for scanning and managing inventory which presented a huge opportunity for streamlining our software and reducing times needed to find inventory on the one large device in each warehouse.
Problem
Editorial photography and stunning graphics were the main way for customers to be drawn into virtual "boutiques" where they could see the products offered in that flash sale. With tight margins and targets to make in order to hit financial projections, each flash needed to perform extremely well. As a designer, it was critical to align my work with our personas and bi-quarterly branding. I was also responsible for adhering to best practices which included the appropriate selection of imagery and type readability.
Process
For graphic "doors" I selected on-trend imagery from our database and performed small to extreme Photoshop edits in order to align to our brand standards. For flash doors, I created backgrounds from abstract imagery and created unique typographic layouts to distinguish from regular sales.
I also worked on social assets (IG, FB, and Pinterest) and animated banners for a variety of marketing campaigns including our AAPI spotlight series.
