Feature | Return to the office


Background - new rules under Covid-19 😷

When I joined the project everyone is working from home, as the global pandemic turning to a positive direction, Comcast is expecting everyone going back to the campus. The Campus APP combines content and functions, it prepared the company for a new chapter of in-office working life.

Tasks & Goals

We were asked to build a feature for return to office empolyees, the goal is guide them through to tasks they need to complete when they get back considering many of them might not know anything about the APP(e.g. book a desk for daily work). It will combined with an outside-app experience “Wellness Screening”.





Ideation & Prototyping


Solution ⓵ - Guide screening (First time user)

The first solution that came to my mind is the guided screens, as we are all familiar with the experience first time using an APP. The guided screens uses mini videos teach users hand by hand how to use each function, at the end it will give users a checklist of the things they need to do while returning to the office.

However, there are two arguments about this solution: 1) the devs said the system might not be able to tell “Who is the first time user”, if that’s the case, this solution is not viable anymore; 2) my team brought up a good question:”If users need to be taught hand by hand does it mean that we are not designing those function well?”.



Solution ⓶ - Homepage CTA + Full Checklist

There are two things that RTO users are required to complete before going onsite: wellness screening & book a workspace desk. This solution emphasis on “throwing those 2 things in front of people’s face”, when users enter the home page they can see the two essential things they need to do without having to click into anything. I tried to insert dark theme on the homepage to make the checklist more prominent. At the sametime, users can still access the full checklist on the homepage.



Solution ⓷ - Bottom Sticky Bar + Overlay Checklist

This solution is based on the idea that “we want to checklist bei seen all the time”, we are inspired by Apple’s overlay interaction mode. With the bottom sticky bar users will always see the checklist and have it in their mind. It takes space at the bottom, so if a user does not want to see the checklist, it would be a design that is unnecessary.



Decision & Reasoning

Firstly, we were told that the backend would not be able to distinguish first-time user or none-first-time user when the development team got back to us, so we quickly weed out solution ①. Reasoning between solution ② and solution ③, we choose solution ② because:

1. We believe that the users would more likely to get involved with the checklist which has CTAs on the homepage, that is an assumption but the majority of the team agree with that. 2. We did an internal usability test, the bottom sticky bar confuses first time users. 3. Solution ② is more coherent with the current homepage design.




User Testing



Demographics

17 full time employees were emailed. 10 completed the assessment (53.3%) 40% were Male and 60% were Female 100% of the participants had office locations within the Philly Campus

Methodology

Made it clear that we’re testing the app, not them. Encouraged the user to think out loud: to comment on anything they see or feel. Asked the user to provide honest feedback. Instructed the user to complete tasks by themselves in an efficient manner. Suggested that they are free to ask questions, but we will probably defer it to after the test.





Key Insights


“I would like to know what am I expected to do and what should I expect coming back?” Masks, capacity, elevators, protocols, etc

“Its kind of overwhelming – I have a lot of questions on what Wellness Screening means. I’m not sure what to do. And am I going to have a different workspace everyday”

“Found the terms “Wellness Screening, Workspace, Rooms confusing – I would like to have more information about what they mean and what I’m supposed to do”








Recommendations

While users were able to complete each task, there were different paths followed, some confusion, and some questions. Confidence should be higher in terms of what to do and where to go. Mixed results and feedback points to needing a more clear, singular, prominent CTA to all things RTO within the RTO Vertical List. Users who used the vertical list expressed preference and confidence.







Our final design that got pushed to development ✨



Homepage checklist & Wellness Screening CTA



Checklist with different status




Figma Management | Deliverables


Design system building & Dev file

Atomic Elements --> Components --> Pages

By keeping this in mind and by being inspired by Modular Design, Brad Frost formulated the method of Atomic Design, in which everything begins with the smallest element of the interface: the atom.

I was convinced by this approach which finally allowed us to think about the part and the whole at the same time, have a global vision of a product or a brand, and also get closer to the way developers are working.


Auto layout all the time for responsiveness

I always keep in mind that make sure to use auto layout everywhere, it can be a big help in the futher design. e.g. when a card is flexiable it needs to expand when the text is too long.


Variants can be a big help!

One of the most fun things when building the design system is to build components with variants. In this way, for example if I want to use a component with 5 different status I do not have to drag five different components but simply switch instance.







Use a different file to deliver to devs with minimum screens & Always markup the sprint period

Usually when creating prototypes I do a lot of copy and paste screens, that way it makes the prototype file hard to look into while the dev team still use the same file as we use for making prototypes. I brought up in the team that we should make a separate file for the dev to look at the UI. As we keep maintaining the dev file, we develop methods to communicate with the dev team such as markup each sprint after design cleaning up, in that way, we have a clean cut for different versions, as soon as a sprint is cleaner up and move to the dev file we will make changes in the new sprint.





Prototype skill - Animation & Layers





App is structured by layers - users should know

In the campus APP, we structure it with layers, the bottom navigation bars are basic layers, and sub navigation contains 3 diffrent layers, anything beyond that are layers come to the top. For example the RTO checklist feature is on top of the homepage, so when a user click that CTA it should come being pushed on the side on the screen.

I was told to be particular about the animation when I made the prototype, now I have the habit that really focus on every detail when creating prototypes 👩🏻‍🎨 🎨.