UX / UI
PORT
FOLIO Martha Brandt
1
Design Process
Card Sorting
User Persona I create characters that summarizes and communicate the research and aid in creating a scenario.
Research I try to understand the problem by researching and mindmapping to find the best approach.
Then I organize topics into categories that make sense and help label groups using post it notes or pieces of paper.
Story/Scenario Creating stories and scenaries allow me to explore the product from the user’s perpective.
Concept
Wireframing
After gathering research and user data, I beginning brainstorming solution to my findings.
I begin building out my ideas through sketching and then build these iterated ideas out digitally.
Information Architecture Creating a hierarchial list allows me to protitize essential functions and control the user flow.
User Testing User testing allow me to make any final changes that ensure that the final product is intuitive to the user.
3
AUVision App for University Magazine Project The initial ideas for Envision Magazine’s app was to create a devotional app to further engage students on the Andrews University Campus. After conducting our first survey, we found that students felt that required chapels were not engaging and did not fit with thier unique schedule.
EVENT DETAILS
INTRODUCTION
Approach We decided to created an app that allowed students to engage with the community around them by signing up for community service events. While researching and planning for this app, there was an idea that came up to have the community service events be sorted by the person’s spiritual gift.
Design Solution The results of the research proved that students desire to be engaged on campus and that this app has potential to make obtaining chapels more meaningful.
Design Process Research
LOADING PAGE
Concept
Story/Scenario Information Architecture
Card Sorting
Wireframing User Testing
Information Architecture I built a user flow that allowed me to map out the
Loading Page
information architecture while tweaking any issues before starting to wireframe.
Settings
Home
Events
Home
Sign Up / Log In
View Events
Stories
Confirm ID
Refine Search
Spiritual Gifts
All Spiritual Gitfs
Event Details
Stories
Gift Decription
Get OPID Post a testimony about journey
LOG IN PAGE
Spiritual Gifts
Stories About Us
Privacy Policy
Log Out
View All Stories
Story Details
Submit a Story
5
Beijing Palace Website for Food Delivery Service Aa
Project Pudam dolori autem faccature voluptiumqui omnim idus
Omnes Font
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9
Aa
San Fransicsco
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9
dus maiorestia debitat. Odic totatur am, comni doluptate doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut molorestium quiae labor autatate laborep udanihil et
Approach Pudam dolori autem faccature voluptiumqui omnim idus dus maiorestia debitat. Odic totatur am, comni doluptate doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut molorestium
Design Solution Doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut
Design Process Research Wireframing
Concept User Testing
Information Architecture
Card Sorting
background color:
basic font color:
active buttons:
alert and actions:
ECEEFO
ECEEFO
ECEEFO
ECEEFO
WIREFRAME SKETCH
Wireframing I’m a paragraph. Click here to add your own text and edit me. It’s easy. Just click edit or double click me to add your own content and make I’m a paragraph. Just click edit or double click me to add.
LOW FIDELITY WIREFRMAE
HIGH FIDELITY WIREFRAME
Title Here I’m a paragraph. Click here to add your own text and edit me. It’s easy.
Title Here I’m a paragraph. Click here to add your own text and edit me. It’s easy.
Title Here I’m a paragraph. Click here to add your own text and edit me. It’s easy.
Title Here I’m a paragraph. Click here to add your own text and edit me. It’s easy.
7
TITLE HERE
LearningHub Online Learning Environment Project Pudam dolori autem faccature voluptiumqui omnim idus dus maiorestia debitat. Odic totatur am, comni doluptate doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut molorestium quiae labor autatate laborep udanihil et
Approach Pudam dolori autem faccature voluptiumqui omnim idus dus maiorestia debitat. Odic totatur am, comni doluptate doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut molorestium
Design Solution Doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut
TITLE HERE
Design Process User Personas Story/Scenario Information Architecture
Research Wireframing
Concept Card Sorting
TITLE HERE
User Personas I’m a paragraph. Click here to add your own text and edit me. It’s easy. Just click edit or double click me to add your own content and make I’m a paragraph. Just click edit or double click me to add.
James Davidson Age: 19
Occupation: Student
• Hardworking student • Lives off campus • Prefers studying at home • Owns a laptop and has access to internet • Works part time at the library
Ashley Morgan Age: 20
Occupation: Student
• Lives on campus • Always has phone in hand • Very busy, constantly in a hurry • Is taking an online history class • Prefers studying in groups
9 TITLE HERE
Advent Health User Experience Internship Project Pudam dolori autem faccature voluptiumqui omnim idus dus maiorestia debitat. Odic totatur am, comni doluptate doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut molorestium quiae labor autatate laborep udanihil et
Approach Pudam dolori autem faccature voluptiumqui omnim idus dus maiorestia debitat. Odic totatur am, comni doluptate doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut molorestium
Design Solution Doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut
Design Process User Personas Story/Scenario Information Architecture
Research
Concept
Wireframing Card Sorting
User Testing
PRESENTATION BOARD OF INTERNSHIP
Heatmap Analytics I’m a paragraph. Click here to add your own text and edit me. It’s easy. Just click edit or double click me to add your own content and make I’m a paragraph. Just click edit or double
Clicking I’m a paragraph. Click here to add your own text and edit me.
click me to add.
Movement I’m a paragraph. Click here to add your own text and edit me
Scrolling I’m a paragraph. Click here to add your own text and edit me.
11
AuMarketplace E-Commerce App Project Pudam dolori autem faccature voluptiumqui omnim idus dus maiorestia debitat. Odic totatur am, comni doluptate doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut molorestium quiae
SUBMIT A STORY INTRODUCTION
labor autatate laborep udanihil et
Approach Pudam dolori autem faccature voluptiumqui omnim idus dus maiorestia debitat. Odic totatur am, comni doluptate doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut molorestium
Design Solution Doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut
Design Process User Personas Story/Scenario User Testing
STARTING PAGE
Research Wireframing Card Sorting
Concept
Get OPID
Storyboard
Post a testimony about journey
I’m a paragraph. Click here to add your own text and edit me. It’s easy. Just click edit or double click me to add your own content.
INTRODUCTION
13
Boulder Dog Website for Dog Food Supplier Project Pudam dolori autem faccature voluptiumqui omnim idus dus maiorestia debitat. Odic totatur am, comni doluptate doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut molorestium quiae labor autatate laborep udanihil et
dus maiorestia debitat. Odic totatur am, comni doluptate doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut molorestium
Design Solution Doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut
Design Process
User Testing
Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9
Odic totatur am, comni doluptate doluptas dolectur re
perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut molorestium quiae labor autatate magnisquo magnam laborib uscium aniendant pelit litae
Pudam dolori autem faccature voluptiumqui omnim idus
Story/Scenario
Aa Bb Cc Dd Ee Ffdebitat. Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp dus maiorestia
laborep udanihil et elitatusa volum estempella as et aliciis
Approach
User Personas
Pudam dolori autemFont faccature voluptiumquiAa omnim idusFransicsco Rubiks San Aa
Research Wireframing Concept
background color:
basic font color:
active buttons:
alert and actions:
ECEEFO
ECEEFO
ECEEFO
ECEEFO
Responsive Layouts I’m a paragraph. Click here to add your own text and edit me. It’s easy. Just click edit or double click me to add your own content and make I’m a paragraph. Just click edit or double click me to add.
700 x 500 IPad and Tablets I’m a paragraph. Click here to add your own text and edit me. It’s easy. Just click edit or double click me to add your own
700 x 500 IPad and Tablets 700 x 500 IPad and Tablets I’m a paragraph. Click here to add your own text and edit me. It’s easy. Just click edit or double click me to add your
I’m a paragraph. Click here to add your own text and edit me. It’s easy.
15
Caravan Envision Magagine App Project
TITLE HERE
Pudam dolori autem faccature voluptiumqui omnim idus dus maiorestia debitat. Odic totatur am, comni doluptate doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut molorestium quiae labor autatate laborep udanihil et
Approach Pudam dolori autem faccature voluptiumqui omnim idus dus maiorestia debitat. Odic totatur am, comni doluptate doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut molorestium
Design Solution Doluptas dolectur re perum faccusanit repudictur rerit mo mo conem aut et quassinci repere ne restiosame voluptas nimus pre, odigendae platquo quas ut TITLE HERE
Design Process Concept
User Testing
Story/Scenario Information Architecture
Wireframing
Card Sorting
Card Sorting I’m a paragraph. Click here to add your own text and edit me. It’s easy. Just click edit or double click me to add your own
SIGN IN
content and make I’m a paragraph. Just click edit or double
SIGN UP
click me to add.
PROFILE
BEGIN A TRIP
CONTACTS
TRAVEL HISTORY
ENTER DESTINATION
TITLE HERE
START DIRECTIONS
TITLE HERE
FINISH TRIP
NOTIFIED WHERE OTHERS ARE
NOTIFIED WHEN OTHERS ARRIVE
BEGIN A NEW TRIP 17
Contact Information mbrandtdesigns.com mbrandtdesigns@gmail.com