Solution

Design a flow for customers to request an appointment with a service provider and a community page for the provider to showcase their content.

My Role

I was brought on to design a web platform with 3 other UX/UI designers  to collaborate on expanding the service provider’s and customer’s features. We worked in teams of 2 on parallel projects.
Over the course of the 4 week project, I was responsible for designing the community page by doing:
  • Research, competitive analysis, and user flow.
  • End to end design process from sketches, wire framing, prototyping, testing and hi-fidelities.
  • Presenting to the CEO and PM about updates and changes.
  • Designing a solution to enable service providers to edit and share their information to customers.
  • Syncing with team members

Problem

Vellbeing wants customers to be able to find and select the right well-being service provider by booking an appointment online and getting an in-depth view on their provider’s services and qualifications.

Introduction

Vellbeing is an early stage B2C (Business To Customer) startup that wants to build rich profile pages for service providers to manage their clients for any well-being services.

While this project is focusing on building a rich profiles for service providers and customers. Vellbeing wants to make more improvements on expanding into developing more features and tools for service providers and customers.

Tools Used

Figma, Miro, Google Doc

Timeline

Nov 16th, 2022- Dec 16th, 2022 (4 week project)

Competitive Research

We conducted a competitive analysis on different community and media platforms such as Youtube, Facebook, Twitter, Linkedin, and Skillshare to analyze and compare how these platforms promote their social links and feed. We got to see a bunch of similarities and differences between the screens and aligned with Vellbeing’s goals.

Facebook and Linkedin

The providers POV of editing and inserting social links to add on profile.
Facebook’s community page (customer POV). Including
social links and photos.
Provider could edit their profile by clicking on the pencil icon and add more information that is needed.
User’s POV to see their community feed by looking at their follower’s posts. User could also start their own post.
This is how Linkedin promotes multiple posts on your profile to catch user’s attention by viewing their posts.
The providers POV entering their community page for the first time to edit or create post.

Userflow

We began the process by creating a user flow that we referenced from our competitive analysis to address the company’s goals for the community page.

After presenting our deliverables we refined our sketches by combining the social links and the post section. Instead of the dropdown we decided to put a section on the left side to organize the categories of different media and renamed this section as “Community”.

Ideating and Sketches

After our competitive analysis and user flow, we started to form our ideas by drawing out multiple sketches. Then we presented our ideas to the CEO and discussed how we could improve our solution by modifying our ideas.

Low-Fidelity

Next, we began to create our low-fidelity screens. After designing the main pages we decided to create what each function would do next. We proposed different ideas when the user would click “add” and “edit” for their social links at the apps section.
Service provider’s first time on community page
Service provider’s community page after posting and editing social links
Customers POV of service providers community page
After much discussion with the CEO we weren’t sure what social apps Vellfare would support, so we did more market research and came to the conclusion to make a pop-up to access an integrated apps page, which would then take you to a 3rd party sign in page to help users link their social’s.
Before
After
As we were creating the low-fidelity, the CEO wanted to add more features to have other users take control of the service providers page by liking, commenting, and sharing posts. We also added different options when the service provider and customer click on the 3 dot drop menu.
After going through each of the flows for each pop up. The CEO wanted to change some of the functions of the 3 dot pop ups for users to have better experience for each post. The app page will pop-up after clicking the pencil icon.
Customer’s POV when clicking on the 3 dot drop down button
User’s who have access and permission to Michael Anderson’s profile could like, comment, and share on his profile
Michael Anderson’s POV to edit his posts

Hi-Fidelity

Due to the time constraints, we were only able to conduct one round of usability testing for the low fidelity prototype. We received feedback based on UI designs and to see if the process was easy to follow. Then we presented our feedback with the CEO and fixed minor issues. We got together as a team to discuss the UI guidelines better to keep our pages consistent for the hi-fidelity with spacings, button sizes, alignment, and font sizes. Then we got combine our pages together.
Service provider first login to community page.
Service provider’s community page after inserting apps and posts.
Customer POV

Combined Pages with other team

Prototype

Outcome

I had an amazing experience working with the CEO of Vellbeing and my UX teammates for this internship. We did an excellent job working as a team but we also encountered many obstacles along the way but those obstacles made my experience invaluable.

Ideating process

  • Making sure to have clear communication with the CEO about the minimum viable product. Idea's can change quickly and adding more features can be overwhelming for the product.
  • Communicating to the CEO and project manager about why we came up with our idea's. Having a deep conversation about the "what if" and "why not" about certain features.

Group Collaboration

  • Communication is very important. It helped us learn and grow as a group to reach our goals. We communicated through Linkedin, Slack, and Zoom as group with the CEO, Project manager, and engineers. We had weekly zoom meetings to discuss our ideas and the next steps to improving on the product.
  • With the time management we had. We needed to make sure we kept each other accountable and to update each other our progress.
  • Making sure the design system is consistent through all pages with the spacing, buttons, colors, and fonts. Forming a design guide line in the beginning would have been helpful for us.
  • We had a Google Doc and Miro to help guide us through our scheduling, links to our work, due dates, and notes.

Next Steps

The next steps for the future team would be to continue with research, usability testing, touching up on UI components, and other features.
Monica Kwong 2022
MoniicaKwongg@gmail.comLinkedinCredits