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.

Role:

UX Designer in a team of 4 with one other designer, developer and the founder

Tools:

Figma, Figjam

The Challenges

Swordpoint Studios have created amazing gaming tools that only a few have experienced! Their goal is to expand and have more users experience their product. However, they are facing a challenge right now. It seems that many users are dropping off from their homepage and are not exploring their product pages.

The Goal

Our goal is to create an eye-catching & accessible design for Swordpoint Studios that attracts users and highlights the product and its information.

With this in mind, we aim to:

Decrease user drop-off from the landing page
Increase user traffic into the product pages

The Solution

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

Secondary Research
User flows

Moodboard
low-fidelity wireframes

Iterations
Final mock up

CEO's approval

Primary Research

Deliverables

As the company already had prior research data, we were assigned to conduct secondary research and analyze how other companies tackle similar issues.

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

Revised Site Map

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

Our goal was to organize website information, making it look professional and trustworthy, to make sure that we are able to attract and maintain users in the website.

Once we felt we obtained sufficient information during the discovery phase, we started with the design phase collaboratively.

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

Overall user experience was improved by focusing on the user flow to conversion and presenting key information clearly and within the brand theme.

Mood board

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.

High 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!

Conclusion

The Final design presentation was approved!

Currently, the website itself is still in the process of being redesigned. When the website is up and finished then we will be able to see the new design, and after a few months see how successful the new design will be with the conversion rate of incoming users.

If I had more time..

If I had more time, I would have loved to do a usability testing to see how users would perform in the redesigned website. Nonetheless, I was still pretty happy with this experience!

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.