Stroll

Design Processes

Design processes are not one-size-fits-all. Each team has unique needs that should be understood and addressed at every phase, accounting for factors such as team size, project phase and deliverable requirements. What remains paramount is to consider a wide range of ideas, gather extensive feedback, and act swiftly.



I led the design efforts as the sole designer for the majority of my time at Stroll, working with designers that provided assistance in ideation and design admin.

To expand more, I established the design processes and systems for Stroll. I collaborated closely with my co-founder to ideate new product features, and then take on the role of executing the design process from start to finish. This includes conceptualising layouts, designing screens, and ensuring smooth coordination with the development team. Being involved in every aspect of the design journey allows me to maintain a cohesive vision and ensure the highest quality of the final product.

The Design Process

"Think broadly and execute specifically."

My design process involves establishing different levels of focus for each step, to enable the team and myself to think broadly and execute specifically.

Ideation to Solution

For new product pushes and flow revamps, I follow an intensive design thinking process. After initial ideation and discussions with the product team, I thoroughly analyse the gathered information to establish a clear design strategy and identify any potential loopholes.

In explaining the design process for new product pushes, I will be using Stroll Bonfire as a case study.
During the ideation stage, while the team may already have a preliminary idea of the UI format for a feature, I make it a practice to emphasise generating more alternative presentations. Recognising that the initial ideas may not always be the optimal ones, this approach provides flexibility and allows for fallback options if the primary solution is not feasible with the current resources. By exploring multiple possibilities, we increase the chances of finding the most effective and suitable design solution for the feature.
During the same ideation stage, I make sure to simultaneously flesh out the user logic alongside the brainstorming of the interface design. This step helps in uncovering all the sub-flows, error handling and miscellaneous screens required. It is a critical step to check the feasibility of the feature before moving into implementation. By thoroughly examining the logic during this stage, I can avoid potential mistakes and mitigate unnecessary costs in the future.

Design

The design stage begins with the creation of low-fidelity sketches to explore the feasibility of ideas. Once a decision is made with the product team, I transition directly into creating high-fidelity designs. The final step in the design stage involves creating animation demos for an accurate representation of the designs in motion.

Design Handover

Creating Responsive & Custom Designs
As soon as the designs are finalised, I ensure that the screens are replicated to scale responsively across various devices. This process involves (a) adapting designs to different screens with the appropriate scaling requirements, and (b) creating custom designs for specific devices when necessary, taking into consideration the constraints of different devices to ensure optimal usability.
Animation
In the final step of handover, I provide a detailed documentation of the animation requirements, specifying in keyframes.

The thorough documentation approach was done to support the frontend developers, who were relatively new to implementing custom animations. By providing detailed documentation, I aimed to make the animation implementation process less daunting for the them.
Lastly, I provide a video demo that showcases the intended motion and interaction, setting clear benchmarks for the overall look and feel of the animation, further aiding the developers in achieving the desired results.

In a nutshell

The design process hinges on the balance between breadth and depth of discussions in the early stages, allowing for a diverse range of ideas and perspectives to shape the direction. Simultaneously, a focus on meticulous attention to detail during the fleshing out stage prior to implementation ensures a higher rate of success in delivering impactful product features. Adapting the process to align with the experience and maturity of the team is also a key factor in fostering a collaborative and effective design journey.
© 2023 Claire Teo | Built with Webflow