Social Native 📱
CHALLENGE
Social Native is a social media app allowing colleagues to connect and communicate with one another on their company-provided devices. Create a clickable prototype for Social Native’s onboarding sign-up form using the provided logo and suggested elements.
SKILLS
UX/UI Design, User Flows, Wireflows, Clickable Prototypes, Figma
Research & Prep 📚
Looking through Social Native's branding and suggested onboarding steps, I had several key takeaways:
1. The process has to be edited and streamlined as much as possible.
2. Keep the copy colloquial.
3. The design should balance the friendliness of social media with a professional tone.
User Flow ✍️
After narrowing down which steps in the onboarding process were absolutely necessary, I set out to create a basic User Flow for an imaginary worker signing up for Social Native, John Smith.
I knew ahead of time that a progress bar would help reassure John that the process was short and encourage him to finish the form.
User flow chart depicting John Smith's sign-up journey. I used orange to delineate which pages I would create (and John would see).
High-fidelity wireframes for the 5 main screens I planned in the user flow.
I ended up combining the name-entering step and interests selection onto one page to streamline the process.
Finalized Wireflow 💎
After I was happy with the design of the 5 main screens, I created additional wireframes depicting how the form would look in-between actions (during typing and pre/post selection). This way, the entire sign-up process could be visualized in a clickable prototype.
I then created a dark mode version of the prototype as well. Ideally, Social Native would immediately adjust to the user's phone settings.
Reflection🪞
This project encapsulated the importance of the onboarding experience in UX Design. This sign-up form would be the very first interaction a user would have with Social Native. If the experience was difficult or overwhelming, it is highly likely they would never use the app again.
After editing things like position/role, phone number, gender, etc, out of the sign-up form, it was easy to get to the root of what was necessary as well as what Social Native was all about: connecting with colleagues.
