Tiltas

Client: Tiltas
Timeframe: 3 weeks
Role: UI design
Tools: Sketch, InVision

App Screens Perspective MockUp.png
 
 

Challenge overview

Over 650,000 people come home from prison every year, but about two-thirds are rearrested within three years. Tiltas founder Tiffany Smith came to Designation to build a platform that reduces recidivism and connects returning citizens to support they need for a successful transition. A UX team worked with Tiffany to determine that users responded best to an app that includes goal-setting and tracking, a list of resources and topic-based discussion forums, felon-friendly job listings with online applications, and a supportive environment to maintain motivation. Our three-person UI team used their wireframes to create visuals, moving the project closer to development.

At our kickoff meeting, we learned that Tiffany loved gray and yellow but was open to color, and buzzed with energy even at 9am. She described Tiltas, Lithuanian for bridge, as a “landing pad for the formerly incarcerated” and a “net to catch them if they fall.” She wanted the app to be trustworthy, personable, and warm. Tiltas users tended to be apprehensive toward technology and required simple, clear CTAs with no distractions. The use of small words was also necessary to accommodate users that have a lower reading proficiency, and larger text in case of poor eyesight. Tiffany also revealed that users stopped using an app when it frustrated them or didn’t engage them right away, and then they’d spread the word about their bad experience. Some users also weren’t familiar with smartphones, making intuitive patterns even more important.

 

Wireframe changes

We then analyzed the UX wireframes, but didn’t change too much to preserve clarity and ease of use.

 
 
Reviews UX.png

One major change to the UX wireframes was the removal of ratings and reviews for re-entry programs. The UX team noted that the client was worried they would cause friction between her and her contacts. My team and I agreed they were problematic due to the possibility of negative reviews, and decided not to include them.

 
 
Find a Job UX.png

1. On the find a job screen, I moved the search to the top bar, in keeping with a common pattern in material design.

2. We decided to add logos to help users recognize companies more easily.

3. We replaced the hearts with stars as they’re more commonly used for saving items.

(5b) Find a Job_Job Details.png

1. In response to Tiffany’s concern that users apply to every job in sight, we moved the apply now button to the bottom to encourage them to read through all the information.

2. To be consistent with the job listings, the save this job button was converted into a lined star icon; when tapped, it would fill to indicate it was saved.

3. I added the company logo, position, and a photo of the workplace to the top which would help users quickly understand the listing.

4. We left-aligned job type and salary along with the other sections to increase scannability.

 
 
 

Understanding the product

My team and I put together competitors and out-of-category inspiration to help us determine the best course of action for Tiltas’s look and feel.

 
 
Indeed.jpg

The UX wireframes were modeled on Indeed, which achieves visual hierarchy through font size, color, and weight. Cards break down information easily and clearly.

Airbnb.jpg

Tiffany liked Airbnb’s chat interface, but we also noticed the app’s effective use of white space, making it clean, modern, and sleek. Clear headers and grouped content are easily scannable, and its large photos quickly draw the users in.

 
 
Victor.PNG

The client introduced us to Victor and its simple, black and white interface. Sharp, geometric elements give it a contemporary look and feel. Realistic photography in large sizes and text overlays engage users.

Snagajob.jpg

Snagajob uses bright colors in a way that doesn’t distract from the screen’s goal. The layout of the content is straightforward and digestible. Company logos help users scan through job listings more easily.

 
 

From our analysis, we confirmed that white space and visual hierarchy broke down content into digestible chunks effectively, decreasing user frustration and increasing ease of use. Sticking to conventional typefaces and two or three font families also eliminated uncertainty about what to do and where to go next. Contrasting colors and font weights ensured readability and left a lasting impression. After combining everything we learned so far, we focused on user engagement and motivation in drafting our design principles. The fourth was added in response to the client’s comment that the app needed to incorporate personality and style. These guidelines helped us keep our design decisions in check and ensured we put the users first.

 
 

Be my safety net

Since Tiltas users come from stressful environments, it’s important that they trust the app. To reinforce that personal connection, profile photos are large and encouraging language is used to foster communication.

Give me a high-five!

To keep users driven during the re-entry process, Tiltas uses positive language, success screens, and helpful reminders.

Take me back to basics

Mobile patterns and interactions evolve constantly. Tiltas incorporates tried-and-true interaction patterns and icons, along with instructions and larger text.

Catch my eye

Tiltas wants users to recommend the app to their friends, so it has to be cool. Contrasted elements, bold colors, and photography keep users engaged at first glance.

 
 
Logo bg.png

Tiltas’s logo was already designed when we began work on the project. Its lines are reminiscent of a bridge, suggesting the transition to a new life.

 
 
 

Style directions

My teammates and I then worked independently to create three style tiles. During the process, I focused on organizing information in unique, but still recognizable, ways.

 
 
Style Tile 1.png

This style tile used the yellow and grays from Tiltas’s original website. The yellow’s brightness and energy was meant to inspire users during their job search. Taking a note from Victor, the design was modern and geometric with a touch of dynamism, reminiscent of an upward trajectory.

Tiffany really liked how the profile was set up, especially the diagonal line. She thought blocks of yellow were too much in the chat window, but just right for the CTAs. The text needed more hierarchy  to increase scannability.

 
 
Style Tile 2.png

The second tile represented a warm hug—friendly, positive, and encouraging. The combination of pale blue, green, and red was softer, lighthearted, and more comforting than previous color palettes. I replaced the original tab bar navigation with a menu list that highlighted individual items when tapped.

Tiffany wasn’t enthusiastic about the blue and thought this dashboard had too many colors, which would confuse users. She liked the typeface, however.

 
 
Style Tile 3.png

For the third tile, I thought about how users turn over a new leaf by signing up for Tiltas. I started out with a lime green which looked too generic, and switched to a teal green instead. I used photographs for this dashboard menu, instead of icons, to help users instantly recognize items.

The client wasn’t a fan of green either, but understood that it might work for users. She loved the job listings layout though she was concerned there might be a little too much information. She also commented that the large number of photos made it really easy for users to know where to tap.

 
 
 

Iterations and testing

Based on Tiffany’s feedback, I moved forward with the third style tile. She emphasized that her personal preferences shouldn’t limit our color choices—it just needed to look professional, cool, and trustworthy. We also learned that users primarily share through screenshots, and added the name Tiltas to every screen. I replaced the light orange with a light blue to make it feel more modern. The dashboard concept was eliminated as it didn’t make sense to incorporate it into the screens or for users to tap the back button multiple times.

For round one of testing, our goals were to ensure that our designs followed our design principles, aligned with Tiltas users, and represented a product that they’d recommend to friends; and that users recognized elements and patterns. I was particularly interested in learning whether my colors were engaging and the job listings screen was intuitive.

 
 
1 Profile.png
2 Job Coach.png
3 Job Coach Chat.png
Find a Job 1.0.png
5 Job Details.png
 
 

Our first interviewees, Dean and Jeanette, had successfully reintegrated into society and were ready to potentially mentor newly released individuals after launch. They were already familiar with Tiltas, so they were perfect to help test our designs. In general, mine was “straight to the point,” had a balanced amount of content, and was so easy to navigate, “a dummy could get it.” However, they felt the color overlay for the job listings could be confusing for some users, especially those who have little smartphone experience; the accompanying photo was difficult to see and the clickability wasn’t clear. In addition, they felt the same photo should be added to the job details screen to further make the connection. Though the colors were considered “professional,” they were also “blah,” and bright, warm colors like yellow, orange, and purple were suggested instead.

Because the colors didn’t work for these two users, I prepared three more color palettes to uncover any missed opportunities and A/B tested with members of the Salvation Army Pathway Forward program.

 
 
1 Profile.png

Users liked this “fine,” but didn’t seem that excited. It was described as “professional,” a positive point for a job-seeking tool.

Yellow.png

Users felt this iteration had an athletic, masculine appeal, but was too dark. Daryl, the lone male user tested, thought it was “too old-fashioned” and “too black and white, like looking at a piece of paper.”

 
 
Navy.png

This palette reminded users of a hotel- or flight-booking app. They considered it “plain and simple,” and very dark.

Gradient.png

Users described this design as “fresh, clean, and bold.” Female users called it “happy,” but mentioned it might be more inclined toward women. Fortunately, Daryl liked this the best.

 
 

Due to the favorable response, I moved forward with the gradient in building more screens.

At Tiffany’s request, my teammates and I each prepared a different flow for round two of user testing. I built out a prototype centered around posting on the forum. In addition to general usability, I conducted testing to determine whether the gradient continued to have a positive response, if the Tiltas logo stood out enough in its current placement, and if the forum layout reminded users of Facebook.

 
 
12 Resources.png
13 Interviews.png
15 Interviews text.png
16 Interviews posted.png
 
 

Dean and Jeanette from round one were back and said that the colors “pop” and “grab your attention” and that the Tiltas logo on the top was “important” and “noticeable.” The forum layout did remind users of Facebook—specifically the like, comment, and share functions. The actual posting process was “straightforward,” and made them think of email or text—a familiar pattern.

During testing at the North Lawndale Employment Network, Tom didn’t like the gradient because the color combination wasn’t “fresh or new.” On the other hand, Linda liked them and even brought up adding color customization as a feature. They found the resources screen, navigated to the forums, and posted easily.

I received feedback from other designers that the gradient’s orange and purple were too far apart on color wheel, and created gradients in red-pink and purple and green and blue. Along with my existing posting flow in orange and purple, these additions were tested with our last user, Archie.

 
 
Red.png

At first, the difference in color went by unnoticed. The user’s reaction wasn’t as positive, as the colors didn’t stand out enough.

 
Green.png

The green and blue color scheme looked “more certified,” made him “feel good about using the app,” and seemed to be “more for men.”

 
4 Profile.png

Archie liked these colors as they made him “feel like you own the job, feel confident.” It was a little more feminine but he still liked it.

 
 
 

Final designs

As the orange and purple gradient received the most positive response, from both men and women, I continued to use it to construct additional screens.

 
 
10 Find a Job.png

I referenced Snagajob’s job listings for its treatment of company logos. During testing, users responded positively to my teammates’ inclusion of logos; they’re familiar, scannable, and visually engaging.

Instead of percentages, the Tiltas logo represented sponsored listings and indicated a higher rate of employing ex-felons.  The apply function was also removed to compel users to tap for details.

Job Details.gif

Users also favored larger headings on the job details screen and appreciated the scannability they provided. 

I enlarged the map to fit the width of the screen for clarity and legibility.

We added the visit site button because users preferred the option to learn more about the company.

 
 
9 Job Mentor profile.png

Because users asked extensive questions about the job coach, Tiffany realized it’d be better to downplay the title to mentor and only use first names to put less pressure on mentors and preserve their privacy.

Tiltas Prototype.gif

Tiltas's sign up was originally open but, to better handle the launch and ensure its success, the client decided to set up an application to determine whether an individual is a match for the app. The prototype incorporates these screens into its user flow.

 
 

I tied everything together in a style guide containing specifications of all the app elements, which would allow the client to generate new screens in the same visual language.

 
 
 

Future considerations

Our team also gained valuable insight unrelated to UI; these future considerations were documented for Tiffany as part of the handoff, and included additions to the resources section, the option to subscribe to forum topics, and links to Google Maps for easy access to directions.

If I had the opportunity to continue working with Tiltas, I would have liked to test all of my screens, not just the posting flow, to confirm their usability and troubleshoot any problem areas. I especially would have liked to do additional A/B testing with the final two gradients to more accurately determine the best match for users.

We learned from Tiffany that users in transitional centers only had access to computers, not smartphones. To reach a wider audience, she thought about implementing a web version of the app. Though it wasn’t within the official scope of this project, I would have liked to build a few screens for her reference, and integrate those specifications into the style guide.

These improvements would make Tiltas easier to use, more appealing, and a more well-rounded experience. Additional usability testing would further validate (or invalidate) aspects of the current interface, so new features can be added if needed.

 

Reflections

The Tiltas app was my first foray into the world of material design. As the majority of users had Android phones due to the lower cost, it made the most sense to design for this platform first. I learned a lot and I’m happy to be able to include an Android design in my portfolio.  

This project taught me to be ready for anything. As Tiffany accompanied us for most of the interviews, she heard users’ feedback in the moment and modified parts of the app accordingly. It wasn’t hard to make the adjustments, but it was new to be part of a fluid design process with changing priorities. Working this way embodied agile—adapting based on new knowledge and insight and reducing risk of failure. I think that our changes ultimately made Tiltas a stronger product more suited to its users’ needs.

I’m proud to have been a part of a project that has the potential to impact so many individuals. It was great spending so much time with the client and witnessing her commitment to Tiltas firsthand. I also really enjoyed talking to users and appreciated how willingly they gave their time.