Contact Michael

Use this form to contact Michael with questions, comments, or business opportunities. You can also reach Michael via LinkedIn, email, and Instagram using the social links at the bottom of this page.

         

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

Social App

Michael Walker designed a social app that helps 22,000+ users share and access business information on the go.

 

SocialAppMichaelWalkerDesign.png

Social App

I designed an app that helps 22,000+ users share and access business information on the go.

Overview

The Problem

How might we help users access content from an existing desktop-only platform on their mobile device?

Key Objectives

  • Create a social interface for sharing business information

  • Give 22,000 consultants access to information anytime, anywhere

  • Translate desktop-only interfaces to mobile-friendly interfaces

  • Design a company-wide communications campaign to promote app adoption

  • Introduce users to a new visual style and tone

My Role

  • Audited initial designs to optimize usability

  • Took the lead on all UI deliverables (mockups, prototypes, ecosystem, brand adherence) 

  • Presented work to stakeholder groups 

  • User testing via mockups 

  • Socialized designs with end users as part of the change management process

  • Worked with a taxonomist to ensure menu accuracy

The Team

Mike Moore Platform Manager

Sandra Garrett Senior Visual Designer

Richard Fischer Business Taxonomist

Research

  • Platform personae were developed and referenced throughout the duration of the project 

  • Existing internal social and collaboration tools were audited for consideration in the mobile application

  • Existing social and file sharing platforms were diagramed to evaluate user paradigms and expectations

  • Mid-fidelity mocks were used to test functionality with real end users  

  • A beta version of the app was used to collect user feedback


Exploration

Wireframes

Content-aware wireframes show how social features from several desktop sites could be joined in a unified mobile experience. Wireframes were designed by the team platform manager, Mike Moore. I did a usability audit of the wireframes and used them to design mid-fidelity mockups.

Image 1: An example post with comments and likes.

Image 1: An example post with comments and likes.

Image 2: File navigation and filtering for document repositories.

Image 2: File navigation and filtering for document repositories.

Image 3: An example user profile.

Image 3: An example user profile.


Refinement

Mid-fidelity Mockups

Mid-fidelity mockups were used to get general user feedback. We used these designs to launch a beta version of the app and conduct user testing.

Image 4: a mid-fidelity mockup of a post with comments and likes.

Image 4: a mid-fidelity mockup of a post with comments and likes.

Image 5: a mid-fidelity mockup of an administrative screen that allows a user to see followers and who they are following.

Image 5: a mid-fidelity mockup of an administrative screen that allows a user to see followers and who they are following.

Image 6: a mid-fidelity mockup of a user profile.

Image 6: a mid-fidelity mockup of a user profile.

Testing & Feedback

I collaborated with the team platform manager, Mike Moore, to evaluate and implement app improvements. The finalized mid-fidelity mock-ups were used to launch a beta version of the social app. Users were encouraged to download the app and provide feedback. I also conducted guerilla testing and informal interviews with users after meetings and at water cooler sessions.

Image 7: The platform manager and I discussed spacing around elements in order to make the app as user-friendly as possible. In this specific instance, we decided to increase space around touch targets to make them easier for users to select with their fingers.

Image 7: The platform manager and I discussed spacing around elements in order to make the app as user-friendly as possible. In this specific instance, we decided to increase space around touch targets to make them easier for users to select with their fingers.

Image 8: The platform manager and I discussed what information and actions should be available to users in each part of the app.

Image 8: The platform manager and I discussed what information and actions should be available to users in each part of the app.

Image 9: The platform manager and I considered even minor details, such as the color of elements. We wanted the app to align with company branding and be as easy to use as possible.

Image 9: The platform manager and I considered even minor details, such as the color of elements. We wanted the app to align with company branding and be as easy to use as possible.


Conclusion

Final Designs

Feedback was integrated into final designs that follow both Material Design and company brand standards. The end result is a social app that unifies disparate platforms to increase colleague productivity.

Image 10: Landing screen for the app.

Image 10: Landing screen for the app.

Image 11: Posts and comments.

Image 11: Posts and comments.

Image 12: Display of a company news article on the app.

Image 12: Display of a company news article on the app.

The final app helps users access a social stream, search engine, documents, and a news database while on the go. The design is flexible enough for new features to be added in future updates.

Image 13: A user starts a blank social post.

Image 13: A user starts a blank social post.

Image 14: A user writes a social post.

Image 14: A user writes a social post.

Image 15: A user shares a post another colleague has written.

Image 15: A user shares a post another colleague has written.

The app allows for tagging, adding rich media, and defining an audience when posting, as shown in images 13-15.

Image 16: A user starts searching for content.

Image 16: A user starts searching for content.

Image 17: A user searches for a person.

Image 17: A user searches for a person.

Image 18: A user profile.

Image 18: A user profile.

A search feature allows users to find colleagues quickly and read their profiles, as shown in images 16-18.

Project Assessment

Status: The beta version of the app was launched in 2016 received warmly by end users. The final version of the app was scheduled for release, but was tabled due to authentication issues.

Reflection: The most challenging part of the project was tailoring small details to optimize usability on a variety of mobile devices. If I could have done one thing differently, I would have interviewed users to better understand which features they most wanted to use on-the-go (we relied on analytics data to decide which features to build into the app.)

Next Steps: An upgrade to our security software is scheduled in the near future. After this happens, the final designs will be send to our technology team for development. I will review the design of the final app, complete observational user testing, and work with my team to make iterative improvements to the app over time.


 

More Case Studies

Search Engine Interface

I designed and tested the interface for a search engine that connects users with over 300,000 results.

See Case Study

Analytics Platform

I designed purpose-driven UI that makes a complex tool simple to use on both desktop and mobile.

See Case Study

Housing Database Digital Product

I designed a digital product that helps New York City residents evaluate the quality of property listings.

See Case Study