Swordpoint Studios

What is Swordpoint Studios?

Swordpoint Studios is a company that offers revolutionary gaming tools that help streamline the productivity of artists and developers.

My Role

I am one of the two UX designers in a team of four, including a developer and the founder

Problem

Swordpoint Studios have created amazing digital tools to help gamers and editors, but the problem is users tend to leave the homepage without even checking the product pages, resulting to a low conversion rate.

A need for re-organization

Unnecessary duplicated elements, messy site maps, and an un-aligned navigation bar. All of these gave the website an 'unprofessional' feel.

EXAMPLES: the navigation bar had two buttons that led to the same thing

We need more appeal!

Respectfully, the pages looked plain and outdated. there was a lack of colors, element patterns, and hierarchy that could grab the users attention.

IMPACT: colors, patterns, consistent spacing can all contribute to catching a users attention and make tem curious

Brand perception

The copywriting and visual elements did not showcase a brand for the company - it lacked emotional branding and strategy

EXAMPLE: The whole website had a outdated, generic feel. the copywriting felt like any other companies.

IMPACT: a good branding can help you differentiate your company against others

Goal

Give Swordpoint Studios a research-based redesign. Showing professionalism and trust to our users.

Increase conversion & decrease homepage drop off

We want our users to click into our product pages, so they can learn more and be interested with our products. Which can hopefully lead to product downloads!

Outcome & Impact

NEED IMAGE - 7% increase

An Improved landing page

A banner that utilizes the company's slogan with the services they offer
Product image and information are shown in an organized pattern to invite visitors
Users are given options to download or learn more about the product from the landing page

Restructured Product Page

Option for users to download the product are given both on top and the bottom of the page for easy accessibility
The page was made more informational and appealing by utilizing colors, alternating patterns for text and images, and story-telling elements to provide information

Timeline

The company had initially done research and provided us the data they found. They also assigned us to conduct secondary research and analyze how other companies tackle similar issues.

Secondary Research
User flows

Moodboard
low-fidelity wireframes

Iterations
Final mock up

CEO's approval

Primary Research

Deliverables

Comparative Analysis

Affinity Photo

Uses clear information hierarchy that is easy to follow
Good use of imagery that enhances the look of the product
Option to download/purchase and product information is displayed from the front page

Affinity Photo landing page and product page

Adobe

Use of cards to display products makes the page look clean and organized
Opportunities to download are are accesible throughout the website
Elements are consistent throughout the website, which builds trust for users
Not much product information is shown on product cards unless users open the page

Adobe landing page and product page

TexturePacker

Shows UI of the Product they are selling
Text, color, and images used for the website makes it look outdated
List of software requirements to download is shown which is helpful for users to know what they need.

TexturePacker landing page and product page

Goal

After discussing the points we found, we decided to revise the site map to organize and improve the overall flow

Low Fidelity Wireframes

After brainstorming together, we finalized our low fidelity wireframes with these points in mind:

How can we educate the users about the product we offer? can we share product information in a fun and organized way?
How can we utilize our design to appeal to users and make them stay or download our product?
How can we show a sense of professionalism and trust towards our users?

Highlights

Utilized story telling elements and engaging headers followed by product information to help users understand our product
Used alternating pattern for product images and information to get the users attention
Clean UI to build trust and professionalism for our users
Opportunities for conversion are easily accessed

Moodboard

In developing the design of the site, we also wanted to capture the brand identity. We used a mood board to convey to the CEO how their branding will come across to consumers and visually validate their products.

Low Fidelity Wireframes

After changing the feedback that we received from the low fidelity designs, we implemented both the style guide and feedback and created a High Fidelity Wireframe.

For validation, we presented the final design to the CEO to which he gave us an approval!

Low Fidelity Wireframes

The Final design was approved and was implemented right away. After a month of being live, the CEO gave us good feedback."I got a lot of great feedback from customers after the website update. They said they had a much easier time finding what they needed, and the overall look was a lot more professional. Job did a great job!" (Swordpoint Studios CEO)

Learnings and Retrospect

Since this is my first internship in the world of UXUI Design, I was able to learn a lot of new things and experience how the work culture is like in the real world.

A few things that stood out to me in this experience is being able to communicate well that is involved in the project, including my partner, and the stakeholders. Another thing that I also learned was to be organized with the deliverables, especially when presenting it.

This experience is only the first of many, I will continue to learn and look forward to more opportunities in the future.