http://www.aisleone.net/
http://www.iflymagazine.com/
http://www.good.is/
http://www.nytimes.com/pages/t-magazine/index.html
http://www.mint.com/

Advertisements

Defining Project & Audience
The website that I chose to redesign was Fresh & Easy, a new market to the US. The primary audience is individuals 18 and up, that shop at a market for groceries. The demographic is fairly broad, but primarily attracts individuals that are price-conscious, eco-friendly, and pressed for time.

Sketching

Information Design

Interface Design

Visual Design

Prototyping: Wireframes –> HTML

Usability Testing

Iteration

Repeat

Final Version

Project Summary: State general project information,
goals, and relevant background information for the
site redesign. This paragraph should be a statement
overview of the project as a whole.

1. What is the basic overview of the project? Briefly
include background information if relevant.
Fresh and Easy Neighborhood market provides organic, healthy foods at a low price in a smaller, more concise shopping environment.
2. What is the single purpose of the new site?
The newer site should integrate a community aspect into the Fresh and Easy online experience.
3. What are the secondary goals of the new site?
A simpler design with a clearer navigation.
4. What are the long-term goals?
Users returning to the website to interact with the community features.

Audience Profile: Profile the target audience. Provide
enough detail to enhance everyone’s understanding
of who the audience is. Include some audience
demographic information. Use these questions as a
guide. Add some of your own.

1. Who is your target audience? Choose a typical
visitor and profile in detail. Include occupation,
age range, gender, online frequency, online
activities, and any other relevant information.
Profile more than one if applicable.
Our target audience is typically young urban singles or families that are cost and health conscious. No typical occupation. Majority age range from 22-35. Not gender specific. Spend enough time online to be familiar with the internet.

2. What is a typical task the visitor might perform on
the new site? (For example, register, log on, search
for information, buy a specific product, send their
email address, call for more information.)
A visitor would view the homepage. Login. Check new products, watch/generate user cooking videos. Create their shopping list and have it texted or emailed to their phone. Download and print coupons. Review products they have purchased and redeem additional coupons for reviewing the monthly “new product” list.

3. What do these people care about? Why are they
interested in the product the site will be offering?
What trigger would prompt them to visit the site,
and why would they be enticed to return?
They care about a less expensive, healthy, and easier shopping experience. The site enhances the user’s in-store shopping experience. The reviewing list issued each month that requires the user to purchase and review items for a coupon reward should prompt users to both visit and return to the site.

Perception/Tone/Guidelines: How should your target
audience respond to your new online presence?

1. What does the target audience think and feel
about the company and the current website?
They perceive the company as a responsible, eco-friendly, and inexpensive alternative to a typical grocery store. The current website is poorly organized, heavy/condensed, and too busy.
2. What do we want them to think and feel?
We want them to not be overwhelmed with information, have clear and concise navigation, and not be distracted by moving objects on the page.
3. How will this new website help achieve this goal?
Simpler phrases are used. 1 color instead of a spectrum of greens are used. There is more space between elements on the page. Type is readable and simple.
4. What adjectives can be used to describe the way
the website and the company should be perceived
by the target audience?
They should perceive the company as a responsible, eco-friendly, and inexpensive alternative to a typical grocery store.
5. What are some specific visual goals the site
should convey?
Simple, organic, and organized.

Communication Strategy: How will we meet our measurable
goals?
1. What is the overall message you are trying to
convey to your target audience? (For example,
cost-effective, secure, reliable, efficient.)
Responsible, eco-friendly, with reasonable prices.

2. How will you convey the overall message? (For
example, effective messaging through copy,
directed path towards goal, specific offer on
home page.)
Simple phrasing, clear labeling, color, and copy.

3. Identify stages of development (if appropriate)
used to execute goals.

4. How will you measure the success of the
redesigned site?
Number of users that post and view videos. Number of users that participate in item review programs. Number of coupon downloads. Number of email addresses on email mailing list.

Competitive Positioning: How you are different from
your competition and the factors that will make you a
success.
1. How is your company or your web presence different
from your competition?
The website is much simpler, with better design, and a useful online community with robust features.
2. What specifically sets your company apart from
your competition?
Size of store, cost of goods, and emphasis on organic and sustainable products.
3. What areas of the current site are successful
and why?
The color.

Targeted Message: State a to-the-point word or concise
phrase that will appropriately describe the site
once it is launched.

The Fresh and Easy online website exhibits sensible and smart design that communicates an eco-friendly/organic and professional approach to a cost-effective shopping experience for the smart shopper.

3 Personas created to help enhance the user experience on the redesigned Fresh and Easy website.

Latest ReDesign. Further simplified and organized.

The concept was to de-clutter the original Fresh & Easy website design while adding an interactive community feature to draw the user to spend time on the website and return consistently. The new design is significantly lighter, both in terms of color and density of content. Also, more concise verbiage is used to clearly define buttons, whereas they were unclear on the original design. The inclusion of their logo, which was not on the original site either, was a major design point.

The main problem I encountered was coding the drop-down menu. I included “jquery” along with the html and css, which is a type of javascript, to animate the drop-down menu. However, I could not figure out how to create a button for the drop-down other than the plus sign, which definitely detracts from the finished look of the page, and is unclear as to what the function is.

I’m going to add a way to be more clear that the use has logged in, once they have logged in, and provide a “logout” button. Also, I’m going to try to figure out a better way to incorporate the drop-down menu, as well as a different large banner for the page.


In the article, “Design Better And Faster With Rapid Prototyping,” author Lyndon Cerejo begins by defining what rapid prototyping is. “Rapid prototyping,” he explains, “is the process of quickly mocking up the future state of a system, be it a website or application, and validating it with a broader team of users, stakeholders, developers and designers. Cerejo expounds upon the importance of the keys to successful rapid prototyping, which include revising quickly based on feedback and using the appropriate prototyping approach. The three step process of prototyping, reviewing, and refining ensures an effective final product and can be used “rinse/repeat” style.

From the website, Smashing Magazine

In the article, “Sketching in Code: the Magic of Prototyping,” author David Verba discusses how prototyping is one of the best methods of effectively designing within any type of collaboration. Verba insists on using the whole spectrum of quick prototype “sketches” to fully functioning prototypes, depending upon what each individual situation requires. It’s the quickest way, in his opinion, to quickly convey an idea or visual concept that requires interaction. He emphasizes reminding viewers of the protoype that it isn’t about the fidelity of the graphics, but about what they’re doing.

From the website, A List Apart

In the article, “Paper Prototyping,” author Shawn Medero explains how to create a prototype for situations when you’re away from your computer or sick of software. The first draw to paper prototyping is that it doesn’t limit individuals who aren’t comfortable with html. Suddenly, the initial design is more accessible to a greater number of people. Post-it notes can be used for drop down menus, with the possibility and potential to be engaged by a group of people is heightened. Medero encourages this method for use with larger input groups, relieving one person of inputting feedback into html or software, and opening up the design floor to everyone.

From the website, A List Apart