Denmark's largest UX Community
Business Case

CPHUX is a Copenhagen based startup working to raise industry standards of UX design by uniting designers and businesses.

The Challenge

CPHUX was in its startup phase. They needed a website and an application where people could sign up and pay – and the quicker the better. Payments would be used to further develop the product.

Project Scope & Objectives

There were a variety of things that would be needed to bring in paying members:

» A fully responsive website– optimized for both desktop and mobile devices.

» A sign-up flow to guide the user in joining, paying, and registering as a new user.

» An HTML template needed to be created in order to create new pages for the website when needed.

» A style guide needed to be created to keep all added features consistent.

Live first version of website built with HTML, CSS and Django. It worked seamlessly on phones and computers.
The Outcome

✓ A product where a user could sign-up, pay and find out about the orginization

✓ Modular design & code for easy adoption to new pages and components

✓ Product optimized to work on mobile and desktop screens

✓ Style guide created in code to keep new iterations consistent

The Team

Founder & Community Lead Helena Levison

Backend Developer Krisjanis Vaiders

Frontend Designer & Coder Marci Papineau Gottlieb

Digital Designer Zsanett Vigh

My Role

Wrote all HTML and CSS. Was given rough designs that I tightened when coding. I got a local server running to work on the product on my computer. I collaborated with the backend developer extremely closely. He was writing the application in Django and Python. I helped create new pages in the Django framework. Collaboration via Slack and Github.

Skills Utilized

» Coding and designing directly in the browser
» UI Design
» Rapid Prototyping
» Product Development
» Responsive / Mobile First Code & Design

Tech Used

» HTML & CSS » Git » Django » Python » Visual Studio Code » Bootstrap » Google Fonts

The Process

Step 1 Dialog with backend developer who would build the backend in Django. In order to work on the frontend design/code, I needed to learn how to setup in a Django / Python environment and run a local server for development.

Step 2 Set up the project in Git for collaboration.

Step 3 Discussion of what was most important in the first iteration.

Step 4 Started to code screens from rough designs. Made design decisions based on how to make it optimal on all types of screens. Finessing the UI at this time.

Step Worked with Atomic design principles.

Step Coded reusable CSS for future development

Step Deployed via Heroku

Step User testing on the signup process (highlighted some problematic spots that needed revisions).

Step Added more detail to the landing page, and subsequent pages

ABOVE: Payment cards for first MVP of product

Rational for Design and Code Solutions

Modular Design The design was thought of in modular blocks to make it work on various screen sizes

Mobile First Code One of the most important criteria was that it worked on a phone, as that is were the users are. Because of the short deadline, Bootstrap for their responsive grid "right out of the box."