PRODUCT MANUFACTURER(Internship)

Improve the user-friendliness of the existing website

OVERVIEW

This was an opportunity for me to develop myself more in UI design and thus did not do all the steps of the design process as a UX designer in this project because the lack of time.


As an UX designer, I saw a need to, among other things, fill out the start page with a more comprehensive content of the entire company, simplify and clarify the product pages, clarify the navigation menu. But also restructure content and group together similar content.


I also wanted to highlight safety and the security guarantee more on the website.

ROLES

UX-Designer

UI-Designer

TOOLS

Figma

Figjam

PERIOD

November - December 2023

COMPANY

Sphinxly AB

RESEARCH

Competitive analysis

I produced a competitive analysis of three competitors which I analyzed based on their individual strengths, weaknesses and uniqueness.


Once I had selected my competitors, I screenshotted their websites and went through each one, making notes. I analyzed their strengths, weaknesses and uniqueness based on ux, ui and text/copy.


Summary from the competitive analysis:

  • Clear navigation menu
  • Selling point
  • Product category overview
  • New/latest products
  • Additional services
  • Sustainability
  • Customer references
  • News
  • Reseller
  • Contact

User Journeys

I developed two user journeys, one for haulage companies and one for service partners as they may have different inputs, needs and experience with the product manufacturer.


User journeys are a good tool for describing how a specific target group interacts with a product or service and an understanding of the entire user experience. It gave me a good foundation for wireframes.

CONCEPT SKETCHES

Wireframes

I created wireframes to convey the structure and user flow without thinking about design and only content. I kept it low fi with few colors to focus on structure.


Wireframes gives indication that the structure can be changed and discussed through and it is easy to iterate wireframes compared to high fi prototype. Wireframes also make it clear that nothing has been coded up yet.


It took 7 pages of wireframes to reach the goal of the improvements I wanted to make.


  • Home page
  • Product catalog
  • Product page
  • Guarantee
  • Quality
  • Reseller
  • About us

THE RESULT

As the web agency has customer clauses to follow vis-à-vis the customer, I cannot post any customer-specific photos in the portfolio, but I can show them during a possible interview.


When the wireframe work was finished, I moved on to start sketching a design proposal that could be the basis for a high fidelity prototype.


  • Worked with the client's images and developed typography, color palette, icons, headings and also worked through the client's text content from the existing page.
  • Redid the product catalog page and added sorting/filtering
  • Softened the sections by reducing the number of boxes and framesAdded background colors to highlight different sections
  • Easier access to information about organization and company history with a timeline
  • Featured digital brochures and magazines
  • Highlighted the company's opportunities for optimization and special adaptations

SOMETHING TO TAKE FORWARD

If I had worked further on the project, I would have interviewed the target groups and gone through the graphic profile with the UI designer to set the design. I would then have done user tests on the target group to then iterate the design and prototype based on all the insights from the interviews and user tests.

WHAT I HAVE LEARNED

I have learned that it is difficult to improve something without sufficient research and without contact with the customer. Having said that, this was a project I did during my internship to develop more in ui, which I still feel I have done.


In this project, I didn't follow the design process as I normally would, which was very educational and gave me insights into how important it is for me as a UX designer to include all parts of the process. It also turned out that the customer wanted a different graphic profile than their existing one, which I did not know or got to know during the course of the project. It gave me insights that it is important to have clear communication and briefing with several people involved during the course of the project.