Petra
UX designer
Made with

Making design and business meet

for a Norwegian start-up in a remote work environment

INTRODUCTION

About Akademi for Programmering, Oslo

Akademi for Programmering, Oslo offers a full-stack programming course to adults wanting to shift careers by providing quality education from experienced people in the field.

Its vision is to provide quality education for adults who work full time and cannot participate in regular higher-education due to lack of time.

The course consists of 2 parts, back-end and front-end. The focus is on practical experience, live coding, and cross-functional skills, like UX and business in programming. Akademi for Programmering values interest, diversity, a pragmatic approach and growth.

My tasks were analysing qualitative and quantitative data, and using this information to rethink the brand, redesign the homepage to increase conversions, and content creation. 

BUSINESS: TASKS

Refreshing the brand

The old slogan was “Learn full-stack programming from scratch in one year by experts”.

A SWOT analysis revealed that one of the company’s weaknesses is that people don’t trust a 1-year old start-up. They are unlikely to commit one year and 80 000 - 100 000 NOK to it. To counter this, the course was shortened to 6 months.

Furthermore, competition analysis revealed that live mentoring is our great advantage compared to online tutorial sites like Freecodecamp, Udemy or Udacity.

Combining this knowledge with the SWOT analysis and the quantitative data from advertisements, we created a new slogan that better reflected the current service:

The new slogan is “Full-stack programming course in Oslo with live mentoring”.

An agile work environment

I worked in an agile environment using both Scrum and Kanban techniques and defining tasks in Trello.

For example, we used 1-week sprints for establishing goals, defining the target audience, iterating and testing respectively.

I found these agile methodologies beneficial for a start-up environment, because it’s crucial to save time and money by being flexible and effective.

A guide on logo variations in the design guide

A guide on logo variations in the design guide

Visual design foundations

I made the logo from a handmade drawing of the Oslo Rådhus, vectorized in Adobe Illustrator. I chose this building, because it’s iconic for Oslo’s citizens, and it represents the roots of the organization.

On top of that, by referring to a specific city a competitive advantage is emphasized; live mentoring, in person, in a given location.

The name is written in Roboto, light and bold, which is also the body text on the website. It's easy to read. The main field (programmering) is highlighted with purple, which is one of the common colors used in code editors.

The design guide includes all colors used, in RGB, HEX and CMYK, all fonts, logo variations for dark and light backgrounds, a guide for logo usage and links to the design assets.

UX: TESTING AND IMPROVING

My approach

My toolkit included personas, sketches, wireframes, UX copy, and prototypes for user testing and iteration. I had great freedom and responsibility working on a live homepage, therefore I paid special attention to business and UX principles.

Personas for different, but very specific target audiences

Personas for different, but very specific target audiences

Personas

Different but very specific target audiences (TA)

We researched the job market, and interviewed people who are potential members of our target audience to set up 4 personas representing our TA:

  • people shifting careers
  • people new to the country, seeking a profession that's less focused on language and conventions and more focused on hard skills
  • young adults starting their first careers
  • upskilling/reskilling adults

The personas focus on some prior knowledge about the TA's background, goals, frustrations, and needs.

We used the personas to highlight our most common unique selling points (USPs) and emphasize them in the design process later on. We reflected back to our personas during design decisions regarding layout and content creation (including promotions).

Making design and business meet

Wireframes

Basic layout decisions

The biggest problem I worked on was to optimize the front page to increase conversions. I took a reactive approach, since the page was already live.

I looked at the qualitative and quantitative data that was gathered in the past year.

Once I had the data I needed, I created low-fidelity wireframes for testing the layout and the content with the CEO and an external marketing specialist.

I used the good ol' pen-and-paper for sketching, and Adobe XD to create a final version. 

Due to the simple nature of this project, I decided to have fewer wireframe iterations, and test a high-fidelity prototype with users instead.

Testing

The first round of testing happened in-house with the marketing expert and the CEO. They double checked the content and the product in general, and gave feedback and change requests.

Once I finished those, I went out to interview 4 users who haven’t seen the product before. I asked them about what the product looks and feels like in general, as well as to carry out specific tasks, like finding dates or prices or signing up.

Quantitative data

From advertisements

Quantitative data from advertisement statistics revealed what Unique Selling Points (USP) had the biggest Click-Through Rate (CTR), and what images and texts worked best.

I used these statistics to change and optimize the content and layout of the homepage.

The most effective image was an image showing code on a screen, bringing 90% of the clicks, so I changed the banner on the homepage from a laptop on a desk to an image of code.

The most effective CTA was “Learn more”, bringing more than 90% of the clicks, so I changed the buttons on the homepage to “Learn more”.

The most effective headline was "Programming courses in Oslo" with the most effective ad text being "💻 Learn full-stack programming in Oslo! ☑️Practical workshops ☑️Portfolio building ☑️Modular curriculum". Therefore I chopped the original content up to smaller bits and added headers that included these well-performing keywords. 

 

 

Qualitative data

From interviews and previous communication

At the discovery phase of my project, I conducted user interviews in order to get a better understanding of the problem. I chose this method to verify or disprove some of our assumptions and have practical reasons for the design decisions we made.

Qualitative data such as e-mails gave me a good insight into what people consider important information, but can’t find on the webpage.

The most common things users asked about were dates, location, if it was an online course and if they needed any programming experience. In many cases the information was provided, but in large chunks of text, making it impossible to spot when users are skimming the webpage.

I combined frequently asked questions with popular keywords from advertisements, and created shorter paragraphs with informative headers.

In conclusion, so far the e-mails have actually been about more specific things, introductions and inquiries, so we consider this part successful.

UI: DESIGN HICCUPS AND DECISIONS
Making design and business meet

Emphasized USPs and readability

People kept mistaking the blue words for links in the original design, so I changed to orange for highlighting instead, which is complementary to the brand’s and the headings’ purple.

Making design and business meet

Artistic vs. casual

Design hiccups

Initially I chose a quite artistic picture of Oslo to represent the location, but testers said that users might not be familiar with this view at all.

They suggested that a more casual picture of Oslo could be something visitors see every day, and makes them recognize the place before they have to read anything.

Therefore we now have a simple photo of the Rådhus by daylight.

Making design and business meet

A familiar UI

For programmers

Once I tested out all usability mistakes, I started designing the final screens in Adobe XD. On top of the new layout on the homepage, I also corrected some design consistency mistake on other pages.

I followed the company's visual style that resembles that of code editor's: dark background with light grey letters, and bright colors for highlights - all included in their design guidelines.

We actually increased conversions!

Our bite-sized paragraphs and skimming-friendly layout actually got us more e-mails from people that were interested in the course, instead of basic questions like "when is the course" or "is it online".

Within a couple of weeks after the page went live one extra student signed up and paid for the course. This is all amidst the pandemic situation in 2020 March and April. Had we not have the corona-crisis, we would have gotten two more students.


5
Iterations
12
Screens
50%
More users
10
weeks
REFLECTIONS

Personally

I have discovered the importance of discipline and communication in remote work; the ability to structure my day, manage my time, communicate my ideas clearly and extra politely, and contribute to meetings.

I have learned how to prioritize and make design and business goals meet. I find it a vital skill in a start-up environment, where the impact of my design decision is greater.

I got better at being flexible but working fast and precisely even under pressure and tight deadlines.


Professionally

I have found the versatile design skills KEA taught me the most useful. Being able to create a logo, update a design guide, deal with a large amount of workload, and contribute to both business and development meetings made me feel confident in my knowledge. It encouraged me to take the initiative and communicate proactively.


COMMUNICATION AND COOPERATION

I have gotten practical experience with branding, and achieving a consistent visual appearance across platforms, serving a broader audience. I have successfully worked with UI/UX tools, like personas, wireframes, testing and iterating on prototypes, and learned to present these in a remote work environment.

Multidisciplinary cooperation

I took part in 100% of the UX and UI design process, and was involved in marketing and business, too. I cooperated with the CEO (a full-stack programmer) and an external marketing professional, too, who gave me feedback on the landing pages, and writing and best practices for communication, specifically during the coronavirus crisis.


Learning to prioritize in a remote work environment

The CEO is located in Oslo, the marketing professional lives in Budapest and I work from Copenhagen, so the work and communication was completely remote and online. I found that the ideation period is greatly affected by it. It’s easy to sketch up and explain things when we are in the same room, but I had to learn to create more self-explanatory and detailed mock-ups for online communication.

Wireframes and prototypes had to have a higher fidelity in a short timeframe, so I had to learn to prioritize what’s important for our next meeting and what are the small details that can be perfected later.

For example, UX copy and images were important, because I got feedback on them, but consistent, pixel-perfect spacing could wait until after the meeting.


A day in home office

One big challenge of remote work was the lack of an office environment. Upon arriving at the office, it’s easier to get into the work mindset, but home office requires discipline.

In order to get into the “work mood” at the beginning of the day I read newsletters and other design-related articles on LinkedIn to find inspiration. I found inVision, helloDesigner, UXpin, UXstudio, CodePen, and Codecademy content the most insightful.

The major part of the day I spent with getting work done, namely preparing for meetings, participating in the meeting, finishing personas, wireframe, prototype, preparing and conducting user tests, working on the live homepage and documenting.

Once the work for that day was done, I communicated it towards the CEO and (if needed) the marketing specialist.

"“Despite the relatively short time that has passed since we started to work together, she has already demonstrated great skills in front end design and architecture. Petra works fast and precise, even under pressure and in challenging circumstances. She is a trustworthy colleague and I hope to work with her on the long run!”"
Attila Bulenda, CEO of Akademi for Programmering, Oslo AS