Lit

Discover new horizons

Lit is a mobile app which helps users discover new interests, enjoy life, and form new social connections. AI generates a list of activities and events based on the user's location, preferences, mood, and many more variables.

This is a solo project designed for an interactivity course.

Product Vision

I wanted to create a product that would brighten and introduce something refreshing into other's lives.

Timeline

September - November 2019
(12 weeks)

Tools Used

Figma, Adobe XD, After Effects

Preface

My main goal for this project was to create an engaging product which had potential for recurring usage. I started by thinking about problems which arose from day-to-day. Initially, burnout and autopilot was a problem which stood out to me. As the project progressed however, I realized these problems were heavy and complex—not something to be solved without proper research and resources.

In the end, I focused on designing an alternative solution for people to discover new interests and connect with others—with the intent and purpose of relieving burnout stress as a byproduct.

Research

Although I didn't have the resources to conduct a proper research study, I gathered insight from conducting preliminary research (reading articles and scientific journals) and having casual conversations with peers.

"One thing I've been doing is make a list and planning ahead of time, having a schedule helped me take off stress because I felt rewarded for crossing these things off."

"I think it's important to remind yourself that there is a lot more to life outside of working and studying. Having community building activities in college helped me feel better."

"I felt really stressed about graduating, but then I had someone tell me it's okay to take a break. It's important to take care of yourself first — school will still be there in four months."

Userflows

I roughly sketched out a couple 'userflows' to grasp a general idea of app functionality and overall structure of the experience.

Low-fidelity Sketches

I sketched some wireframes with pen and paper, utilizing this step to explore different types of layouts and visual interaction ideas.

Mid-fidelity Wireframing

I designed mid-fidelity screens using Figma, focusing on layout, hierarchy, and copywriting. Using different hues of grey allowed me to identify areas of importance, shaping the focus of each screen.

Visual look and feel

Designing the right aesthetic for Lit was important because I wanted to visually portray the idea that Lit is like a 'candle' for people who feel burned out. Using dark mode and noise as a texture added a dimension of style which reflects the way our eyes perceive lighting.

Typography
I used Averia Serif Libre for headers and titles—as it complemented well with the representation and shape of a candle. I used SF Pro Text as a secondary typeface to help build trust and communicate efficiently.
‍
Colours
I experimented with warm colours to convey the brand, using pink as a primary colour and 90% black to create a comfortable contrast. Colours were used sparingly, for screens which had a call-to-action. Where possible, I used Stark (plugin) to follow WCAG's AA guidelines.

Spacing
I used an 8-pixel baseline grid system to space out components.

Prototyping Features

Using Figma's Smart Animate, I prototyped the app's features. You can explore the full prototype with all the assets here.

Reflection & Takeaway

Throughout the course of the project, I did a lot of exploration and experimenting. I've learned more about accessibility practices and ways to organize components into a design system. Looking back, I could greatly improve on the accessibility aspect.

Thinking about edge cases — I had made the assumption that my target users would be able to use this app wherever they were located—however, when asked about users who lived in rural areas with no activities around their area, I was stumped. I think inclusive design is important, so the overall experience could greatly benefit if I were to go back and think about ways to be more inclusive.

Before, during, and after the experience — one of the challenges and feedback I ran into was thinking about ways to implement app functionality before, during, and after the user experience. I focused a lot on the planning experience, but I learned to ask myself 'what's next?' or 'how do your users interact with your product?'