IBM Verse Mobile
IBM Verse Mobile allowed users to focus on top priorities, find and share content and take control of action items all in one app. IBM Verse was not just about email. It was about integrating mail, calendar, contact and to dos in one place. I led the mobile UX team to define, strategize, and design the iOS mobile experience.
Company: IBM
My Role: Mobile UX Lead, UX Designer for Mail
Team: 4 UX Designers and 1 Researcher
Overview
IBM Verse Mobile was a complete new product that needed to be created from scratch. Instead of taking a mobile first approach, the Web version of IBM Verse was already launched. We needed to understand first what the motivations and pain points around our users were when using the stock iOS Mail, Calendar, Contacts and To Do mobile apps and reimagine a way to string these apps together to deliver a seamless experience. While iOS optimizes for single app experience, the challenge of this mobile project was to fit the experience of each app into one framework and consistent navigation scheme.
Discover & Envision
To set the vision and framework of IBM Verse Mobile, our mobile team's first task was to work with an extended team of UX designers, developers and project managers to create a mobile demo story to demonstrate our capabilities.
The mobile demo story was created as a playback to:
understand the users
explore the concepts
prototype a solution
evaluate with users and stakeholders.
Understanding the Users
Personas were developed based on user research to define the following business goals (hills) for our mobile product. Here were the goals from the perspective of Nancy who is an account manager:
While visiting a client, Nancy Smith uses IBM Verse to quickly resolve a sudden crisis more effectively than if she was only using the stock iOS email app alone
Nancy can seamlessly communicate and collaborate using mail, social, or chat while on her mobile phone
Nancy can find out what she needs to focus on at any time she picks up the phone
Using Mail Verse, Nancy is connected and productive whether or not she is at her desk, at home, or at a client site
Define User Stories
Detailed user stories were defined for mail, calendar, people and actions to map to our business goals of the product. Here are some high level areas we focused on when writing the user stories:
See mail from people important to you
Set people you interact with often as Important
Mark mail as Needs Action
Manage items that need follow up
Track who owes you a response and when
Work with your calendar seamlessly
Interact with all of your contacts
Below are some example of the user stories that mapped to the business goals (hills) defined above:
Hill 1
I could see the bottom tab bar to navigate between my Mail, Calendar, Contacts, and Actions
I see notification badges on all tabs
I see a notification badge on the app icon when there are any new items in Mail, Calendar, and Actions due
Hill 3
I can flag or mark as "needs action" or "waiting for" so that I can recall and reference it later in the Actions section
I can go to the Actions section to quickly see messages I've marked as "needs action" or "waiting for"
A can access the Notification Center widget from anywhere and quickly view pending calendar events, communications from favorite users and items needing my attention
Hill 2
I should receive push notification at a set time before an important calendar event
I can see the person's availability status on their profile card
I can initiate a chat with another person directly from their profile card and return to IBM Verse
Hill 4
I can mark a person as a favorite from their profile card so I can easily find messages from them later
I can see notifications on the avatars of my favorite contacts, so I can quickly recognize a message that came from them
I can see a list of all messages in the Inbox by tapping the Inbox tab
I can navigate to day, week, month, and agenda views of the calendar
Explore through sketches
Based on the user stories, we brainstormed ideas and explored design concepts through sketches in the different areas of the Mail, Calendar, Contacts and Actions app.
Storyboard the flow
Once we nailed down on a high-level direction, a detailed storyboard was created to walk through the flow and to visualize the holistic experience. We started to string together the different areas of Mail, Calendar, Contacts and Actions into one flow, map out the structure and look for areas of improvement before creating a prototype.
Prototype Demo
Wireframes were converted into hi-fidelity mockups and stringed into a prototype to review and validate with users and stakeholders.
Ideation & Design
After designing our "IBM Verse Demo Story" and getting validation from our users and stakeholders of our high-level vision, we went into working on the detailed design of our product. I led a team of 4 UX Designers. We each took a specific component and flushed out the entire flow of the product. We had bi-weekly team meetings to check on progress and review each other's work.
IA and Navigation
The overall architecture was defined by our team to organize content and navigational flows.
Wireframes
My focus was on the mail component of IBM verse. I created lo-fidelity wireframes for further exploration of the designs and continued validations with our users.
Mail Wireframes
UI Design
Color Palette
The final color palette for IBM Verse Mobile was derived from the expansive global IBM Design palette. We explored through many iterations of the palette to arrive at the following colors for our product.
Log In Ideation
Here are "Log In" ideations for web, tablet and phone and showing how it evolved to the final product for IBM Verse Mobile. Initial concepts for "Log In" screens were drawn across the different platforms that were consistent with the Verse marketing campaign.
Final Log In
Final Verse "Splash" & "Log In" screens after several design iterations and testing on physical device.
Design Specifications
Provided visual specifications to developers to implement into final product.
Final Design
Final color, styles, components holistically applied across mail, calendar and contacts for the first release of IBM Verse Mobile.
Log In
Calendar
People
Actions
Messages
Lessons Learned
Building a product from start to finish is a monumental task. It took our team over a year to plan out the mobile "Mail Next Demo Story", collect the feedback we needed, and get stakeholder and user buy-in. At the end of the day, all the planning was a stepping stone to make the transition into building the final product a lot smoother. We started with a vision and we ended with a product that we could all be proud of.