WEBSITE & APP DESIGN
USER EXPERIENCE 2 I N V E S T I G AT I O N WEBSITE 6 I N V E S T I G AT I O N 8 SITE MAPS & WIRE FRAMES 1 0 PAG E S APP 1 6 I N V E S T I G AT I O N 18 SKETCHES 2 0 D I G I TA L PROTOTYPES 22 FINAL DESIGN L AYO U T
CONTENT
1
INTERACTIVE USER EXPERIENCE I N V E S T I G AT I O N E B S I T E
For this user experience investigation, I chose to go through the steps of sending an email with my iphone. Responding emails using your phone is so convenient that it has become an important tool in my professional and personal life. Over the years, Apple has been improving the email app on the iphone in order to speed up the experience and make it very easy to use. However, as I was going through the process, I found ways which the app could be improve. So, here are the steps: #1 Press the home button at the center bottom to activate the phone. #2 Slide your finger to the right in order to unlock the phone. #3 The pascode screen will come up, allowing you to dial you four-digit code to unlock the phone. #4 The home screen will pop-up. #5 Look for the mail icon at the bottom of the screen and press it. I personally like to have it at the bottom next to my four most used apps.
#6 The mailbox screen shows up. Select the email account you want to send an email from. In this case, I’ll be using my Gmail account. #7 In order to reply an email, select the email you want to reply to in your inbox folder. #8 Once you’ve selected the email, it will show up the email letter, and at the bottom you will see five icons. #9 Press the arrow icon and select the “reply” option. #10 The “new message” screen will show up, already with a recipient address typed. #11 Type your message and press “send” at the top-right corner. #12 In order to verify if you message was sent, press “inbox” at the top-left corner. #13 After that, press the email account you are using, in this case, “Gmail” at the top-leftcorner.#14 At your Gmail account main screen, select the “sent” option. #15 Once you’ve selected, all your sent messages will pop-up.
5 ways to improve the user experience in the app: #1 When your screen is locked, you have the option of sliding your finger upward, where a screen will popup, giving you a couple of features such as calculator, flash light and music. Would be nice to have a “new email message” icon there to speed up the process. #2 The “new email” icon is kind of strange. It took me a couple of messages to get used to the icon. I’ve notice that every device has a different icon, so to solve it I would simply replace it with the word “new”. #3 I would find it easier to have a contact list as one the options at the email account main screen. #4 I’ve notice that when I use the voice command tool, in the iPhone case, Siri, it doesn’t recognize symbols properly, so an improvement on that would be necessary. #5 I would include an “new account” option, so you wouldn’t have to go to settings in order to set-up a new account.
I believe that once you get used to this experience of sending emails using your smart phone, it becomes second nature. However there are many ways where you can improve it and speed up the process. Also I see this option targeted to people who needs to quickly respond to a work email or to individuals who simply enjoy the convenience of multi tasking in a single mobile device.
WEBSITE
As I was designing and making the changes according to the feedback provided, such as making the fonts clearer, little things started to make more sense. I focused my design on the simplicity of the user’s navigation. I believe users will find this website welcoming, I wanted to recreate a look that would accommodate all targets and allow the users to have a pleasant time while searching for a vehicle. The most challenging part was to find an easy way to organize a lot of information. Overall, from the user flow all the way to the new identity I’ve given to the website, I’m quite happy with the outcome.
2
WEBSITE
I N V E S T I G AT I O N E B S I T E
I went through a couple of different website with the same goal, in order to evaluate how were they approaching the search, and the overall user navigation. I noticed that most sites have the search bar showing on every page, allowing the user to make changes as he or she goes. Another part that I notice was how they handle such large inventory and how they got users attentions, to attract them to other pages of the site, such as, sell, events, community and etc.
6 WEBSITE & APP DESIGN
3
WEBSITE
SITMAP & WIRE FRAMESE B S I T E
8 WEBSITE & APP DESIGN
4
WEBSITE PAG E S
10 WEBSITE & APP DESIGN
APP
I wanted the app layout to be as simple and efficient as possible, so users can find what they are looking for fast. Through my research, I notice that a lot of “search products� app, focused on the search bar as their home page. On this final layout, I wanted to focus more on the car inventory, allowing the users to browse through it right of the bat. At the top bar, there are two options: menu on the left, and search on the right. The search options are more predominant when compared to the first concept and when a specific vehicle is found, the user will get a more vertical set up, allowing more space for the images. The app follows the same characteristics of the web site, so users will easily familiarize themselves with the app layout and navigation.
5
APP
I V E S T I G AT I O N
I went through a couple of different apps with the same goal, in order to evaluate how were they approaching the search, and the overall user navigation. I noticed that most apps have the search bar or a search icon showing on every page, allowing the user to make changes as he or she goes. Another part that I notice was how they handle such large inventory and how they got users attentions, to attract them to other pages of the site, such as, sell, events, community and etc. I also did a further ivestigation on what were the latest app icons shapes and sizes.
16 WEBSITE & APP DESIGN
6
APP
SKETCHES
18 WEBSITE & APP DESIGN
7
APP
D I G I TA L PROTOTYPES
19 WEBSITE & APP DESIGN
8
APP
FINAL DESIGN L AYO U T
THANK YOU
DESIGN BY: FERNANDO LOVERRI