UX&UI / 2021

Redesigning the Website of Wayout for Effective Customer Reach

Responsibilities: UX Design, UI Design & Interaction Design

The Challenge

As a startup, the most current urgent task for Wayout was to increase its exposure to a larger customer base. Digital marketing through websites has been considered an inevitable step for Wayout. However, its current website doesn’t communicate quality information to customers. It needed to redesign the website to clearly showcase Wayout’s brand to prospective customers by clearly establishing what they do and how they do it.

My Role

I led this project and was supported by a team of 4, comprised of a Visual Designer, two Developers, and a PM. I was the sole individual responsible for user experience, and I also created some visual deliverables that you will see in this case study. I saw the project from the kickoff meeting to the launch.

Background review

I began by digging into the value proposition of WAYOUT:

– What does WAYOUT do?
– What’s the mission and vision of WAYOUT?
– What offerings do they provide?
– What kind of visual identity do they want to establish?
– What does their current website look like?
– What is missing there?
– What are the good ideas that I can take?
– What is the brand guide?

Content creation

I created a site map that communicated the core pages of the website and the navigation around the website. I put them together into well-organized categories for products/service offerings. Under each category, I listed the specific sense-making content from a customer’s perspective.

Wireframes

Once we had a solid direction for the design, I began to produce wireframes. I put the designs in front of the customer for testing and feedback. Through multiple rounds of reviews, I narrowed the design down to a solid and mature design framework and thus moved into visual design. Together with clients, we experimented with a wide array of designs, eventually landing on a scrollytelling structure which is the fusion of scrolling and storytelling: a way to dynamically tell long-form stories as the user scrolls. In this framework, user activity triggers transitions between elements and styling methods of all sorts: alternating texts, changing imagery, interactive backgrounds, animation effects, sizing changes, and more. Every single element blends together and conglomerates to form a flowing, alluring story in motion.

A living design

In the interest of high performance for the website, this design needed to be scalable, flexible, and alive. This is one of the primary reasons why I went with such a grid-based structure. It would scale well across devices including mobiles, tablets, laptops, and big monitors.

Mockups

During the visual design phase, I worked directly with Jani, our awesome Visual Designer. Following the brand guide, he used a mix of clean lines, strong typography, bold colors, unique imagery, and an atypical grid structure to elevate the design to a new level for Wayout.

Interaction design

In the original design, it was very static, and felt as if it went straight from the PSD to the code. So in this iteration, I used interactions to bring the page to life, draw users into the content, and help confirm user actions. I adopted the parallax effect, which is a scrolling effect where the background images move slower than the foreground elements, giving the illusion of three dimensions in a 2D space.

Why Use Parallax Effects

1. Improved User Experience

Research has shown that micro-interactions and animated user interfaces are key elements when it comes to making digital interfaces engaging and usable.

2. Reduced Bounce Rates

Bounce rates are the percentage of site visitors who either hit the ‘back’ button or close the tab before checking out other pages on the site. High bounce rates have a pretty significant impact on the SEO ranking. Engaging parallax effects can bring that rate down.

3. Increased Engagement

A great thing about parallax scrolling is that it creates such an engaging and immersive environment for a story to unfold. Parallax allows dynamically revealing details of the product as the user goes through the narrative created for them and, when done right, the parallax effect gives the user the feeling that they’re in control and that they choose to engage with the site.

Photo framing

I took a very unique set of photos intended to fit perfectly into the atypical grid structure. This would allow always showing the focus section of the photo when the window expands out or shrinks down. This turned out to be a distinctive element of the design. The thoughtful repurposing of space was very important in this design and something that the client specifically noted during testing.

Internationalization and localization

As a company targeting an international market, Wayout required a website that could easily be scaled to an equally global site. In addition to English, the pages might also be translated into Arabic. This was an important factor when considering the layout, making sure it could also adapt to right-to-left alignment.

Code development

The developers in this project did an incredible job of putting together clean code that was compatible across all devices. I worked with the visual Designer to execute all interactions properly, ensure that the design translated well to the code, and QA test along the way.

Launch

In an awesome moment, we launched the new website right as Wayout presented its brand and product at Dubai Expo 2020 on stage. The client was very satisfied with our delivery.

#Reflection

This was a daunting project with a hard deadline. We were under a ton of pressure and the output required from the customer was high. We pulled through together and shipped the product that achieve high customer satisfaction.

Despite the fact that we delivered satisfactory outcomes, the process wasn’t too easy for us. At first, the client couldn’t be reached frequently due to their busy schedule. The only communication and feedback collection happened through email exchange, which made it less efficient to catch client needs and expectations. Sometimes, working with the client could feel like a game of 20 questions where each subsequent answer didn’t seem to get you any closer to the truth. Suddenly you found yourself in the vicious cycle of endless iterations. Maybe the client knows what they want, but has a hard time articulating it. For example, they gave vague feedback. After sending the first draft of wireframes for viewing, the client responded, “I feel like the design lacks intent, spirit, drive, and a sense of urgency. Can we try another version?” Here, the client wasn’t specifying what they feel would be having intent, spirit, drive, and a sense of urgency. Instead, they’re asking for more work without any additional direction, hoping they know the right piece of work when they see it. Another challenge I found working with the client is conflicting opinions. The client tended to sacrifice usability for visuals. It is apparently not the kind of philosophy that we would suggest when designing a catching website with a good user experience. But I completely understand as the client doesn’t necessarily speak the design language and master good design criteria as we do. As consultants, it is our responsibility to translate clients’ needs and create products or services with optimal customer experience from a professional perspective.

I do think verbal communication is key. Instead of doing multiple rounds of refinement to accommodate the client’s changing vision, having a detailed conversation about what they’re really looking for can save a lot of unnecessary time and effort. I have managed to bring the client to a daily status updates/ design review meeting, which has shown improvement in communication and made the work progress better. To address vague feedback, I helped clients stay on track by asking them hyper-specific questions about the design. With this, we got to identify the action that I should take next. Instead of puzzling “this feels monotonous”, I acted on more detailed feedback by asking the client to specify the reason, like “this feels monotonous because there’s no evident information hierarchy through typography.” I provided the client with a detailed clear list of which components I needed clarity on in order to move forward. Often, clients who don’t have a background in UX design lack the vocabulary to express what they want to say. As the expert, I should guide the conversation by giving them words to describe what they have in mind: “When you say X, do you really mean Y?” When we were done, I sent an email summarizing what we agreed upon so we could reference later if we need to. In the end, it’s much easier to have a conversation like this than to devote the time and energy required for needless rounds of additional exploration. As for the conflicting opinions, in my opinion, we should not compromise before examining the client’s request. As a consultant, we should be happy to accommodate client requests generally. But merely meeting customer requests doesn’t make it high customer satisfaction. We should aim to exceed customer expectations, which often starts with challenging customers. Usually, it’s time for us to educate them. A strong brief could have helped solve the conflict, too. It could help us align mismatched expectations and streamline scattered feedback.

Perhaps the most rewarding part of this project was that it made me start thinking about how UX consultants can create good designs. What are the criteria for success from the perspective of consultancy? Do we only aim for customer satisfaction? Does high customer satisfaction mean high design quality? Maybe not. At least, from this case, I can see we have sacrificed some quality, like accessibility. There’s still room for improvement. But the client was already happy with what we delivered, “Great stuff! Looks super nice! Very sleek and sophisticated design and excellent responsiveness across aspect ratios. A job very well done! Thank you all!”, the client said. We need to find a balance where future-proof and sustainable products/services that meet customer expectations and create the optimal user experience can be created.