Phase 1: UX improvements

As with joining any new company, I spent some time acclimating and reviewing design files and assets. I found that design file organization differed greatly between vendors and internal teams. The majority of the projects I worked on in this stage were single page redesigns, consultations, and project planning. During exploration of the the established design process, I found that there wasn’t a UI kit to reference for design specs. Early on when faced with undefined specs for designs, I referenced Spotify’s Polaris design system as a base.

Phase 2: Figma implementation & training

While Figma was already used as the main design tool for the Optimum project, it wasn’t yet adopted as a handoff/review tool for developers and marketing/merchandising. This phase can be broken up into two parts: marketing and business training, and establishing developer handoff.

I met with other departments twice a week via Microsoft Teams to conduct Figma training and walkthroughs. The majority of our business leaders didn’t have to learn the actual ins and outs of Figma- so I took it upon myself to make a Figma quick guide PDF that covered the basics of navigation. The quick guide was presented to business leaders and shared across the organization for easy reference. In addition to inter-department training, I guided my team through prototype design, and component and auto layout creation. I will touch more on this in Phase 3.

Phase 3: User testing & Optimum Mobile redesign

User testing implementation

Usertesting.com was the main research tool utilized by the design team and was frequently used as a quick way to AB test concepts. How we use usertesting.com is still expanding and its importance is becoming more apparent post redesign. While the overall company has been slow to recognize the impact usertesting.com can have on metrics, I was able to validate my designs to business leaders.

Page redesigns

For the beginning phases of the Optimum Mobile redesign, we worked on fleshing out the requirements and scope of individual pages, and later transitioned to a batch method- designing and reviewing multiple pages at once. I was responsible for the competitive research and full design of the gridwall page. I worked alongside my team’s conversion optimization manager to collect data points and research, and then began preliminary design work starting with the phone card design.

Next I moved on to working through a top rail filter option. A left rail filter was previously used on the site which worked fine, but I felt that a top rail filter looked more visually appealing and allowed for larger phone cards on desktop. I incorporated modern curved edge UI for the filter tabs as well as introduced pill selectors for OEM filtering at the top. Below is the first draft pass at both the desktop and mobile filter options.

After several rounds of presentations, we launched the gridwall page and compare phones feature which can be selected from the individual phone cards. My team’s work on the first batch of redesign pages positioned us as the go-to resource for all things design. We began working closely with the Marketing and Creative Services teams for updates and and site releases. During this phase, I started to notice places for improvement with cross-team communication and workflow. We addressed these issues by working closely with the WebOps Development team to understand their limitations, as well as defining scope with our vendors. For the benefit of our designers, we transitioned from PowerPoint to Figma as our main handoff and presentation tool within our department. Below are mockups of the mobile and desktop gridwall pages.

Phase 4: UI kit & templates

UI kit

As mentioned earlier, when I first started working for Altice there weren’t much easily accessible design patterns or UI guides to follow. Early on before the redesign project, we were given basic style guides to work with which helped with direction, but was a work in progress. Along with another lead designer from our vendor Projekt202, we ran accessibility checks and suggested improvements to the style guides which were later implemented into the official global UI kit. I worked closely with Basic (design vendor) to help improve the working style guide, which was later referenced across the organization for all site changes and updates.

Design templates

An issue that came up once the team and I completed several release updates revolved around page design consistency. Depending on workload, the responsibility of monthly updates fell on different designers. In addition to this, we faced frequent “fire drills” where updates/redesigns had to be made to modules asap. I started to notice quite a bit of problems in the files such as elements not matching spec, differences in library usage, and misuse of framing and grouping.

Addressing this issue involved two parts: establishing timeframes where designers could make appropriate changes to pages without error, and a method maintain consistency across the board. I worked with my director to establish a communication stream with other teams that worked more in our favor during the design process, and decided that adding page templates to the global UI kit would solve the problem of designer inconsistency.

Below you will find 3 examples of Optimum’s redesigned pages. There were 9 in total.

My goal with creating the templates was to allow designers of different skill levels to effectively update pages to the same standard. In order to do this, I had to organize all existing module and design variations and present them in a way that was digestible for varying designers. After compiling the variations I needed to work with , I reproduced the page elements as auto layout designs and set constraints. I made sure to take into account copy variations as well since our biggest obstacle with the Marketing team was limiting/setting rules around copy limits.

While I still think making all of the templates into components was the best idea, I had team members express to me their lack of experience with components and opted for standard auto layout frames, something that allows the designer using them to more easily see how it is built and tinker if needed.

Conclusion

As a UX designer with experience working for a variety of companies, I understand that it is rare to find a workplace that truly follows the UX process down to a tee. However, while navigating the design space in Optimum, I found that the Design team’s backing and process flow was heavily dependent on more established departments. With the ever evolving landscape of e-commerce, it makes sense that there may not be time or scope for a true UX process to take place. A notable challenge faced by myself and team was limitations with developer capabilities. Optimum uses several vendors for different user touchpoints, and each vendor was only able to do so much. In cases like this, more effective and UX-friendly designs get backlogged for possible future use. Despite the challenges presented during project completion, I am happy about the overall establishment of a dedicated UX team that did not truly exist on the e-commerce side until my team and I were formed.