Freelance Project - Web App Design, Product Design, Illustration Design
Project Overview
Summary
BeFriends (pretend name for confidentiality) is striving to make virtual conversations more meaningful and engaging through curated virtual experiences. This product would be catered towards community managers allowing them to take large intentional communities and through authentic interactions, become more connected. Community members would enter into a virtual call where through prompts they would be able to discuss topics, play games and go through experiences put together by the community manager or an experience designer.
My Role
I was brought on as a Product Designer, alongside a Product Manager to improve the overall user experience of the product. There was a lack of consistency in design across the platform and many of the pages were not intuitive to use. This was overall quite a challenging project but I alongside the client team, were really happy with the end result.
Design Process
Template Section
Within this product, users have the ability to start from scratch or use some of the pre-existing templates already created by conversation designers in the past. Our job was to build out this page. First, alongside the product manager, we created low-fidelity layouts of what the page should look like and what features it should have. After going back and forth iterating with the BF (BeFriends) team, I moved on to high-fidelity wireframes.
The goal was to create an inviting layout, putting the hosts of the experience front & center by showing their introduction video as a thumbnail. This would also in the future encourage hosts to be mindful about how their trailers look but also for attendees to start recognizing designers whose expeirences they tend to enjoy.
After browsing through the templates, users would be able to click on one of the templates to get more information about the experience. Initially, upon clicking users were directly thrown into the experience editor but we felt there needs to be a preview section so users can better understand what the experience is about. This design system was useful to build out because it could be easily re-used when someone wants more information about an experience they have been invited to.
Intra Experience
When we started the project, the founders hosted a BF experience for us to understand the product so this page was my first impression. Throughout the experience, these cards would show up with certain prompts to guide the conversation in a certain direction. The concept made sense, but the layout of the cards and certain elements of it would really confuse me and some of the other attendees.
Here are some of the things I noticed that needed refinement:
- With longer prompts, the background would get blurred and a new card would pop up. This covered up the original timer and also the attendees in the chat. This second prompt would also have to be closed with an ‘x’ button rather than a more positive CTA.
- At times the text in the bigger prompts would get too long and the attendees would have to scroll within the card. The user wouldn’t even know they have to scroll unless the text is cut from the bottom
- The title of the experience itself only shows in the beginning and the end of the whole experience
Improvements:
- The attendees are neither blurred out of covered so even when reviewing the prompt you can see everyone
- There will always only be one prompt card in the call with the information, timer, and CTA all in one place
- The global navigation for the experience would show up on top and the intra-experience-related features would be at the bottom separating the two
- I wanted the layout and the cards to have the fluidity to accommodate any number of attendees and this new layout successfully did that. With a consistent font style and layout, the prompt card would stretch horizontally based on how much text is in the card. I also designed the layouts for all the potential outputs to make it easier for the team to integrate.
When it came to the intra experience there were only slight adjustments that needed to be made to make the experience more intuitive. For example, we noticed a lot of testers would get confused when it was their turn to speak and a bit overwhelmed with the layout of the prompt.
The layout felt a bit more straightforward with a consistent color to alert the user it was their turn but also a layout that made the information easy to digest, and once understood a simple CTA to move on.
Experience Designer Tool
After the PM and I had developed a deep understanding of what BF was trying to accomplish and ‘why’ it was time to tackle the designer. This was the most challenging part of the project considering we were starting from scratch and probably the most important feature. Having an effective and intuitive design tool was crucial so conversation designers are able to bring their vision to life with ease. Throughout the design process, I would spend time studying existing builder tools like Webflow, Typeform, etc. to make sure the user experience is intuitive but also ensure that the builder looks original and professional. I wanted to design a layout that allowed for lots of flexibility but also kept scalability in mind. Since the beginning of this project, I put together design systems that I followed, and those same systems were also applied here. I was really proud of what I was able to build and how much of an improvement there was from the LoFi designs the PM put together.
Conclusion
This entire project spanned a total of 3 months and it was a transformative learning experience for me as a designer. This was one of the most challenging projects I worked on but am so proud of what I was able to accomplish. Working so closely alongside the BF founders allowed us really understand their mission, and make sure that what we were building was aligned with that.