Group 9449.png
Group 9448.jpg
design banner.png
Group 9449.png

w3 Mobile-intro


W3 MOBILE APP

SCROLL DOWN

w3 Mobile-intro


W3 MOBILE APP

What is w3 Mobile App?

 

w3Mobile is a mobile application designed to help IBM employees manage their work-related tasks while on the go. The app allows users to quickly and easily check upcoming meetings, join conference calls, search for colleagues' profiles to obtain their information, review their current payslips, reserve conference rooms, contact HR for questions or concerns, seek IT support, and much more. With this application, they can stay connected and productive no matter where they are.

IBM PROPRIETARY

(Left) iOS Home and People tab VS (Right) React Native system

 
 

Background

The w3 Mobile app was initially created as a news feed application for IBM's client representatives and sales executives. Its purpose was to allow them to stay updated on the CEO and leadership's blogs and other IBM news while traveling between the company and client sites.

Later, the team identified additional features that could enhance the app's user functionality. For instance, there was a strong demand for a people profile feature. This feature would enable users to review the profiles of their colleagues and directors from other business units before participating in client meetings or more extensive group sessions. They also needed to get information so they could contact each other. As a result, the team implemented this feature, along with others, to better support IBM workers in their day-to-day tasks.

Opportunity

When I joined the team during the pandemic, they had already completed the News application phase. At that time, most employees worked from home or remotely. As a result, they might not always be at their desks, and their work hours may become more flexible and longer. Therefore, having the w3 mobile app allowed them to perform light tasks while stepping out for coffee or other errands.

The team then focused on developing features that matched the functionality of the company's internal website while creating features that utilized native functionality that the internal website could not provide.

Objective

The primary objective of the w3 mobile app is to create a seamless, user-friendly cross-platform experience that enhances employee productivity.
To achieve this, we have set different goals for various stages of the development process.
These goals include:
1. Providing a personalized native mobile experience that can help employees increase their productivity and motivation.
2. Reducing friction for users through a delightful mobile experience.
3. Creating or connecting the tools our users need to be productive.
4. Bringing the user experience up to industry standard

 

Team

Group 9448.jpg

User Research


User Research

User Research


User Research

 w3 Mobile Home dashboard user interview

To increase employee engagement and improve work efficiency, we decided to redesign the Home tab of our app and create a personalized dashboard. After brainstorming with the team, I had some ideas about the dashboard's design, but some questions still needed to be figured out. Before diving into the design exploration, I conducted user interviews to understand user behavior and how they interacted with our app. I aimed to identify their perspectives, preferences, and expectations towards the app.

There are five areas I would like to learn from the interview.
1. Branding: What header is better for the Home tab - Home, w3 Home, w3 and why?

2. Search function on the Home tab:

What did our users expect? If we can’t provide all the tasks quickly due to the feasibility, do they still want to see the search bar? I offered a few ways to display the search bar. Which one do they prefer?

3. Placement of View all meetings option in the calendar section.

4. Section title:
Do we need to have a section title for each section?

5. Quick actions (links):

What kind of quick actions (links) would help their jobs? We had also chosen four items for our MVP. If they could replace any of them, which one(s) would they be? (multiple selection). Among all the given quick links, which one could not be replaced?

Key findings


Methodology:

User behavior


Detail Finding Highlights

  • The App’s branding


  • Expectation of the Search

 

Users’ comments

User’s preference


  • About Quick actions (links)

Question:
As an IBMer, what kind of quick links/actions would help your job?

 

No1: Vacation calendar
( 8 out of 12 users)

No 2: Pay statement, Password Reset, Your Learning status, Reserve a desk/room

Question:
We have chosen 4 items for our MVP. If you were to replace any of them, which one(s) would they be? (multiple selection)

 

Next Steps

  1. Determine the MVP features (search and quick action items) and discuss with the dev team for feasibility.

  2. Finalize the mobile design

  3. Work on dark mode screens

  4. Sketch iPad horizontal and vertical design

design banner.png

Design show case


Design Showcase

Design show case


Design Showcase

Create a design for the Home Dashboard

User story
As a user, I want a personalized launchpad so I can quickly get the information I need and continue my work day.

After conducting user research and a few rounds of discussion, we have finalized the quick links that can connect to other internal tools of the company, which include:

1. Reserve desks/ rooms
2. Password reset
3. Pay statement
4. AskHR
5. Time-off calendar
6. Recognition center

IBM PROPRIETARY: (iOS system)


Recognition and appreciation

User story
As a user, I want to be able to receive recognition and send appreciation so I can feel more motivated and connected.

1.Work Anniversary

When IBMers open their w3 Mobile app on their anniversary date, they see the celebration messages on the Home tab. Then, right after, balloons appear from the bottom of their mobile screen.

IBM PROPRIETARY: (iOS system)

2. Send appreciation

User flows:

1.Tap Recognition
2.Tap Send appreciation
3.Select a person
4.Selected
5.Select a way to appreciate
6.Select Blue Points
7.write message
8.Review messages and
Blue Points
9.Blue Points

IBM PROPRIETARY: (iOS system)


Share Digital Business Card MVP

User story
As a user, I want to share my contact information with non-IBMers so I don’t need to prepare a paper business card.

  1. scan QR code to share

IBM PROPRIETARY. (React Native: Carbon Design system)

2.Copy link

IBM PROPRIETARY. (React Native: Carbon Design system)

3. Share via another app

IBM PROPRIETARY. (React Native: Carbon Design system)


User Profile: Add photo

User story
As a user, I want to use my photo from my mobile phone so I can easily use the photo just taken from my mobile camera

IBM PROPRIETARY. (React Native: Carbon Design system)

IBM PROPRIETARY. (React Native: Carbon Design system)


Branding: Splash screen design exploration

IBM PROPRIETARY. (React Native: Carbon Design system)