.png){kind=small}
SQKII WEBSITE REDESIGN
USER RESEARCH & WIREFRAMING
LEAD UIUX DESIGNER - TAN FANG HUI
collaborating with co-founders, business development team, copywriters, developers, UI designers & SEO agency
DEC 2022 - MAY 2023
TOOLS USED - TYPEFORM, FIGMA, CANVA
SQKII
03
CONTEXT
Redesign of Sqkii's website.
​
Sqkii is a gamification marketing company that connects brands with gamers.
-Brands can participate as F&B partners on Sqkii's mobile wallet web-app, Kee, where gamers from existing AAA games are incentivised to purchase F&B to earn free in-game currency.
-Sqkii builds custom games for brands, also allowing them to participate as sponsors in popular games like #HuntTheMouse. Through these games, brands can drive their brand objectives by having players complete brand actions to win real-life prizes that are sponsored by the brands.
THE CHALLENGE
"How might we convey Sqkii's branding and offerings to brands and gamers through their site?"
EMPATHIZE / DISCOVERY & DEFINING
RESEARCH
Online survey
​
Due to time constraints and the need for a quick understanding of the problem, I created and deployed a Typeform survey to gather users' feedback on Sqkii's website experience.
Due to resource limitations, I asked 6 people around me, including 3 business users, to visit the website and participate in the online survey.
The survey aimed to identify their pain points and areas where the current website might be lacking in terms of understandability, trustworthiness, and overall usability.
​
I had the hypothesis that understanding Sqkii's offerings on their site was challenging, and some users confirmed experiencing the same frustration.
​
​
​
Key findings from survey responses
​
​
Usability
"For someone who happened to surf to the site, the same perspective will be shared i.e. have no idea what the site is for."
"The hamburger menu icon is positioned at the bottom right, which makes it challenging to navigate to other pages of the site since it's typically located at the top."
"The case study UI with the timeline looks less intuitive to interact with."
Branding
"Graphic overlaps and transitions could be better as they currently appear patchy."
"Having portrait videos play in a landscape default embedded player also feels a bit jarring on desktop."
Competitive audit
​
​
I also conducted a quick competitive audit, trying to find inspirations and gaps among existing websites similar to Sqkii.
​
​
​​
Key findings
​
​
Usability
​
+ Above the fold graphics and copy conveyed competitors' offerings succinctly, enabling users to quickly grasp their value proposition. Strategic placement capitalized on users' tendency to spend more time viewing the top part of the page
​
+ Attention-grabbing call to action buttons effectively placed to encourage users to take desired action
​
+ Top navigation to allow users to naivgate and find information quickly
​
​
Branding
​
+ Competitors' websites employed graphics and animation consistent to their brand identity
+ Competitors established their credibilities well with supporting data
​
​
Competitors
01
+ Concise messaging, easy to scan
+ Hero auto-play video succinctly conveyed their product capabilities
+ Social proof banners for credibility
- Slightly confusing IA
Gamify
02
+ Engaging interactions
+ Clear and concise information on their offerings
+ Social proof for credibility
- Unusual 2 navigation modes, deviates from user expectations of vertical scrolling
Solid Bash
03
+ Call-to-action banners appear above the fold
+ Full screen hero graphics offer an immersive experience
- Some call-to-action buttons blend into the background graphics
Ubisoft
Discussions with stakeholders
​
​
The co-founders, business development, and copywriting team engaged in multiple discussions with stakeholders, including the board of directors, investors, and marketers. To enhance Sqkii's market positioning, the decision was made to refresh the branding, messaging, and alignment with the company's new direction and goals. The UX team received a brief detailing the changes and guidelines for Sqkii's website revamp. This brief included the content to be included on the website and a suggested flow for the content.
​
​
​
DESIGN GOALS
Based on the user findings and identified problems, I outlined the higher-level user goals I aimed to achieve with the redesign.
Marketers/brands (B2B)
USER GOAL
Understand the benefits of working with Sqkii and how they can collaborate
DESIGN IMPLICATIONS
Convey the impact Sqkii can provide and establish credibility by showcasing social proof
Gamers (B2C)
USER GOAL
Discover available games and play those that match their interests
DESIGN IMPLICATIONS
Motivate gamers by highlighting the benefits of playing games developed by Sqkii
DEVELOP
IDEATION
Information Architecture
Since there were 2 distinct target audiences, I first brainstormed on effective ways of structuring and presenting information tailored to each group's preferences and needs.
​
To effectively capture and retain the attention of the main target group, marketers, I opted for two separate pages - one dedicated to brands and another for gamers. This approach allows for a clear and focused communication of Sqkii's value proposition to brands without diverting their attention with irrelevant information meant for gamers.
​
I considered various alternatives for navigating to the two different sites and weighed their respective pros and cons.
Given the priority of capturing the attention of business users, I opted for alternative 1 to ensure that all relevant information is easily scannable, minimising cognitive load. I presented the alternatives to other designers to gather their input. Furthermore, during discussions with internal stakeholders, I explained my choice among all the alternatives. If time permitted, I would seek validation from users to further confirm this design decision.
​
​
​
I consolidated the necessary content for the two different sites, prioritised, grouped, and sketched various information architecture alternatives on my iPad.
​
With user goals and principles like choice, growth, and disclosure in mind, I chose to create two subsites. The B2B site would include anchor links to works, solutions, about, contact form, and subpages for culture and blog. On the other hand, the B2C site would feature anchor links to games and about.
Low-fi wireframes
As vertical scrolling is an expected behaviour for web users, I opted for long vertical scroll design for both sites.
​
I gave priority to the B2B site, especially above the fold, and created multiple iterations of the homepage design through sketches to visualise ideas quickly. Later on, I converged these ideas to refine the proposed design.
​
Recognising that content above the fold receives the most viewing time, I strategically placed high-priority content addressing business user goals. This included prominent "Contact Us" CTA buttons, highlighting KPIs achieved for past clients, showcasing clients' logos for social proof, and featuring an image to convey Sqkii's various verticals or offerings at a glance.
I came up with a proposed homepage design structure that was to allow business users to quickly and easily find and scan information, and lead those who were interested to find out more to the blog subpage.​
During my subsequent discussions with the UX team and stakeholders, I presented the various alternative sketches along with my proposed mid-fi wireframe to gather their valuable feedback.
​
​
​
​
​
Mid-fi wireframes
​
Subsequently, I utilised Figma to create digital wireframes and mid-fi prototypes for both the B2B and B2C sites.
I prioritised the top part of the page, especially above the fold, for key user and business goals for both of the sites.
​
​
​​
View the brands mid-fi prototype in Figma
​
Mid-fi discussions and multiple iterations
​
I conducted a total of 4 mid-fi discussion sessions with key stakeholders for feedback and approval on the mid-fi wireframes.
​
I led cross-functional internal team discussions involving the co-founders, business development team, copywriters and developers. During each discussion, we reviewed the mid-fi wireframes, flow and features to ensure feasibility of implementation, as well as address business and user goals.
​
​
​
​
Mid-fi wireframes iteration 1
​
During the initial discussion where I presented my proposed mid-fi wireframes for the two sites, the co-founders provided the following feedback:
-
The featured image chosen did not effectively illustrate how Sqkii connects brands with gamers.
-
They preferred a design where more information is crawlable, avoiding hidden content in carousels.
-
They suggested incorporating additional statistics and brand logos for each of the three verticals or offerings.
-
They proposed modifying the interactive segment within the "Building Bespoke Games" section, enabling clients to select their brand objectives and explore related past case studies.
​
​
While establishing credibility is crucial, I recognised that the B2B site might become overwhelming with statistics and brand logos. This concern was shared by the UX team. To effectively convey this to stakeholders, I initially integrated them into the next iteration to gather supplementary feedback and raised the concern of maintaining a balanced approach between business and user goals.
​
Incorporating feedback from the initial discussion, I brainstormed and presented multiple alternatives for the above-the-fold section and the past case studies area. I carefully assessed the advantages and disadvantages of each option.
I also revised the interactive component within the "Building Bespoke Games" section.
These modifications and alternatives were then presented in the subsequent stakeholder discussion for feedback and approval.
​
​
View the brands mid-fi iteration 1 in Figma
​
Mid-fi wireframes iteration 2
​
During the second cross-functional internal team discussion, we collectively chose alternative 1 for the above-the-fold section, prioritising a design that would ensure responsiveness.
Regarding the featured image for the B2B site, the team concluded that illustrating the flowchart between brands and gamers might not be as pertinent as showcasing previously achieved KPIs from collaborations with past brands. We also discussed the possibility of involving the UI agency to suggest a suitable image.
​
Regarding the case studies section, we collectively favoured alternative 1 due to its aesthetic and contemporary appeal. Additionally, the team reached a consensus to avoid adding extra statistics and brand logos for each of the three verticals or offerings, aiming to maintain a cleaner design.
​
Following the discussion, I proceeded to refine the wireframes.
​
​
View the brands mid-fi iteration 2 in Figma
​
Despite time constraints, I made certain to prioritise mobile responsiveness, ensuring optimal content visibility across different screen sizes.
​
​
​
View mobile brands mid-fi prototype in Figma
​
Subsequently, I shared the polished desktop and mobile wireframes of both the B2B and B2C sites with the SEO agency. We collaborated to ensure SEO-friendliness and determined the appropriate formats for animations or carousels, such as HTML5 coding, for communication to the developers during the development phase.​
​
The SEO agency further offered a workaround for the featured image of the B2B site. They recommended including relevant statistics and the tagline "driving unreal ROI for brands" in the alternate text of the image. This way, the information could be effectively crawled by Google bots.
​
​
​
​
​
​
​
Mid-fi wireframes iteration 3
​
I shared the updated wireframes with one of the co-founders and the business development team in a third discussion.
During this session, they highlighted a refinement in the company's direction and goals, which had evolved based on additional feedback and discussions from the Board of Directors and investors.
​
- They aimed to streamline their offerings into two main products and emphasise how Sqkii leverages existing AAA games in the market. Their intention was to avoid presenting themselves solely as a game development company.
​
We also reexamined the flow of the B2B site and concluded that the section immediately following the above-the-fold content should focus on addressing business users' inquiries about achieving unreal ROI with Sqkii. This adjustment was made to enhance their user journey while navigating the website.
​
I continued refining the mid-fi wireframes for the B2B site based on our discussion and also developed an additional subpage dedicated to showcasing the best works of Sqkii. This addition allows business users to explore more details if they are interested.​
​
​
View the desktop brands mid-fi prototype in Figma
​
I presented the iterations of the B2B site, which were subsequently approved during the fourth discussion involving one of the co-founders and the business development team.
After obtaining approval for the revisions, the UX team collaborated on refining the mobile wireframes for the B2B site.
​
​
In reevaluating the B2C site flow, the UX team focused on aligning with gamers' user journey.
We determined the featured image should showcase past prizes to entice gamers to engage with Sqkii's games.
Following this, the next section highlights the games and the mobile wallet Kee, illustrating how players can access rewards.
Given the real-life prizes associated with Sqkii's games, subsequent sections aim to build credibility and establish trust in these rewards.
​
​
​
SOLUTION
Final designs of Sqkii's website will be posted here once live.
LEARNINGS
Amidst multiple iterations and a notable shift in the company's direction during the third discussion, I relished the challenge of devising innovative approaches to organize website content. This process harmonized user and business objectives, resulting in a more coherent and engaging user experience.
NEXT STEPS
Refining responsive design
​
Given time limitations, the UI agency will fine-tune tablet and mobile responsiveness. If I were involved in future iterations, I would focus on enhancing spatial layout and font sizes to ensure readability on diverse screen dimensions.
​
​
Evaluating the design with users
​
If I were involved in future iterations of this project, I would prioritise comprehensive usability testing involving both business users and gamers. This assessment would gauge the website revamp's effectiveness, uncover potential pain points, and identify emerging needs.