PC Builder

Design a PC Builder Phone App

Mobile App
Design

Summary

As a UX Designer, I took on the challenge of designing a comprehensive PC Builder Application. This project aimed to assist PC builders, gamers, and business professionals in designing and budgeting custom PC builds. My role focused on user research, requirement gathering, and UX/UI design to deliver a product that meets the specific needs of its target audience.

Role

UX/UI designer

Duration

October 2019 - December 2019

UNDERSTAND

Before developing the application, I conducted thorough research into existing solutions and engaged in detailed discussions with the client. These discussions helped me gather valuable insights into the ideal product features and user experience expectations. This process helped me compile a comprehensive list of requirements to guide the design and development phases.


RESEARCH

In my research phase, I delved into existing PC builder applications, identifying their strengths and weaknesses. I also explored current UX/UI trends, competitors, and relevant guidelines to ensure the feasibility and effectiveness of the application. This research was crucial in shaping the initial design concepts and functionalities.

99b190b7-5464-44c2-b222-7d255f7da865 rw 1920

4429c7e8-8c78-4f7b-aebb-64f8242461be rw 1920

ed925193-df27-4a98-bef9-1c4acb072033 rw 1920


GATHERING REQUIREMENTS

From my discussions with the client and the research phase, I identified key requirements for the application:

  • Users must be able to sort items when finding different parts.
  • Users must be able to name their PC build list.
  • Users must be able to create multiple custom PC builds.
  • Users should be able to add any item to a basket (Amazon integration).
  • Users must be able to find out more information about the PC part.
  • Users must be able to find the cost of each part.
  • Users must be able to find the total cost of building their desired PC.

I also gathered specific design preferences from the client, who preferred a darker theme to align with recent design trends.


LOGO CREATION

Before designing the application, I first created a logo for the client. Based on my research on logo trends for 2019, I decided to use aspects of the flat cartoon style, with the 'almost flat-icon trend,' incorporating subtle shadows and details to enhance the logo. The round logo represents the lifecycle of computers and portrays security, durability, and continuation.

The colour scheme was chosen based on colour psychology:

  • White: Efficiency and simplicity
  • Green: Security and a fresh start
  • Blue: Calm, corporate, and commonly used in the tech industry
  • Black: Professionalism and power

Ultimately, I chose a dark blue for its good contrast with white lines and its association with tech-related products, promoting precision and accuracy.

PC Builder - Logo Design


APPLICATION PLANNING

I decided on a colour scheme based on my research and colour psychology, ensuring it aligned with the chosen logo.

PC Builder - Colour Scheme

Investigating Amazon integration

65d02a9e-62fb-4f2a-831d-32802c9767e6 rw 1920

Creating basic wireframes to investigate the process:

PC Builder - Quick Sketches

PC Builder - Wireframe


UI DESIGN

Based on the sketches and the research I had previously conducted, I created the following designs:

PC Builder - Dark Design

After liaising with the client on the design, we decided that the darker colour scheme was not the best approach. Therefore, we changed the colour scheme to white, opting for a brighter aesthetic for the application.

PC Builder - Light Design


Final Product

3cfe1a55-0fe1-435a-b2be-55eec6334522 rw 1920

The final product is a user-friendly application that allows users to build and budget custom PCs effectively. It incorporates all the gathered requirements and features a modern, clean UI design. The application includes functionalities such as sorting parts, creating multiple builds, integrating with Amazon for purchasing, and providing detailed information about each part.

Through this project, I demonstrated my ability to handle the end-to-end process of application development, from initial research and requirement gathering to design and creating the final design to handover. This comprehensive approach ensured the delivery of a product that meets user needs and provides a seamless, efficient experience.

68eb2ef7-b096-485c-bf01-1ee4fa6744c6 rw 1920