SOJO

Project Brand Identity + Type Design + UX

YearFall 2024

Team Josué Avalos Jiménez
Alex Jackan
Kevin Foster

Type

Overview

SOJO, short for "sojourn," is a speculative transit brand imagining what a bus system in Raleigh, NC, could look like fifteen years from now. Built for Branding, Interaction, and Service Design, our team of three was given an open brief with one focus: transportation. What we delivered was a complete brand system anchored by a custom typeface, a full icon library, motion assets, patterns, and product prototypes, all speaking the same visual language.

My role centered on brand identity direction, the custom typeface Sojourn Display, and the icon set. Every piece of the system traces back to one mark (and one happy accident).

01 · Research

We interviewed six regular bus riders and backed it with secondary research across three areas: transit policy and crowding dynamics, applied ergonomics in service design, and international case studies, including Dublin's open-data bus system. We also studied speculative transit concepts to push our thinking beyond the conventional.

The interviews told a consistent story. Riders' pain points weren't mechanical: they were emotional. Uncertainty about arrivals, discomfort in shared space, and a loss of personal control made even short rides feel stressful. Key themes: Comfort, Cognitive Ease, Predictability, and Flow of Information.

Our HMW: "How might we create a comfortable and relaxing environment, regardless of occupancy and journey length?"

From there, we mapped four opportunity areas: enhanced seat experience, personalized wayfinding, improved mobile app, and readily available information. These all pointed back to one underlying need: predictability and agency.

an affinity mapping board titled Affinity Mapping P3, sticky notes sorted under During Ride and Before Ride into System, Comfort, Forecasting, and Information

an Ideation slide listing four opportunity areas (Enhanced Seat Experience, Personalized Wayfinding, Improved Mobile App, Readily Available Information) beside rider interview quotes and a keyword cluster: unpredictable, anxiety, stuck, traffic, strangers, comfort, ride

02 · Brand Identity

We started with the name Sojourn. As I developed the logotype, building each letterform on a consistent circle-and-curve grid, something unexpected emerged. The four characters read as a face: two eyes and a nose. The O's became eyes, the J a nose.

That discovery changed everything. We shortened the name to SOJO because it made the face more legible and more iconic. What started as a happy accident became the conceptual core of the entire system, and gave the project its new name.

The mark system includes a lettermark (S), a stacked logotype, and the full wordmark, each designed to flex across contexts. The "SOJO Faces" variant extends further: the O's can blink, wink, and shift expression, making the brand animate-ready and deeply personal.

a nighttime bus shelter with a glowing green ad panel reading SOJO, Your Journey Reimagined, beside a wooden bench on a rain-slicked street

03 · Color

The palette started with research into calming colors and the science behind them. We wanted riding SOJO to feel peaceful as well as unlike any existing transit system, and the research let one choice do both jobs. Journey (hot pink) and Path (chartreuse green) are the pair that survived: calm to sit inside, and nothing any city has painted on a bus.

Every color name ties back to the experience of moving through a city: Asphalt, Pillow, Journey, Path, Petal, Hibiscus, Circuit, Grove. The secondary palette extends the system for backgrounds and gradients.

Primary

Asphalt#1E1E1E
Pillow#ECECEC
Journey#F179A9
Path#B6DF5E

Secondary

Petal#FFC7DE
Hibiscus#872750
Circuit#E1FFB1
Grove#506925

04 · Custom Typeface

Most brand typefaces are chosen. Sojourn Display was grown from the same grid as the logo itself.

Every glyph is built on a 4×4 construction of rounded rectangles and circular terminals, the exact same underlying structure as the SOJO wordmark. The strokes are the journey. The dots are the destinations. I wanted the brand to be structural and decorative simultaneously. Every character carries the same spatial and stylistic DNA as the mark, so the brand can be set in copy and still feel like the brand.

I designed two styles: Sojourn Display (clean strokes) and Sojourn Display Dots (dots at every intersection, directly mirroring the logo's construction). Both are the same weight, the only difference is the presence or absence of the destination markers. The typeface also includes custom alternates and extended glyph coverage across the full character set, numbers, and punctuation.

Set your own

Lettersunicase: lowercase maps to the same forms

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Numerals

0123456789

Punctuation

!(),-./:;?[]_

bezier construction of a Sojourn Display glyph with anchor points and handles on the left, next to three finished glyph outlines set on a baseline grid

05 · Icon Set

The icons exist to prove the system could live past the logo. Susan Kare's Mac icons are the bar I measure against, a whole interface carried without words, and on every identity I try to push one layer further than the marks. Torocima got an icon set; SOJO got two weights of one, because there were two surfaces to design for: the mobile app, and the seat-back screens we imagined on the buses themselves. Standard weight for one, hairline for the other, both on the wordmark's geometry of rounded strokes and circular terminals.

The SOJO "O", the eye from the logo, appears in the set as a literal eye icon. The mark doing functional work rather than getting quoted.

a single Sojourn Display glyph in pink, built from rounded-rectangle strokes and a circular terminal dot, over its 4x4 construction grid

the SOJO icon set in two weights, pink standard-weight icons on the left and green hairline icons on the right, covering wayfinding, media, and UI actions

06 · Assets & Motion

The SOJO mark tiles into two repeating patterns used across signage, tickets, vehicle surfaces, and digital backgrounds. The dot pattern, a rhythmic sequence of alternating circles, represents flow and movement through the network. The O-mark pattern, drawn directly from the primary logomark, evokes roads, paths, and eyes of connection. Both exist in primary and secondary palettes, making them flexible across any application.

The duotone treatment was a fix before it was a style. The photography came from different sources and didn't hang together, and in critique a classmate said it read as placeholder stock next to everything else we'd made. Running every photo through one brand ink, Journey pink or Path green, pulled them into a single voice.

Motion was the skill I wanted out of this project, and I used After Effects to get it: the dot travelling around the mark is AE. The rest I got to the deadline faster with tools I already knew, Figma prototyping animations and Photoshop timeline frame animations.

a magenta Bus Stop 332, Glenwood St. sign mounted at a building corner beneath the SOJO mark, set against a black-and-white architectural photo

a Raleigh skyline in a pink duotone treatment, a radio tower and the clock-topped high-rise above trees and a streetlight

07 · Product Design

The product work covers two rider touchpoints: an improved mobile app and an in-seat display system. Both came directly from research; riders wanted predictability, comfort control, and information without friction.

The redesigned mobile app surfaces nearby buses, real-time arrivals, and passenger counts at a glance. A dedicated route preview lets riders see their full journey before boarding (a direct fix from usability testing, where users kept getting dropped into a bus screen with no context). The in-seat display lets each passenger set their own lighting, temperature, and window view, turning the ride into something that actually feels like yours.

The product UI is deliberately dark and muted, separate from the bright brand palette, so the interface feels calm while the brand stays energetic. The custom icon set and Journey pink accents keep both worlds connected.

four dark-mode SOJO app screens: a My Bus home with weather and a route slider, a map with nearby buses, and a Bus 42 detail screen with a seat-lighting preference slider

a grey low-fidelity wireframe of a notes screen on the left, an arrow leading to its dark high-fidelity version on the right

pink and blue temperature preference sliders above a Bus 42 route card and stop timeline, next to the SOJO icon set

Reflection

SOJO is the project where I further learned what a brand system actually means: every other piece grew out of one mark and one happy accident. (Cute colors help. I won't pretend they don't.) The typeface being derived from the logo rather than chosen alongside it changed how I think about design at a systemic level.

I'm proud of the scope: a custom typeface with full glyph coverage, a two-weight icon library, a scalable pattern system, motion concepts, and product screens, all in one semester. And I'm proud that the brand doesn't need the logo to feel like itself. I want to keep building stuff like this.

What I'd push further: the prototypes. The brand is tight. The product screens aren't quite there yet. You can feel the seam where the system's consistency starts to loosen in the UI guidelines. Given more time, I'd rebuild the app and seat UI using Sojourn Display and the custom icons end-to-end. The brand earned it.

a pink duotone Raleigh skyline behind SOJO's Mission and Vision statements: predictable moving sanctuaries of comfort, and movement as a seamless extension of personal space

Booklet Spreads

Here are some of the final spreads that our team designed for our printed booklet. This was the last deliverable we had to complete for the class as a culmination of the work we had done for the semester. I wish I had a picture of it somewhere, not sure if our professor still has it...

the booklet's Mission and Vision page, statement boxes over a pink duotone photo of the Raleigh skyline

the booklet's What is SOJO? page, paragraphs describing it as a forward-thinking Raleigh bus system, over a dark ground bordered by the O-mark pattern

the booklet's crew page, The SOJO Crew, listing Alex Jackan, Josué Avalos, and Kevin Foster with their roles and contributions

the booklet's Research page, three secondary-research sources on transit policy, applied ergonomics, and Dublin's open-data bus system, each with a pull quote

the booklet's User Interviews page, a grid of black-and-white video-call stills of the six riders interviewed, an affinity map thumbnail, and a chart tracing Comfort and Cognitive Ease to Predictability

the booklet's journey map across Search, Select, Navigate, and Ride, tracing a rider's quotes on a dashed pink path to the finding that passengers feel a lack of comfort, physically and cognitively

the booklet's Ideation page, the four opportunity areas and interview-quote keyword cluster from the research overview, set in the printed layout

a second journey map in pink and magenta columns, ending in the how-might-we question: how might we create a comfortable and relaxing environment, regardless of occupancy and journey length

the booklet's wireframes page, a search-and-route-list phone wireframe and a tablet weather screen with a Window AR View placeholder, over a scanned sketchbook background

the booklet's color palette page, four primary swatches (Asphalt, Pillow, Journey, Path) and four secondary swatches (Petal, Hibiscus, Circuit, Grove), each with hex, RGB, and HSL values

the booklet's Patterns page, the alternating-dot pattern and the four-petal O-mark tiling pattern, each explained with what it symbolizes

the booklet's typeface specimen page, the full character sets of Sojourn Display in pink and Sojourn Dots Display in green

the booklet's signage page, the Bus Stop 332, Glenwood St. sign photo beside a repeating column of the SOJO stacked lockup

the booklet's Image Treatment page, a pink duotone skyline, a green duotone street kiosk, and a pink-toned Red Hat Amphitheater sign

the booklet's Improved Mobile App page, three dark app screens for route search, bus preferences, and nearby stops, beside the full pink icon set

the booklet's Enhanced Seat Experience page, in-seat display mockups for route progress, window view, and a notes app over a bus interior photo, beside the green icon set

the booklet's Usability Testing page, a before-and-after redesign of the seat preference sliders and the new-note-function flow

a second Usability Testing page, a before-and-after showing the new bus-route preview step and the removed bottom navigation bar

the booklet's Wayfinding page, a street kiosk augmented-reality mockup greeting Hi, Carrie! with a glowing green path overlaid on the sidewalk toward Bus 42

two more wayfinding mockups: a street kiosk with an AR path lit toward Gate 2, and a bus window overlay tracing the route's stops to Bus 42's arrival time

a full-bleed green O-mark tiling pattern with a row of the dot pattern along the bottom edge, closing the booklet

all work