EASYWEB (Internship)

Improve onboarding on Easyweb.site by clarifying what Easyweb is, what problems Easyweb solves.

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 an UX designer in this project because of lack of time.


I produced a competitive analysis, user journey, wireframe and a design proposal which I believe was the first step to improve the onboarding of the user.

ROLES

UX-Designer

UI-Designer

TOOLS

Figma

Figjam

PERIOD

November - December 2023

COMPANY

Sphinxly AB

RESEARCH

Competitive analysis

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


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


My summary of the competitors:

  • Two calls to action directly in the header/navigation menu
  • Clear title and what the website means and what you get out of it
  • Trailer/teaser about what it looks like in the program
  • Option to watch demo video
  • Customer logs / Partners' logs
  • Overview of how the program works with both text, images, illustrations and animations
  • Tips based on different roles, how to use the program and what the benefits are
  • Categories on different websites you can build
  • Homepage templates
  • Newsletter / join community
  • Call to action - get started / contact seller at the end of the page

User Journey

I developed a user journey where the target group I assumed was the website owner and what a website owner would be looking for and what content would be of value.

CONCEPT SKETCHES

Wireframes

When I developed Wireframes, I wanted to include sections similar to those of the competitors, but also sections that emerged during the development of the user journey. It gave me a good starting point to start working with the structure.


These were the sections I wanted to include on the page:

  • "Sales pitch" with two call to action buttons directly in the hero.
  • Highlight benefits using icons and text
  • Include a step-by-step guide on how to proceed
  • Be able to watch demo video
  • Display the entire product solution with both text and icons
  • Include suggestions for website layouts
  • Bring customer references
  • Some kind of contact and newsletter section

THE RESULT

I wanted to create a softer feel between and in the sections compared to the wireframe and I did that by working with background colors and gradients. I worked sideways to create width and layer upon layer to create depth.


After some iterations of the wireframe, the design proposal landed in this (See video down below):

  • A hero with a sales pitch two cta a demo video that enlarges when scrolling down.
  • A section that describes what Easyweb is.
  • A five-step guide where each step was played as a demo video
  • A section with four benefits where it is possible to read more about each benefit on the right
  • A frequently asked questions section
  • Another sales pitch with cta contact seller
  • A benefit section with icons and text that appear on mouse hover

SOMETHINGS TO TAKE FORWARD

If I had worked further with this project, I would have asked for a deeper review of the brief and after that interviewed the target group of developers who have more knowledge in coding.
Then I would had iterated my prototype and do user tests on it.

WHAT I HAVE LEARNED

What I've learned is that it's easy to look for inspiration for ui design but it's hard to design without enough background from the target audience.


I chose to start from the target group of website owners due to limited time for research. This meant that the design proposal might not be what the project owner expected. More communication, clearer briefs and above all more time were needed. But based on what I had and what I delivered, I am still satisfied with the result.