The Details
Role
UX Designer, Researcher
Team
6 Designers
Timeline
November 2022 - January 2023
Tools
Figma, FigJam, Zoom
Overview
Stroll IN is a platform that aids families in creating connections. The site aims to foster a community that strives to reduce the sources of stress that comes with traveling with children or navigating unfamiliar territory.
The Challenge
The client currently has a platform that does not follow basic design principles and would like to improve the user interface. Additionally, she would like us to improve the user flows and functionality of the platform so that the site is intuitive for first time users.
The Solution
After conducting a competitive analysis and formulating user stories, our team developed and delivered an updated platform design with the key features mind:
Redesign the layout of the home page so users get a preview of the features offered by the platform
Retain brand identity by applying the brand colors in a manner that is accessible.
Create a style guide that provides a standard for typography, spacing, iconography and imagery.
Discovery & Research
Kick-Off Meeting
My team and I received a client brief to better understand the goals for the platform. From the brief, we learned that the client's audience are families with children 0-18 years old, early adaptors - expats, tourists, and immigrant families, who do not speak the local language and do not have a local network to learn about child-friendly activities. These were important factors to consider, as the client defined success as users regularly visiting and contributing to the information on the site and having family-friendly businesses confident in advertising their products/services on the site, knowing that it will reach the intended audience.
Client Questions
Following the client brief, my team and I still had a few questions. We received clarity on a few main points:
The client had colors and typography they wanted to stick with
The client wanted the site to maintain a playful appearance
The client wanted an overall revamp of information hierarchy so the site is intuitive and important information is readily accessible
Competitive Analysis
To better understand the market the client is in, I searched through countless family and child-oriented blogs to better understand the overall tone and information hierarchy. This allowed me to compare UX/UI design across multiple platforms to confidently determine areas of improvement.
I found that most family oriented sites:
Use a lot of bright color or a lot of soft toned color, both evoking a child-friendly spirit
Homepages contain previews of their most recent content to try and immediately hook the user
Heavily use imagery
User Stories
We worked with the client to ensure their needs were met and came to a consensus of 6 user stories that were critical to the platforms function:
Homepage - Landing page welcoming users
Interactive Locator - Map showcasing family-friendly hot spots
Playdate - Connects parents to set up secure playdates
Blog - Place for families to chat
About - Information regarding the site's mission
Advertise - Businesses can partner with the site
We also determined 2 additional features that would be deemed as "nice to have"
Chat - Quickly connect with the site owner
Services - Products/services endorsed by the site
Ideation
User Flows
My team and I identified 8 user flows that were critical to the platform's functionality. I worked on the home page and chat feature, and my team members were assigned one of the remaining user flows. Each of us were responsible for wire-framing and designing our designated user flows to ensure efficiency. We maintained communication
throughout the design process to ensure a cohesive design.
Wireframes
My team and I created medium fidelity wireframes to communicate our ideas to the client prior to proceeding with high fidelity mockups. We reorganized the layout of each of the pages to make them more intuitive and included new features that made the platform more engaging.
Design
Style Guide
The client had a color palette and typography set that they wanted to utilize. We created a style guide that incorporated the clients color and font preferences, as well as UI elements and spacing to ensure the team was consistent . The style guide was constantly referenced through the design process as we went through multiple iterations of the high-fidelity screens
UI Iterations
The client shared with us that they took inspiration from Yelp, Trip Advisor, and Barn I Stan. The sites provided inspiration for organizing information efficiently, maintaining a brand identity, and utilizing color, while still maintaining a credible appearance. My team split in to pairs and created 3 different iterations of the home page. The client determined they liked iteration 1 the most, but wanted the imagery elements of iteration 3 to be included as well. We took the client's feedback in to account and applied changes in our high fidelity screens.
High Fidelity
We went through three rounds of revisions to come to our final designs. I worked on the landing page and chat feature, and my team members each worked on a separate page. We collaborated closely to ensure the site was cohesive and maintained a standard for proper padding, font sizes, spacing, and colors throughout the platform.
Prototype
Once the client approved of the high fidelity screens, the team created a prototype to experience the design as a functional product. This allowed the client to see the platform come to life and understand how each of the user flows are intended to behave.
Hand Off & Reflection
Developer Hand Off
Once the final HiFis were approved, we began to annotate all of our work. We provided measurements between each of the elements on every screens so that the developer clearly understood how to properly space and align all items. We also annotated each feature on every screen so there were no unanswered questions on exactly how each of the user flows should function. The style guide was also shared with the client to maximize the developer hand-off process.
Reflection
This website served as a fun challenge as we were tasked to redesign a platform with established color and typography standards. Limiting our creative liberties forced us to consider how we could utilize the client's preferences in a manner that was most engaging, accessible, and loved by the client. It was a valuable experience in working with a client that's very involved in the design process. Additionally, the team was very collaborative and served as a great resource to both learn from and teach one another. Ultimately, this project earned me greater communicative and leadership skills.
