DESIGNING FOR THE FUTURE
Spotlight Mobile Redesign
Product Design
THE OVERVIEW
Inheriting the
Mobile Experience
Spotlight is a tech-enabled service where people get career transition help through career coaching, resume writing and job organization. Initially built as a mirror app to web, Spotlight Mobile was barely a shell of the web experience. While the web experience continued to grow, the mobile app came to a halt. With no clear owner of the mobile experience, I was tasked with reviving the experience and bringing the focus back to user experience.
Team
Jeff Lim
Abhi S. (PM)
Aniket K. (iOS Dev)
Vijay S. (Android Dev)
Duration
Ongoing
Tools
Sketch / Figma
InVision
Zeplin
The Old Spotlight Mobile
THE BEGINNING
Choosing a Direction
With little to no documentation from the PM and the contractor originally in charge of mobile app, I had to start at the beginning. I helped facilitate discussions around our vision and mission for the mobile app. I wanted to discuss whether or not we wanted to continue on the path of building a parity app or transition to a companion app.
Parity or Companion?
I felt like the current app was trying to accomplish too many things and that we should choose a service to focus on and really take advantage of the mobile specific capabilities. Based on global impact and complex requirements from our global clients we agreed that our vision would continue to be for participants to transition seamlessly on mobile (Parity).
THE CHALLENGE
Transitioning Seamlessly on the Go
Our vision was to bring the web experience onto mobile while taking advantage of mobile capabilities. We had a a lot of features that needed to be brought into our mobile app, but we needed to start with improving what existed on our current app. From the start I was well aware of the various gaps in the mobile experience, but now that we had a direction it was time to formally identify and prioritize what to work on first.
GOAL: To identify a list of missing features and create designs to bring about parity between the web and mobile experience.
THE DISCOVERY
Basic Analysis of Spotlight Mobile
It was clear based on a simple mapping of our experience that we had a lot of problems to solve for. There were giant gaps in the user experience and a clear lack of organization in our mobile app.
Overview of Problems:
-
No real dashboard/home screen
-
Navigation (stuffed in menu icon)
-
Heavily skewed towards job searching
-
Lack of onboarding capabilities
Mapping of User Flow
THE REDESIGN
Reintroducing Spotlight Mobile
Identified features on Web
Based on our web dashboard, I identified a few services and features that would make up the participant dashboard experience. Several features like "Reminders", "Jobs" and "Targets" already existed prominently on our mobile app, while others like "Coach Scheduling", "Messaging" and "Content" needed to be added or improved.
Flexible Dashboard
The tricky part of designing this dashboard wasn't fitting all the current web features, but taking into account the various participant packages. RiseSmart's package customization (per client) presents a unique problem where not all features are available to all participants. So I had to design a dashboard that was flexible enough where select features could be taken out without impacting the dashboard. I took a widget like approach and chose a feature common across all packages to act as a flexible box.
The target box acts as a flexible widget that can take up the entire width or just half the screen.
Balancing the App
The two big addition were our (1) coaching service and our (2) content library.
1. I brought in the ability to schedule and message the coaches. During the time the dashboard was built, our coach messaging functioned more as an email rather than a chatting service. I built it into a widget box to reflect that experience. We've recently changed it to chatting after the introduction of the chat bot.
2. A lot of the coaching calls are based on topics heavily reliant on our content library which includes articles, videos and podcast. It only made sense to bring this onto the dashboard for discoverability and exploration.
New Navigation
I built the navigation to reflect our three core services: Coaching, Resume and Job Concierge. There was an ask by our European counterparts to emphasize "Events" as it was an integral part of their experience. However, in the US, "Events" have yet to reach that level of importance so I took a similar approach as our the dashboard. Based on the country, the navigation will change.
Coach Scheduling
While working on the redesign, we also continued to work on additional features to enhance the Spotlight experience. As seen on a couple of the screens above, scheduling wasn't introduced until later on. I was in charge of building both the web and mobile experience for this feature. Take a mobile first approach, I built a calendar picker with a dynamically changing time slot section. This made it easier to implement on the web experience as shown about. I would eventually add an additional screen for picking topics.
THE CLOSE UP
Just Some Basic Screens
NEXT STEPS
Just Getting Started
When I first took over Spotlight Mobile, I had to basically start from scratch. I started by facilitating our discussion around mobile's vision and identified ways of making immediate improvements. Currently, we have increased avg. monthly users by 48%, implemented Google Analytics (now Firebase), and expanded into +5 different countries. It's a good start, but I think there's still a lot more work to do.
Specific Steps:
-
Utilize analytics to identify features that require improvement
-
Setting up a proper design system (considering Material Design)
-
Creating mobile based innovative features.
OTHER CASE STUDIES
Explore some more
