Overview

A mobile app that enhances the onboarding experience for remote workers, offering seamless integration with company culture, compliance, and connectivity.
The objective of this project is to create a engaging mobile app that delivers a top-notch onboarding experience for new remote workers. The app will focus on company culture, compliance, and connectivity, using research-backed nudges to keep users engaged and interactive features to create a memorable experience. Success will be measured by user satisfaction and seamless onboarding transitions. This app is all about making their onboarding experience as smooth as possible, so they can dive right into their new job with confidence! 🚀
My role
UX Researcher & UI/UX Designer - Group Project (MICA Graduate Program)
Team

4 Designers & Researchers

Methods
User Interviews, Qualitative research, Journey maps, Personas, User Stories, Storyboarding, Wireframing, Prototyping and Usability tests.
Design Toolkit
Pencil & Paper, Figma, Dovetail, Notion, Miro
Duration
July 2023 - August 2023
Problem
The onboarding process for remote employees is ineffective and lacks engagement, hindering their integration into new positions, teams, and organizations. Existing methods fail to provide the essential culture and connectivity required for remote workers, resulting in reduced interest and limited engagement.
Design Challenge
How might we address the challenges of ineffective and disengaging onboarding for
remote employees, leading to difficulties in integrating into new positions, teams,
and organizations?
Project plan & Design Process
What's the plan?
presentation Deck
Design Opportunities
How can I turn these pain points into design opportunities?
Mood board
Organic & Balanced

The mood boards prepped me to begin creating sketches with paper/pen and gave me a better visual of the overall application for sketches. Ceramics are made of clay and hardened by heat. Based on that idea, the mood board & color palette displays those themes.

Sketches
Improving new pages based on the users pain points

When creating my sketches, I considered the mood boards and users pain points. On the home page I decided to go with full page bleed image that would take up the screen and reveal the navigation. I later realized that this solution doesn’t allow users to easily navigate between options. To address this issue, I incorporated section that reveals see all classes to choose from when visitors reach the home screen.

Wireframes | lOW FIDELITY DESIGN
Visitors can sign up for classes, join events, shop, and explore learning resources to improve their visitor experience

Sketches prepped me to begin creating wireframes on Adobe XD and gave me a concept of the overall application.

High fidelity design
Grounded Clay: A website that assists visitors in discovering classes and exploring events and learning resources in Grounded Clay's Catalog.

Navigate Grounded Clay's Studio

  • The home page showcases classes to provide a central place for a visitor to go when starting their visitor journey.
  • Visitors may choose classes, browse the gallery shop, and search for events to share their experience with others.
  • Visitors may find a main navigations menu that showcases "classes, gallery, events, about and account" page that has studio information, which includes official, up-to-date information on hours, events, and accessibility.

Selecting Engaging Classes

  • Allowing the visitors to select an various of classes for better flexibility and accessibility.
  • Search & Find private classes, instructors, and studio information.
  • Clicking on a class will allow them to view the classes' description, time and location, as well as utilize the search to find exactly what they are looking for.

Support Multiple Events For Visitors To RSVP

  • During events, visitors enjoy connecting with one another in order to deepen their connections to the ceramics community at Grounded Clay.
  • RSVP features allows visitors to sign up for events by entering their information.

Explore The Gallery Shop

  • Allowing the visitors to select an variety of items in the shop and add to cart
  • Find products by categories
  • Selecting a product will allow visitors to view the products description, shipping and return information on the product page
TESTING + iMPROVEMENTS
2 Major Improvements in my design

Based on various feedback from 4 participants I continually iterated my design over the span of 2 weeks - with 2 major improvements:

Switching the Events Page

Additions to Classes Page

All of the components displayed during the design process have been blended to produce an engaging, effective, and inviting website.
The Final Screens

Final Product

PROTOTYPE
Reflection | MAIN TAKEAWAY
Lessons Learned

I enjoyed bringing the design to life, while learning how to design an website that is helpful to its users. I'm grateful to have been thought the entire UX process. This is what I've learned: Overall, I was able to learn more about design and broadened my skills in UX research, Visual and UI design.

Next steps
- Design the "Team/Instructors" individual pages that displays their bio, contact information and classes they teach at the studio
- Create a hover tab on team page to display team member information
- Start brainstorming ideas for a "learning platform" feature on the site
- Add and create the "Contact Us" "Plan your Visit" "Our Team" and "Careers" page
‍
What I would do differently
- Focus on creating a intuitive interaction and animations throughout my prototype.
- Add a plugin into Adobe XD that will allow me to create button animation such as "add to cart" and "fill out form" feature.
- Create a style guide/ system for this project that showcase the visual design aspects of the site.

Thank you for reading!

More case studies

National Gallery of Art App
UI/UX, Mobile, Research

Grounded Clay Website
UI/UX, Research