UX to UI Project Baran Cakmak

Stage 1: Define the problem and create the solution.

Define the problem:

While working in a group we had to define and outline the problems users may have and come up with solutions to those problems to make it easier and more efficient to use the app. We placed all this information in a word document.

Create personas:

Next we had to make two personas of the average user that would access this app. This is a way for us to see what the most important parts of the app are. It would also help us find out how we should design the app itself by basing it on the personas strengths and weaknesses.

Stage 2: Create a sitemap

Next we deconstructed a website and had a discussion about the most important sections of a website. Afterwards I made a sitemap which would lay the foundation for the navigation of the app.

Stage 3: Paper Prototypes

Next I created a paper version of the completed app. This version is very basic with no graphic elements or colour present since I had to focus on the layout of the app.

After I finished the paper prototype I had 3 users test it and give me any feedback on elements that could possibly be improved.

Stage 4: Digital wireframes

After I made adjustments to the paper prototypes based on the feedback I was given I developed them as digital wireframes. The digital wireframes are similar to the paper prototypes but they also contain some colour. These digital wireframes were developed in Adobe Illustrator.

Stage 5: Developing a visual style

Now that the layout was completed I moved onto developing a visual style. I started by creating 2 A3 mood boards which would contain different images which evoke the look and feel of the interface.

After the mood boards were completed I developed to A3 style tiles in response to these mood boards. These style tiles show the colour palette, textures, fonts, and a logo which will be used in the final app design.

Stage 6: Presentation Mockup

After finishing the mood boards and style tiles I created a 6 page A3 presentation mockup. The mockup would contain the near-final designs for the app while also containing an explanation about the concept of the design.

Stage 7: Final design

After I finished working on the mockups I used them as inspiration for the final design. The final design includes concepts from both mockups but is much more refined. This final design was made in illustrator.

Created By
Baran Cakmak
Appreciate

Made with Adobe Slate

Make your words and images move.

Get Slate

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.