INTELLIS / wARSHAW GROUP
Jun.2018-Aug.2018
Role
UI/UX design
Prototyping & usability testing
VI design
Tools
Axure RP
Adobe Xd
Adobe Illustrator
Sketch
Team
Product (VP, PMs, Frond-end Eng)
Overview
I worked as a UI/UX Intern at the intellis/Warshaw Group in summer 2018. Mainly worked on the databased web redesign for ONEVoice/1199SEIU and the UI design on a mobile device application of the FOUNDATION platform for NYC DOE and SCA.
OneVoice web redesign
1199SEIU is the largest and fastest-growing healthcare union in the US with over 400,000 members throughout Massachusetts, New York, New Jersey, Washington, D.C. and Florida. 1199SEIU required to redesign their internal database website, OneVoice, a mobile canvassing system that allows route information and questionnaires to be distributed to field staff remotely.
PHASES
FIELD STUDY & INTERVIEWS
DESIGN GOALS
PROBLEM DEFINING
Field study & Interviews | Initial researching
Design goals
Problem defining | Ordinary design analysis
Information Architecture | Site map clean up
VI Design | New logo design
Wireframes
Mockup Screens | final landing pages
To kick-off the project, besides for the regular product team meetings, I scheduled a meeting with the Group Product Manager, Jay, the client-facing role. Since the 1199SEIU builds the long-term partnership with Intellis, I interviewed Jay about why they want to update the website and branding, and what their goals are in terms of building this internal website.
Motivations:
Optimizing the overall experience of the website for efficient data management and report
Better coordinate route changes among the staff in the field through instant data transfer
Newest, accurate data supports on Election Day
The website aims to better communicate with field workers in 1199SEIU for the memberships’ data collection and management, in enable to give them significant flexibility in selecting what messages they want delivered to their memberships.
Below are three examples of the main problems on the original website. I cooperated with PMs to define and list more existing disadvantages based on the feedback from the client.
Through this step, we decided to focus on the information architecture holistically for the redesign, which went through from the organization system, labeling systems, navigation systems and searching systems.
INFORMATION ARCHITECTURE
Through performing the SWOT analysis to the problems we defined at the researching step, we rebuilt the site structure and drew the site map to show the different layers of information and the user flow.
The image below is the example to show the structure of the “Search” branch under the Outreach.
VI
Below is the logo design and brand color guideline based on, but not limited to, OneVoice branding principles.
Through picked two capitals “O“ and “V“ from OneVoice combined with the concept of material design, which shows a reliable style in a rectangle contour with rounded lines and shadow.
Key elements: Hope, Modern, Responsible
After the information structure was confirmed, I created wireframes of the site for better presenting the layouts and interaction, which is visually answering the questions we defined at the researching stage.
WIREFRAMES
HI-FI SCREENS
Using everything we learned about the vision behind OneVoice, I worked on devoting final mock ups that match the new VI design better in “OneVoice“.
Here are mainly the final screens of the “Search“ branch. (original numbers are changed due to the NDA)
FOUNDATION platform update
The New York City Department of Education (NYC DOE) and School Construction Authority (SCA) use the FOUNDATION platform to conduct a large-scale survey and inspection across 1,700 public school buildings in NYC, in order to prioritize and allocate funding after evaluating the structural integrity comprehensively.
RAPID PROTOTYPES
One of my daily design tasks is conducting interactive prototypes and usability testing for mobile FOUNDATION platform, an inspection software that facilitated the collection of critical data with user-friendly menus and data security features.
Below are examples of designing process while adding the new feature into the application. Through the rapid prototyping and testing, it was clear and efficient to build each iteration. The final Hi-Fi prototypes helped me better to visually communicate the interaction with the developer team. (original numbers are changed due to the NDA)
iOS version
Microsoft version