.png)
Designing a mobile app to empower and guide individual exploration.
Given the opportunity to build anything under the supervision and support of Viget, I spent 10 weeks in the summer of 2023 working with a team of 6 others to conceptualize, design, and engineer a fully-functioning mobile application.
My wonderful team consisted of: Anabel, Anya, Avery, Darby, Robert, and Sadie.
Product Design Intern
Summer 2023, 10 weeks
UI/UX Design
Product thinking
Cross-functional collaboration
Figma
Whimsical
In the summer of 2023, a team of researchers, designers, and developers assembled in the greater DC area, eager to embark on a multitude of personal projects and one capstone group project—Soli. Despite our different geographical and academic backgrounds, the synchronicity of our ages and life experiences led to similar inclinations when discussing our client-simulated app project. We considered what we knew about ourselves, others, and the state of the world. We felt frustrated by our collective digital dopamine indulgence, penchant for instant gratification, and ultimately, the isolation we felt from the outside world. Our propensity to solve outweighed our willingness to succumb. Over 10 weeks, we brought Soli into existence: an app that empowers individuals to get out on their own by following guides that others have posted about the events of their day, and by sharing their own solo adventures.
Figure 1. Sneak peek at the final high-fidelity screens :)
As the product designer in my team, I wore several hats, monitoring the micro (fine-tuned changes in component library) against the macro (smooth cross-functional collaboration). This meant honing in on both my creative and technical skills, being at once a broad idea-generator and meticulous problem-solver.
Figure 2. Further feature refining after problem had been defined.
While some ideas may materialize all at once, the concept of Soli opened with a mere direction and crystallized element by element. A scheduling app morphed into a traveling app, which matured into a social app to help people find events nearby. From this idea, we whittled down our approach, refining further with each conversation. We aimed to be as specific and precise as possible—both to distinguish our app from others on the market, and in consideration of our tight timeline for the delivery of an MVP.
I advocated for the specific direction of individual exploration to bring more intentionality into our initial project scope, which the team unanimously shared an enthusiasm for.
Goal: Understand users' processes and needs for activity choice and planning.
Findings from initial user research were pivotal in guiding my design process. Research insights translated directly into actionable recommendations to carry forward. Instead of inventing from scratch, I now had concrete evidence and data to build off of.
Figure 3. Key insights consolidated from initial user interviews.
Four major themes emerged, highlighting the importance of certain values.
01
Desire for solo exploration
Users recognize the benefits of solo exploration and share a desire for it.
“I honestly don't know if I've ever been to an unstructured, unguided experience on my own...If I saw another person went somewhere alone, I'd probably feel more comfortable and be more keen to do it.”
02
Authenticity and trust
When choosing a guide, users value a few key features to determine trust:
- The # of recommendations it has
- Unstaged photos
- Previous experiences of the poster
“I tend to look at the volume of ratings. So if something only has one rating, I pretty much completely discount it.”
03
Ease of use
- Location is a highly valued consideration when users pick guides to follow
- Users often build their days around a central activity or place.
“I use a map to scroll or zoom in and out of places that I'd be willing to drive to.”
“Sometimes I will lock in to one event and all of the other activities kind of fall in.”
04
Barriers to posting online
Users are hesitant to post online if they:
- Can be recognized
- Don’t see the value of their posts
“There’s already a bunch of reviews that were going to say the same thing as me. What could I share that they couldn’t find on their own, you know?”
Though tempting, diving headfirst into designing pages would be premature—I worked with the UX designer, Avery, on the foundations first.
We began this process by probing through existing apps on the market, conducting a holistic competitor analysis. From popular apps such as Instagram and Yelp, we determined a middle ground for Soli—not too social or performative, but not too sterile and impersonal, either. From other travel-planning or discovery-related apps such as Wanderlog, Hinge, and Headout, we took note of their strengths and weaknesses, considering elements that could be relevant to Soli.
We then shifted over to determining Soli’s information architecture (IA), taking prior research recommendations into account. We defined the features to include and constructed a taxonomy to clarify their relations to each other and relative importance. After content mapping, we visualized different user flows and diagrammed navigations between the pages. Through these conversations and schematics, we morphed amorphous ideas into tangible structures and components.
Figure 4. Initially constructed hierarchy, mapping out content.
CLOSE-UP FEATURE HIGHLIGHTS
3 Sections of Soli
After signing up or logging in, the user can:
Apply Filters when Searching
Users can apply 3 filters to the explore page when browsing for a post, tailoring their feed to their needs:
Caption Prompts in Create
Inspired by Hinge and its personal appeal over other dating apps, we decided to implement the feature of prompt selection while users craft their captions.
This allows users to be more specific about their experience, providing both personalized opinions and informative insight to others who stumble upon their guide.
Guide Preview —> Guide Details
We separated the details of a day from the broad overview. This bifurcation reduces information overload without sacrificing discoverability of crucial details—users get a quick & effortless experience browsing through guides upfront, then choose which to click into for further information.
Save Count
From initial user research, we found that the quantity of previous recommendations was important to users in determining validity of a post. So, we included button to save each post, along with the save count.Previously, we juggled ideas of a 5-star rating, a sliding scale, or likes and reposts, but we simplified down to just the option of “Save” to keep this feature simple and easily comprehensible.
Figure 5. Gallery of features determined & defined in the IA stage.
When it was time to lay out the features onto screens, I hit my first roadblock. Soli was the most complex project I had worked on to date, and I couldn’t afford to be precipitous in maximizing the prettiness of things. Figma offers infinite room for imagination, so I spiraled into nitpicking over style when I hadn't built out the structure yet.
I migrated my wireframing process over to Whimsical, a platform restricted simply to wireframing. At first, I was repelled by the lack of pixel-perfect manipulation and the annoying tendencies of shapes to snap-to-grid in the most arbitrary ways. But I soon realized the convenient and direct approach to wireframing it offered: pre-made components such as buttons, screens, and labels allowed me to piece together low-fidelity screens faster than ever before.
By embracing both the efficiency and awkwardness of Whimsical, I reaped the benefits of adapting and staying open-minded to new tools.
FINAL WIREFRAMES
Welcome & Sign-Up Screens
Explore Screens
Create Post Screens
Profile Screens
Figure 6. Annotated final wireframes after four rounds of iterations.
Despite having the dependable blueprint of IA, I found myself re-thinking many decisions while wireframing, often tweaking the initial IA. Iterating and experimenting with different variations was crucial in this phase.
I collaborated with the visual designer, Anabel, to establish a brand identity for Soli—this not only accounts for the beauty and visual coherence of our application, but also conveys its attitude and personality. We posited multiple brand options to clients; upon receiving feedback for each, we selected a final direction.
Figure 7. An excerpt from Designing For Emotion by Aarron Walter.
Style tile
LOGO, TYPOGRAPHY, COLOR PALETTE
We wanted to include a distinguishing motif in our logo that could be reused throughout the app, so the dot of the ‘i’ later became the location button. Our type & color choices are playful without sacrificing legibility or accessibility.
Figure 8. Style tile.
branding
SOLI VALUES, PERSONALITY, TONE
Giving Soli its voice and tone by means of language helped to inform the design work and the direction of our product. I was thrilled to discover that my love for writing and for design could speak to each other and exist symbiotically.
Figure 9. Brand words.
In these final stages of design, all the setup from wireframes, research, and branding was brought together. Though I had all the prior decisions laid out in front of me, this process still consumed around 4 of the 10 weeks of the project. What made this process (enjoyably) frenetic was specifically:
Deciding and creating tags for activity categories
We prioritized the tag feature since the very start: I architected the page so users would be able to quickly locate events based on categorical interest.
Though seemingly simple, the fine-tuned considerations such as overlaps between categories, accessibility of color contrast, and comprehension of tag names were doled out up until the very end. Final-round user testing (to the left) revealed that our original icons were unclear. Adhering to accessibility guidelines also contributed to these final changes.
I took every piece of information into consideration in order to achieve maximum clarity of this feature.
Creating and managing large component libraries & design systems
I realized that scope and difficulty scale exponentially. In building out every piece of a large project, slight component changes could cause a domino effect of adjustments to be made on the screens. Switching between different design files became dizzying at times.
Designing with a goal of hand-off to developers also meant that the organization of our files was crucial, as well as the sizing accuracy and general consistency of icons, fonts, margins, and colors.
Prototypes like these drop-downs mimicked the backs of embroidery pieces.
Making the "Create" form for posting a guide
The Create flow challenged me, but that also spoke to its importance (post creation is to the egg as browsing posts is to the chicken).
I thought I had filled out enough Google Forms in my life to understand how forms work. Still, when it came to prototyping my own, the importance of incorporating different text field states wasn’t immediately obvious, and the smoothest user journey did not instinctively find its way to me. The end result was the amalgamation of many incremental improvements, many of which were gleaned insights from user testing.
I also kept development constraints in mind, making sure to stay in communication with developers throughout and avoid over-complicating the screens. For example, we determined that once an activity was added, it could no longer be edited, since the ability to go back and revise would complicate the back-end development process.
Figure 10. Insight into specific behind-the-scenes challenges, processes, and thoughts.
APP OVERVIEW
Figures 11-14. Navigations through final high-fidelity screens.
01
Find guides that best suit your day.
Filter using location, categories, and duration to narrow the search down to what best suits your needs. Peruse through a gallery of guides and save them to your profile to access later.
02
Tap into a guide to view details.
View the events within a guide and their corresponding photos and details. Tap the location icon to access the place on Google Maps.
View the poster's profile
Is this user your type of person—would you enjoy doing what they do? Tap to see their previously posted guides and activities they’ve enjoyed; you may find yourself liking more than one.
03
Create & post guide of your ventures.
Fill out a flow of forms that mirrors the “Explore” discovery experience. Post preview information comes first, then add activity details one-by-one. Choose tags to summarize your guide at the end.
04
View your saved & posted guides.
Revisit guides you've saved for later, or take atrip down memory lane of your own days.
Delete a post from your profile.
Maybe you’re embarrassed, underwent an identity transformation, don’t care for those memories anymore, or… Anyway, you can delete that post.
my takeaways
01
We thrive on constraints.
The importance of constraints is often emphasized within projects to maximize focus and (paradoxically) foster creativity. This aphorism proved itself true over and over throughout the creation of Soli. Since the beginning of the internship, we recognized our common ambition along with our narrow timeline, dreaming big while knowing that we would have to be very intentional and specific with our end goal. We intended on just building out an MVP to ship, so striking a delicate balance was crucial. Feature prioritization and the explicit dismissal of other helpful yet non-essential elements allowed us to accomplish our project in time without sacrificing quality or purpose.
03
Cross-functional communication is essential.
Due to its inherent significance, empathy has always been a guiding value in my design work. In this project, my consideration for others was bidirectional: I kept users in mind throughout, but I also kept a keen eye on how I was building things out for developers.
In a team made up of varied roles, I learned to prioritize consistent and frequent communication, which included giving updates, engaging by asking questions, and clueing others into my internal processes. Overall, I found that staying on the same page minimized setbacks, accelerated problem-solving, and elevated team spirit.
02
Design is a profession of persuasion.
As a design agency, Viget created a pseudo-client setup for our project, an unconventional setting to me. Through the weekly meetings we had with our clients, I quickly realized that the correct attitude is a crucial part of being a designer. The importance of conveying my ideas and selling my particular solution to a problem can sometimes outweigh the craft itself. Despite the nature of oftentimes challenging feedback and opposing viewpoints between the agency and client, successful communication is always the key to moving forward productively.
thank you to my team <3
you were all amazing people to work with—brilliant, inventive, funny, and kind.
Figures 15-17. The wonderful people I was with for 10 weeks :)
