Examples of interface designs

Project overview:

Wattum is a leading crypto mining equipment and complete mining solutions provider based out of the United States. Wattum offer a wide range of products and services, from ASIC Miners, mobile industrial Mining Containers and Power Transformers, to complete hosting and managing plans, and full facility buildouts.

Challenge:

Boost Wattum's digital growth, revenue, and brand reputation to increase sales and market share.

Solutions:

  • Increased brand recognition and awareness by developing a comprehensive brand guideline that effectively communicated the brand's visual identity and design principles.
  • Designed and developed a Design System, resulting in a more productive workflow for the design and development team and improving design efficiency and consistency.
  • Enhanced user satisfaction and engagement by redesigning existing web pages and improving usability and brand consistency, resulting in increased website traffic and user retention.
  • Drove business growth and revenue by developing new webpages that addressed specific business and client needs, resulting in increased sales.

My Role:

UX Research, Branding, UX/UI Design


Collaborated with:
UI/UX designer, 2 Developers, Project Manager, Business Analyst, Copywriter


Sep 2021 - Nov 2022
Hide Process Details

Research Phase

1. Competitor Analysis

Competitor analysis is an important research method. It helps us recognize how we can enhance Wattum's business strategy. It tells us how we can outdo our competitors in these areas to keep our users' attention, resulting in a competitive edge over others in your sector.

We started by analyzing the scope of competitors to understand the market state better and figure out our 10 top competitors. The output helped us to understand our strengths, come up with various ideas and find points for improvement. I divided these ideas into blocks depending on their goals and inputs. For example - more transparency and trust, showing our benefits, selling points, etc. I did this analysis in collaboration with BA, a designer, and PM to see the market from a different perspective.

Competitor researc data

2. Surveys and interviews

I have used a few methods to understand business and users' pain points, motivation, and needs and evaluate user experience and satisfaction on the website. It was surveys, stakeholder and user interviews, and usability testing.

I conducted this research in different stages of the product development life cycle. In the beginning - to better understand the users and eliminate unwarranted assumptions from the design process. In the design stage - to receive feedback and test hypotheses and concepts. In the end - to evaluate user satisfaction and product usability and to test the flow.

 Usability testing script and survey examples  Wattum persona 1 This group of individuals is interested in setting up their own cryptocurrency mining equipment and managing their mining operations on their own

For the first group, who are interested in buying and setting up their own mining equipment, is important to provide comprehensive information about the technical specifications of the equipment, as well as detailed instructions and support for setting up and maintaining the equipment. This group is also interested in information about the latest developments in the field of cryptocurrency mining, including updates on market trends and changes in hardware technology.

 Wattum persona 2 This group of individuals is interested in investing in cryptocurrency mining, but prefers to have a third-party company manage their equipment and mining operations for them.

For the second group, who are interested in using a mining facility and purchasing maintenance services from your company, it is important to provide information about the security and reliability of the facility, as well as clear pricing and service level agreements. This group is also interested in information about the profitability and potential returns on investment for using our mining facility and services. Providing clear communication and responsive customer support would also be key to satisfying the needs of this group.

3. Web analytics

As I led the design process on the team, my responsibility was to create a powerful and effective design process for the company. To make data-driven design decisions, I conducted web analytics workshops repeatedly (Google Analytics and Matomo). It helped to monitor the impact of decisions we make on the existing user experience on the website and formulate new hypotheses for the next iteration.

Web analytics data

Information Architecture

The crypto mining market grew up rapidly. Hence, we had to be on the same page with it. We designed Wattum very fast to launch the MVP asap. We implement new pages weekly. Of course, it affected the information architecture on the website. After MVP launched, we conducted research that showed that navigation on the website is not intuitive and hard to navigate.
I used Card Sorting to figure it out. Card sorting is a UX research method in which study participants group individual labels according to criteria that make sense to them.

Old navigation and card corting UX research examples

This research method helped me design a better website structure and navigation that satisfied users' expectations and became clearer overall. As indicated in the site map below, the product had two major parts: "Website" and "Store". It is because we use CMS for the "Store", and the CMS has a lot of limitations and restrictions. I worked closely with the developer to figure out all restrictions and limitations. It helped to clarify what could be changed, customized, and redesigned.

site map example wireframe examples

Visual Design

Different concepts testing

The phrase: "We are not our users" is always on top of my brain. Hence, before creating a guideline and landing pages for the product, I decided to validate different concepts with real users. It was a pivoting step that defined the main components of the visual design.

Different concepts ideas

Brand Guidelines

There were a couple of pages already done when I joined Watum. However, all of them were created using inconsistent styles. The product did not have any brand guidelines or even a UI kit. And it was one of the main problems that did not allow Wattum efficiently scale the project and work productively. As a lead designer, I start by creating design rules and restrictions. It is so important to have a style guide to help designers maintain brand uniformity when developing the project. As we need to grow fast, we have a couple of designers to cover different business needs. The style guide is crucial when many designers at the same digital product.

Branding examples

Figma pattern library

After brand guidelines, the next important step was creating a Figma pattern library. I built one in parallel with the creating website. I started with styles and then worked on atoms, molecules, and organisms (according to the Atomic approach).

Creating a pattern library takes time, but it is definitely worth the effort. Pattern libraries help list, categorize, and simplify UI. I used auto layouts, components, and variants. It expedited the work of designers, developers, and anyone else working on a website. It helped us to standardize our designs and incorporate that into our brand identity.

Figma pattern library example New navigation example
project examples

Conclusion

By conducting researches, creating and redesigning multiple screens, developing brand guidelines, and collaborating with a talented team, we were able to improve the digital experience for customers.

1. One significant impact was the development and implementation of a new website structure and navigation based on user research and card sorting. This resulted in a 30% increase in user engagement and a 25% decrease in bounce rates.

2. Also we redesigned product pages with a focus on user needs, resulting in a 15% increase in conversion rates and as a result increase sales.

3. Additionally, I established brand guidelines and a pattern library, which improved brand consistency and saved up to 10 hours per week in design and development time.

Overall, my contribution to the Wattum project not only allowed me to enhance my leadership and UI/UX design skills, but also helped to positively impact the business's growth, revenue, and branding standing.


Visit Wattum website.

Other Projects


other project

SaaS Education Platform

View case study

© Helen Vintoniak. All Rights Reserved.