UX/UI-project

LIER DESIGN

Idea  →  Learn  →  Research  →  Design  →  Create Prototype  →  Presentation

 

 

About the project
This is a UX/UI project in which the final product will be an app prototype about me.

 

What the client (myself) needed
My main task was to discover a way to creatively present myself in a job interview and in my portfolio, while actively demonstrating my knowledge of the design process, all at the same time.

Ultimately, I decided to create an app prototype to serve as a digital CV in which to present myself as a graphic designer, including an introduction to my online portfolio. In addition, I hoped to actually use my prototype as a get-to-know-me presentation in future job interviews, while documenting the whole process in my portfolio.

 

Software/Tools
– Pen, paper, post-its
– Photoshop (to edit images)
– Illustrator (wireframes/design)
– Principle (prototype)
– WordPress (portfolio presentation)
– Pages (portfolio presentation)
– Macbook
– Canon G7X
 Studio lights

 

Step 1 – The idea

 


What?
To demonstrate the entire UX/UI process, so that potential employers are able to experience my design process from start to finish. In addition, to present who I am in a more creative, interactive way than the typical paper CV. The final goal of the prototype is to show my skills as a UX/UI-designer/graphic designer; and hopefully, the employers/readers will also get to know me along the way.

 

How?
Idea: To create a personal app prototype and portfolio, which serves as my digital CV.

Learn: Discover, explore, and gain a deeper knowledge about the UX/UI process.

Research: Peruse the websites of my target audience (businesses hiring graphic designers): What are they looking for? What programs are important to know? What skills are they seeking? Browse through other designers’ portfolios to gain inspiration and information: How do other UX-designers present themselves and their work? What do their portfolios look like?

Analyze:
Brainstorm ideas and create mind-maps to structure my main focus and presentation. I didn’t notice any other portfolios built up from an app prototype, so I decided to go for it!

Design:
Put it all together.

Create prototype and presentation:
Make it real!

 

Why?
1. To highlight my skills, interests, and experience as a professional UX/UI graphic designer.
2. To show the UX-process and how I move from one step to the next.
3. To create a unique presentation aimed to “sticka ut” from the crowd, demonstrating what I can do and how I do it.

 


Step 2 – Learn
Internet – forums & other designer’s / UXTraining Online Certification

 

I took an in-depth UX-class (UX Training Online) in order to learn more about the UX process, so that I can apply more theory in future cases and projects. Upon completion, I received a UX Foundation certification, which can be seen on LinkedIn.

 


Step 3 – Research and Analyze
Internet – forums & other designer’s  / Pen & paper / Illustrator

 


Research notes


What are agencies looking for – what tools are important to know and what skills are they seeking?

There is a plethora of software out there, of course, and it is up to me to decide which one works best with which project. As I consider which software program to use, it is important to explore what I feel about them, how they will support my work flow, and which functions I need to create the best final product.

 

Some example programs I explored for this project are: Sketch, Adobe Xd, Principle, Marvel, InVision, Craft, Origami, Axure, Mockplus, Balsamiq, and JustInMind, just to mention a few. I played around with about half of them  and realized that certain software programs work well together with others, depending on the project; for example, Principle and Sketch, Illustrator and Xd.

 

The ones that I decided to use in this project are Principle and Illustrator, since I do not currently have access to Sketch, and Xd doesn’t have some features I find in Principle.

 

What kind of tips do professionals have (according to the research I did)?
– Be yourself and show how you think
– Show clearly your process, from A to B
– Tell a story
– Go from a rough flow to more details
– Be up to date
– Think of the questions: Why? What? How?
– Be a problem solver
– Discuss and show your strengths and weaknesses?
– “Show less but show your best”

 

How do other UX-designers present themselves and their work?
There are so many good designers out there, but what draws one in to a particular case study/presentation/portfolio? Some like portfolios with a clear documentation, while others tell their story using many images. Other important things to note are: ease of navigation, how one crafts his or her studies, and personality.

 

After considering all of my research, I decided to aim for a short and clear presentation, with a strong focus on clearing demonstrating process, incorporating my unique personality through my words and images my. In order to structure my content, I drew mind-maps to organize my research and to begin to focus on what my prototype/portfolio might contain. I used pen and paper, but MindNode is a good example of a software program to digitalize your mindmap.


Mindmaps

 

 

Step 4 – Design
Illustrator / Photoshop

 

Post-its with focus on goals, context, and  behaviors.


Goals for the prototype/portfolio: Provide information about me, demonstrate and share my skills and experiences, present a nice experience, smooth, and clear process. The idea is for it to feel both fun and informative. I want the user to find it exciting to explore.

 

Context: Where and how will the app prototype be used? My plan is to actually use the prototype at a job interview, where there will be a limited amount time to present my information. User-friendly to both professionals with experience in UX/UI, and professionals with experience within the design branch.

 

Behavior: My body language, self-esteem and pride in my process and product. Show my portfolio, professionals listening, and tech applications being used.

 

Information Architecture (IA)
Based on the mindmaps I did earlier, I organized the content, labeled it, and decided how 
to structure, and label the content.

 

 

Wireframes/Interaction / User flow
I used pencil and paper first to sketch simple wireframes, based on the mindmaps and later on the IA, in order to define the interaction and what controls to use. The interaction is based on what the intent is (to read more about, “skills”, for example), what kind of action it requires, (click on a link “skills”), and what the result will be (the user end up on the “skills” page). I want the user flow to be as easy and clear as possible.  There will be a home button on every page, and a menu button so the user can always navigate to whatever page they want to explore. 

 

Wireframe sketches

 

More detailed wireframe sketches

 

 

 

 

 

 


Digital version of high-fideltiy wireframes.

 


Design
Since the logo of lier design is based on three colors – blue, hot pink, and white, I decided to go incorporate the same color scheme on the prototype so the it is a seamless brand design. In deciding this, I considered and worked through basic design principles, such as, chunking, alignment, call to action, and visual hierarchy.

 

Style guide 

 

Design mockups

 

 

 

 

 

Step 5 – Create prototype
Principle

 

Important to create smooth animation within the prototype so the experience will flow seamlessly. Since it’s a prototype, not connected to a server, the links at the contact page aren’t connected. However, you can reach them from here below.

 

LinkedIn
Portfolio – Home page
Website (blog)

 

Download a short video of the prototyp (filmed in Principle in .mov format)
Prototype – Lier Design

 

 

 

Step 6 – Final Product – presentation in portfolio
Principle / Photoshop / Illustrator /  WordPress / Pages / Camera / Studio lights

 

This presentation!

 

 

 

BACK TO PORTFOLIO