for Outerly
Outerly, an outdoor recreation company with the mission to get more people outside and connecting.
Branding
Design system & app UI
Worked alongside the product manager and Outerly's founder
In general, I follow a typical design thinking process with the end goal of creating beautiful and functional designs that perfectly align with user needs and business goals.
I learn about the problem, the users, and the business goals. Once I’ve defined the problem statement and gathered all the data I can from stakeholders and the project brief, I start mapping out a strategy.
I start working on the building blocks of the concept. This could be playing around with color, type, sketching visuals, or experimenting with flows and wireframes. Getting early feedback is essential at this phase.
After gathering feedback from the initial proof of concept, design decisions are applied and prototypes or models are created. This is where the magic happens! Especially in visual design.
Once the design is complete it’s time to reflect on performance and optimize for the future. Learning is the best part of design. It’s where great ideas are tested and improved.
Context
Being outside and our mental and physical health are intrinsically connected. However, many users, especially in more urban areas, find it challenging to get outside regularly.
Only ~18% of the US population (less than 1 in 5 people!) participates in outdoor activities at least once per week, and only ~55% participates at least once per year.
Why? Often a large barrier for entry can be a lack of knowledge of where to go and a fear of doing it all alone.
Outerly aims to bridge the gap and create a platform for new users to begin their journey in the outdoors and connect with others.
An outdoor recreation app that focuses on connecting people, not mapping and navigation. Clean and simple design that lets people find groups and events and ultimately other people who want to connect in the great outdoors.
Brand story
I like to start the design process with defining the design personality traits. These act as a guiding compass along with my design philosophy during every phase of the design process directing and informing design decisions.
Ultimately the personality traits chosen were felt to align with Outerly’s goals.
We are friendly, positive and welcoming. We know that getting started can be the hardest part.
We are genuine, energetic and relatable. We strive to guide and support users through every aspect of their journey and encourage camaraderie and shared experiences.
We aim to be an approachable authority, offering reliable guidance and support to make outdoor activities accessible to all.
We are empathetic, supportive, and collaborative. We prioritize the needs and aspirations of our vibrant community. We know that our users want to feel a sense of belonging and camaraderie.
We strive to create experiences that reflect the collective spirit of outdoor enthusiasts. One that facilitates outdoor exploration as well as nurtures a shared identity among users, fostering lasting connections.
We are light-hearted and curious. We aim to create an environment that sparks a sense of playful wonder and inquisitiveness within users.
We aim to make the experience feel like an enchanting quest.
We are creative, full of energy, and we don’t take ourselves too seriously.
Personality comes across best in the small details.
I continually ask what the emotional state of the user is at this point in their journey and how can I apply the personality traits. Can I use them to enhance success or help encourage the user during points of frustration?
Brand story
In the beginning stages I was given an image that showed the inspiration for the brand styling, which included a mock-up of the logo wordmark.
From there I focused on what the logo icon would be. Different ideas were explored, sketched and presented for feedback. After a few rounds, the logo of two trees ultimately won out.
It represented something that we can all see in nature and brought together to the center with the twin trees. One larger, guiding the smaller one standing together.
Brand story
Color has the ability to shape emotion and thus making it one of the key aspects of a brand. Outerly’s color palette focuses on the primary colors of steel grey and a warm orange, with accent colors reflecting nature and excitement.
I chose the primary action color, orange, to infuse a sense of warm invitation. So often outdoor company color palettes are so focused on green and other cool tones. I wanted the visual atmosphere of Outerly to feel very different and reflect the company vision.
Brand story
Typography can either distract and complicate or enhance accessibility and personality.
Two typefaces were chosen for Outerly. Caprasimo and Open Sans.
Capasimo was chosen as the logo Wordmark typeface, and with its bold lines and rounded shapes it made an ideal headline typeface. It reflected the brands warm and inviting personality with just enough flair to make it stand out. Thick and rounded serif.
Open Sans was chosen as the primary body typeface. Its simplicity allows it to adapt well to our designs without overpowering the overall visual identity. It has a high x-height and very clear readability which makes it ideal across multiple touch points and sizes.
Product design
The initial main screens were made by the project manager who had done some initial user testing and interviews. These were a jumping off point for me, and what started at 11 screens, turned into 50+ for the MVP.
At this point, there was a solid understanding of what we needed and what the main action points were. My role from here would be to build out the rest of the screens and apply our brand to it.
These consisted of the sign in/log in page, and the 5 main sections of the app:
Home screen
Profile
Chat
Events
Groups
Product design
The initial screens had many gaps in the flow of information and navigation. Before diving into applying the brand fundamentals to a new UI, I started laying out the flow of information for each screen.
I used simple cards listing the content and the action points for each screen. This enabled me to see connection points, ensure the experience felt intuitive, and find any gaps. My aim was to make the user's journey through the product as intuitive and efficient as possible.
Since I had the initial screens and my flow of information I found I didn’t need to make wireframes.
Product design
After getting the architecture and flow down I started building out the components that I would need.
I had a solid list that I knew I needed based on the initial screens I was given as well as common components that I’ve found I’ve needed in applications. Building the base of components in the design system first, before getting into the full designs, speeds up the process later.
I focused on bringing our brand to life utilizing our orange to bring an inviting warmth to the interface. I chose to use more rounded elements instead of hard edges to give the UI a softer feel.
Later as I started building out the screens, there were only a few missing components I needed that I just made while making the screens.
Product design
Now it was time to apply everything to the screens! I kept the designs pretty simple and tried to follow familiar patterns in the interface. I chose to keep the interface pretty monotone, except for the action buttons and the occasional light orange background. Our headline font, color choice and the small details like corner radius were the small personality choices. Working top down I started with the onboarding process, home page, and then each of the navigation sections (groups, events, profile, chat) of the app.
I chose to keep the home screen very simple. As a new user it would let you search for events and groups and then show suggested groups and events, which would be based on your profile. Each card would show the basic overview of the item, and the ability to add it to your own groups or events, or click through to learn more about the item. We initially had a section that would also suggest friends, but we ended up removing that from the initial MVP.
I found the group and event sections were very similar in structure and design, with only a few content differences. Most of the patterns in the design were the same. This helped make the design more cohesive as well.
The messaging part of the app we kept very simple with only a few screens. Users would be able to see their list of message threads, be able to search their messages, and create a new message.
Product design
The sign-up process ended up being much more in depth than originally planned as this was also how the user would make their individual profile that other users would see in the app. It had basic info like your name and general location, photo or avatar, a short bio, and a list of interests. We also had to make sure people could have the option to hide most of their information if they wanted. Feeling safe and comfortable was really important.
Results
As a small startup team I worked closely with our product manager and founder who would be doing the development. I had several demo calls with them going over the designs and functionality. Since a no-code option was being used to develop the app, extensive documentation wasn’t needed.
Final designs were also given with the design system Figma file.
As the MVP is in its final stages of development and only in beta testing, continual user feedback for future iterations is being collected. A “Break the app” session is scheduled where users will be testing the app trying to break it.
Results
While my main focus was on the visual side of the design, I quickly realized having a solid architecture from the very beginning would make the process down the line much easier for me as well as my team.
Initial ideas for the MVP included more features than were sustainable. While the ideas were sound, some features needed to be put in a backlog for future use.
We focused on what features brought the most value to building the community we were striving for.
Results
While the app is being developed and in iterations of feedback, an illustration design system and a new website are in production.
I’ve had a lot of fun defining the style and personality of Outerly’s illustrations. We are really trying to bring out the playful exploration and community with these.
These will be used more on the website and marketing side vs within the product.
c 2024 thehamerdesign.com All Rights Reserved